Different Border Styles for Various Uses

I intentionally write this article to elaborate more those different border styles that add beauty to our CSS applications.

Below are lists of border styles:

none: Defines no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders are the same as the border-width value

groove: Defines a 3D grooved border. The effect depends on the border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color value

inset: Defines a 3D inset border. The effect depends on the border-color value

outset: Defines a 3D outset border. The effect depends on the border-color value

Explanation:

• Border width, style,color and padding
In setting the width of the borders, we will use pixels (px in short)

For the style, select among the nine styles (none, dotted, dashed, solid, double, groove, ridge, inset & outset)

For  adding colors, you can choose it from our color code generator.

And lastly apply padding [this explains the distance of your  elements  from the borders and this being affected by the background color)

Example:
              border: 7px outset #642880; padding: 15px;

But you can also specify what border width, style and color  to be applied in  each side. Please take a closer look at the example below.

The css that used in this example is "background-color: #adad25; border-bottom: 15px ridge #B04F6F; border-left: 10px outset #2F2D7C; border-right: 3px inset #F8F835; border-top: 20px double #981510;padding: 20px;"

Now if you want to present something (text, image or video)

in your post that is being enclosed in a border, you can use the code below.

<div style="background-color: none;border-top: 5px double #B04F6F;border-right: 5px double #B04F6F; border-bottom: 5px double #B04F6F; border-left: 5px double #B04F6F; padding: 3px;">Enter your data here </div>

Change the border style, background color, width, color of each border and padding that would match on your data presented.

Have a nice Day Bro and Enjoy!
Credits goes to w3schools with little modification from me. 

Creating a Full Width and Removing Sidebar of a Certain Page Post

This post is the answer of the questions of many bloggers including me on how to increase the width of a certain page post and remove  sidebar to make it more attractive and let the readers to focus on our post only.

 Creating a Full Width and Removing Sidebar  of a Certain Page Post

Always have a back-up of your template before editing.
Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Look for the code ]]></b:skin> and just below that, paste the code below,

<b:if cond='data:blog.url == &quot;http://bloggingtipsandtrix.blogspot.com/2014/05/html-and-css-generator-for-blogger.html&quot;'>
      <style>
        .main-inner .columns {
          padding-left: 0px !important;
          padding-right: 0px !important;
        }
        .main-inner .fauxcolumn-center-outer {
          left: 0px !important;
          right: 0px !important;
        }
        .main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
          display: none !important;
        }
      </style>
    </b:if>


Note: Replace the red highlighted text above with your own page url.

Step 3. Click Preview first to be sure, then Save your Template!

• Replace the red highlighted texts with the url of the post you want this tweak to take effect.
• If in case you have another posts that you want to apply  this kind of trick, just paste the same code below or after the first code that you had just applied.

Example.
 In my case, I  created a full width and  remove the sidebar both in my About and Contact page.
(Observe the two opening <b:if  and closing </b:if>)

<b:if cond='data:blog.url == &quot;http://bloggingtipsandtrix.blogspot.com/2013/04/var-servicedomainwww.html&quot;'>
   
      <style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
  </b:if>
    <b:if cond='data:blog.url == &quot;http://bloggingtipsandtrix.blogspot.com/2012/12/about-me.html&quot;'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

If you have some questions feel free to write it at the comment box below and we will try our very best to satisfy you. Peace on Earth Bro !!!
Credits goes to the author of this blog and to southerspeakers

Adding Twitter Follow Buttons In Blogger Sidebar

 In my previous tutorial, I  wrote an article about putting social media buttons that float in the left side of  your blog post body section and that is really cool . Likewise,  placing a social media button specifically Twitter Button in our sidebar adds professionalism to our blog.

Adding Twitter Follow Buttons In Blogger Sidebar

Step 1. Log in to Twitter and fill up the form with all the information needed

Step 2. Copy  the code  at the right side of the form and paste it in the sidebar of your blog.
             Steps in putting the Twitter Follow Button(s) codes in your sidebar.
        A. Go to  Blogger Dashboard >> Lay out >> Add Gadget

        B. In the Pop-up widow, scroll down and select HTML/Javascript

        C. In the blank Page, paste the code that you get in the above step

Step 3.  Finally, click Save Arrangement :-)
Credits goes to way2blogging with some modification from the author.

Customizing Tables in Blogger Post

Yesterday, I wrote an article about Adding Tables in Blogger Post Editor and it features only the basic components of an HTML Tables. To make it more lively in appearance, it is advisable to add a little css codes on it. Now, I will show on how to add colors to your table borders and to its background.

Customizing Tables in Blogger Post

Step 1. Go to your Blogger Post Editor or Create New Post
Step 2. Copy and paste the code below to your Blogger Post Editor page (switch it on HTML mode).

<table cellpadding="0" cellspacing="0" style="border: 5px solid #158aee; width: 400px;"><tbody>
<tr>
      <td style="background: blue; border-bottom: 5px solid #FF0000; border-right: 5px solid #FF0000;">Row 1, Column 1</td>
      <td style="background: #D703FC; border-bottom: 5px solid #FF0000; border-right: 5px solid #FF0000;">Row 1, Column 2</td>
      <td style="background: #3BE21D; border-bottom: 5px solid #FF0000;">Row 1, Column 3</td>
</tr>
<tr>
      <td style="background: #A77C58; border-right: 5px solid #FF0000;">Row 2, Column 1</td>
      <td style="background: #F6FF00; border-right: 5px solid #FF0000;">Row 2, Column 2</td>
      <td style="background: #FCFFA3;">Row 2, Column 3</td>
</tr>
</tbody></table>

The above codes will create a type of table below:

