New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



How to Add Borders to Sidebar Titles in Blogger


Putting border(s) around  your sidebar title is one way of catching eyes attention to your readers. It drives readers to grab attention on it  and see some links  in that area. I know this is  basic in blogging yet useful  in some other ways. Below are the simple steps on how to customize (putting borders) to  your blog sidebar  title.
add borders in sidebar titles
Demo here

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:
tilt  hover effect
Hello folks! This is Viral Apps, 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
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

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,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...