Widgets

How to Add Borders To Blog Content In Blogger

Looking into the different amazing features, natural or man made, would make us say "wow" that's beautiful. Our reaction is parallel to blog styling specially when we visit some blogs that there are borders surround the post body and sidebar title. Adding borders to blog's different parts somehow adds beauty on it. I will show very simple steps on how to do it. But before you will jump to the tutorial please click this link to be acquainted with the different border styles and its uses.






Adding Outside Main Borders to Blog Content in Blogger

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


Step 2.  Look for ]]></b:skin>  and  just above it  paste the code below,
.content-inner {
border-top: 1px dashed #242424;
border-right:1px dashed #242424;
border-bottom:1px dashed #242424;
border-left:1px dashed #242424;  }
Adding Borders  To Post- Outer

Copy and paste the code below above ]]></b:skin>

.post-outer { border-top: 1px dashed #242424;
border-right: 1px dashed #242424;
border-bottom: 1px dashed #242424;
border-left: 1px dashed #242424;
}

Adding Borders to Sidebar Title
#Your Sidebar Title ID h2 {
border-top: 1px dashed #242424;
border-right: 1px dashed #242424;
border-bottom:1px dashed #242424;
border-left: 1px dashed #242424;    }
Short Customization: 

1. To change the size of the border, you can replace 1px in every border side(top,right,bottom,left)
2. To change the border style, replace dashed with your own. You can select/choose it here.
3. To change the color of your border, replace 242424 with your own hexadecimal color, you can select it with our color code generator.
Step 4. Save your Template.



No comments:

Post a Comment

Recent Posts

Related Posts Plugin for WordPress, Blogger...

Definition List