Row 1, Column 1	Row 1, Column 2	Row 1, Column 3
Row 2, Column 1	Row 2, Column 2	Row 2, Column 3

We will take a closer shot on the above codes:

• The tag style="border: 5px solid #158aee represents the style i.e. border around the table which is 5px solid in size and 158aee in color. You can select border styles here.
• In the first cell (Row 1, Column1) and second cell  (Row 1, Column 2) we only styled the border bottom and border right  because they are covered by table outside main border. 
•  In the third cell (Row 1 Column 3) we only styled the border bottom because it is being style by neighboring lines and main outside borders.
• In the fourth cell (Row 2, Column 1) and fifth cell (Row 2 Column 2), it is only styled in both in border right because it is also influenced by the neighboring lines or borders respectively.
• And lastly in the sixth cell (Row 2,Column 3), we did not apply any border style because it is also covered by other neighboring border cells.
• Be careful in Adding Border Styles to each table cell because the border(s) of the other cell will be affected and cause  overlapping of the borders as shown below. 



Row 1, Column 1	Row 1, Column 2	Row 1, Column 3
Row 2, Column 1	Row 2, Column 2	Row 2, Column 3


The last cell (Row 2, Column 3) has two top borders because I add a css style which is border-top: 5px solid #176D87 that is not necessary.
• If you want to change the background color of each cell, just replace the hexadecimal colors in each cell (it is preceded by the tag <td style="background:. You can choose a variety of hexadecimal colors here.

If there are still confuse or there are things which are not so clearly discussed, feel free to write us in the comment box below and we will try our very best to answer it.
Have a nice day to everyone and Enjoy !
Credits goes to mybloggertricks with some modifications from the author.

Adding Tables To Blogger Post Editor

Sometimes in order to present data to our readers, we need to put it in a table to make it more presentable and easy to understand. In this post, I will show the basic structure in making tables and how to customize it to make it ready for your viewers.

Adding Tables To Blogger Post Editor

Step 1. Go to Blogger Dashboard >> New Post
Step 2. Switch your Blogger Post Editor in HTML mode and paste the code below.

<table border="1" cellspacing="0" cellpadding="2" width="400"><tbody>
 
    <tr> 
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
    </tr>
    <tr> 
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
    </tr>

    <tr> 
       <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
    </tr>

  </tbody></table>

The above codes will produce a table with three (3) rows and two (2) columns

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2
Row 3, Column 1	Row 3, Column 2

Let us make things clear with through the  informations below:

• The red bold texts show the start and end of the table structure
• The table border is 1, you can also add borders or put it to 0
• There you can see cellpadding and cell spacing
• If you want to control the width of your table adjust the value 400px
• The tags tr and td refer to rows and columns respectively
• The above table has three (3) rows because I have put three (3) <tr> tag
• The above table has three (2) columns because I have put three (2) <td> tag inside every <tr> tag
• Always put a closing tag in every opening tag. Example <tr>...</tr> and <td>....</td>
• To put a  data (image, text, video etc), switch your post editor to HTML mode and put the mouse cursor in between <td></td> tags

Click here to  fully customize your table (adding background, putting borders etc.)
Step 3.Save your Post and Enjoy your day pal!
Credits goes to mybloggertricks with some modifications from me

Adding Beautiful Stylistic Cascading Popular Post Widget

Today, we will style your popular post widget that is different from the others, for you can design it like a terrace in your sidebar. We will just add a css code from your blogger HTML editor. So let's jump ahead with the process.

Adding Beautiful Stylistic Cascading Popular Post Widget

Note: Before editing your template, it is advisable to have back-up for it.

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Look for ]]></skin> and just before this tag, paste the code below,

#PopularPosts1 ul{margin:0px;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;padding:3px}
#PopularPosts1 ul li:first-child{background:#EFF5FB;width:95%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#E0ECF8;width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#CEE3F6;width:85%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#A9D0F5;width:80%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#81BEF7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#fff; border: 1px dotted #353535; width:20px;height:20px;line-height:1em;text-align:center;font-size:17px;color:black;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 {
margin-left: 20px;
}
.PopularPosts img {
padding-right:.4em; height: 38px; width: 38px;
}
#PopularPosts1 ul li .item-thumbnail {
float: left; border: 0; margin-right: 10px; background: transparent; padding: 0;
}

Step 3. Click Preview then save your template  and see if it blend with your  blog's environment.

Customization (Optional):

You can choose a variety of hexadecimal color here
A. First part (the color of each popular post box).
    --- Box no.1-5 the hexadecimal colors are  EFF5FB, E0ECF8, CEE3F6, A9D0F5, 81BEF7 respectively. Change these hexadecimal colors with your own likeness.

B. Second part (the with or distance of the box container).
   --- Box no.1-5 the width are 95%, 90%, 85%, 80%, and 75% respectively. Increasing the value will increase the width and decreasing the value will also decrease the width.

C. Third part (the circular  number tag in each box).You can find the code that control this part at 15th- 17th line of the codes.
  --- Change the position (y-axis or vertical ) of the circle that bears the tag by replacing 20px. (Less than 20px, will place it higher and more than 20px will place it in the lower position).
----Change the placement of the circle (x-axis or horizontal) by replacing right to left,
----Change the color of the number inside the circle by replacing black with your own,

D.  Fourth part (the Size of the thumbnail)
---- Change the height and width of the thumbnail by replacing 38px,

E. Fifth part (the position or placement  of the thumbnail)
----You can place the thumbnail by changing the yellow bold text ( you can replace it with writing right)

Thank you for your PATIENCE and Smile!
The credits goes to the author if this article and to helplogger