How to Customize Blogger Sidebar Titles

Now a days most of the Blogger templates comes with stylish sidebar titles. But some of them have still old simple look. Most of my blogger friends asked me about how to turn these titles into stylish ones. In this following tutorial I will explain how to customize these sidebar titles. You can change the font, size, color, add border, background to the sidebar titles. First of all we have to find below code into your template. Just search for .sidebar h2 .sidebar h2 { margin:0; padding:0 0.2em; line-height:1.5em; } If above code is not present in your template then add it just ABOVE the ]]> Now you have the sidebar code we will customize the titles. Adding Borders Just add border:1px solid #000000; below the .sidebar h2 { Above is the all four borders to your sidebar titles. You can choose to add bottom, top, left and right border or combination of them. border-bottom:1px solid #000000; border-left:1px solid #000000; You can change the border thickness, style and color. Adding Background color Just add background:#A9A9A9; below the .sidebar h2 { You can add any color by changing color code value. Adding Background image In this case we will add a background image to the sidebar titles. First will will need to prepare the image. Create your own image or get from internet. Crop it to fit with your sidebar and upload it on Picasa or PhotoBucket or other image sharing website. The width of the image should be same as the width of your sidebar. The hight of the image will be adjusted in line height. The entire code will be as follows: .sidebar h2 { background:url(YOUR_IMAGE_URL)no-repeat; margin:0px; padding:0px 0.8em; line-height:50px; } Changing Font of sidebar titles Just Add font-family:Impact; below the .sidebar h2 { You can try different fonts like: Georgia Palatino Linotype Book Antiqua Times New Roman Arial Helvetica Arial Black Impact Lucida Console Courier New Verdana Tahoma Lucida Sans Unicode and many others Changing size of the font Just add font-size: 120%; below the .sidebar h2 { To adjust the font size, change the value in red. This way experiment yourself to make your sidebar titles more attractive. Bye for now. Posted in: Blogger Hacks n Tips 1 Related Posts Blogger Hacks n Tips Add different style for each widgets How to add Sidebar gadgets/widgets in separate boxes Add icon/picture beside Labels and Links list in Blogger Sidebar How to Customize Blogger Footer columns How to create 3 columned footer with different style? Roundabout Recent Content Slider for Blogger Headlines (Simple Recent Posts) widget with summary for Blogger How To Change Text Selection or Highlight Color in Blogger blog Awesome Recent Posts Widget with thumbs for Blogger blog How to move your blog from Wordpress to Blogger in 3 Simple Steps? How to use Dropbox to host your scripts for free? Importance of perfect title for Blog Post and How to write it. How to add Yahoo Smiley Emoticons to Blogger Comment Form? Customise Favicon using Page Elements Newer Post Older Post Home 0 comments: Post a Comment Share Twitter Delicious Facebook Digg Stumbleupon Favorites More Games, cheats, trainers, guides Hollywood, Bollywood movie review Latest Mobile, Tablets Reviews Webmaster's Blog Recent Update How to Customize Blogger Sidebar Titles (0 Replys) New Asha series of phones from Nokia (0 Replys) Versatile Blogger Template (0 Replys) Add different style for each widgets (0 Replys) Blog Archive