Adding Borders to Sidebar Titles in Blogger
Step 1. Go to your Blogger Dashboard
Step 2. Click Template then have a back on it by clicking the Back-up button
Step 3. Hit the Edit HTML button
Step 4. Find the code below by clicking anywhere inside the Template code then in your mouse use the Control F. Place the code below inside the box.
]]></b:skin>Step 5. Just above that code in step 4, place the code below
.sidebar h2 {
border-top:1px solid #000000;
border-right :1px solid #000000;
border-bottom :1px solid #000000;
border-left :5px solid #000000;
margin- top;0
margin- right;0
margin- bottom;0
margin- left;0
padding:0 0.2em;
line-height:1.5em;
}
Customization:
- To change the border size in each corner, simply change 1px in line 2 to 4 and 5px in line 5. The greater the value the bigger its appearance.
- To change the border style which is solid, replace it with dotted, ridge, dotted, dashed, double,groove, inset or outset. Click here to see the appearrance of these diffrent border styles.
- To change the color of your border style, replace #000000 (black) with other hexadecimal colors
- The margin is set to zero but you can adjust it. You can experiment this one according to your preferences. Don't forget t o add px after the numerical value like 1px,2px etc.
- The padding is the distance of your sidebar title form your sidebar border
- And finally, the line height speaks on the position of your sidebar title inside the borders.
Step 6. Save your Template and you're done buddy!
Try to read:
How to add Background Image in every Sidebar Title
Adding Webkit- Box-Shadow to Menu Tabs and Side Bar Title
How to Animate Borders in Blogger Sidebar
How To Customize Labels In Blogger Using CSS3
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
No comments :
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV