Stylish Design for customize Blogger sidebar Heading

Stylish Design for customize Blogger sidebar Heading Blogger sidebar is an important thing that contain many widget like Facebook, Twitter fan widget, subscription widget as well as advertisement. However the main part is Sidebar heading which will affect the total Blog design. So if we can add stylish sidebar headline then readers and viewers attention can be grab easily. But some default Sidebar headline may look like monotonous, so we can make it different by adding a simple CSS code block. Hope this tutorial will help you to make your blog sidebar different from other. To add custom sidebar headline first of all you have to remove the existing sidebar heading, after that by adding any code from below you would able to change the sidebar headline. How to remove the existing sidebar headline design For removing existing sidebar headline design we have to find the code and then we have to delete the code block. So follow the below steps- Step1Log in to your Blogger Account and Go to yourBlogger Dashboard Step2Click on Now click on-Template-Edit HTML Step3Now find thebelowby pressing Ctrl+F .sidebar h2 { ------------------------ ------------------------ ------------------------ } concentrate only on .sidebar h2 to closing braked. Step4Now delete the whole code block up to closing } (second braked). Step5Finallyhit theSavetemplatebutton. Adding the Sidebar New Heading style After deleting the previous sidebar headline code now follow the below steps for implementing the design. Step1Log in to your Blogger Account and Go to yourBlogger Dashboard Step2Click on Now click on-Template-Edit HTML Step3Now find the/b:skinby pressing Ctrl+F Step4Copy any code from below and Paste the code above/before/b:skin Style 1 Code for Style 1 are below- .sidebar h2 {padding:5px;background:#000000;color:#FFFFFF;font:140% 'Oswald',Sans-Serif;} Style 2 Code for Style 2 are below- .sidebar h2 {padding:5px;border-bottom:5px solid #000000;color:#000000;font:140% 'Oswald',Sans-Serif;} Style 3 Code for Style 3 are below- .sidebar h2 {padding:5px;border-bottom:3px dashed #000000;color:#000000;font:140% 'Oswald',Sans-Serif;} Style 4 Code for Style 4 are below- .sidebar h2 {padding:5px;border:2px solid #000000;color:#000000;font:140% 'Oswald',Sans-Serif;} Style 5 Code for Style 5 are below- .sidebar h2 {padding:5px;border:2px dashed #000000;color:#000000;font:140% 'Oswald',Sans-Serif;} Style 6 Code for Style 6 are below- .sidebar h2 {padding:5px;border:2px dashed #000000;border-bottom:5px solid #000000;color:#000000;font:140% 'Oswald',Sans-Serif;} Style 7 Code for Style 7 are below- .sidebar h2{background:#333;margin:5px 4px 5px 0;padding:9px 0 9px 10px;border:0;color:white;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;text-decoration:none;text-transform:uppercase;box-shadow:4px 4px 0px rgba(33,33,33,0.45);} Style 8 Code for Style 8 are below- .sidebar h2 {padding:5px;border-top:1px solid #000000;border-bottom:5px solid #000000;color:#000000;font:140% 'Oswald',Sans-Serif;} Style 9 Code for Style 9 are below. However to use this sidebar style your template sidebar width must be 362px. .sidebar h2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Agm644l51-O5lm2CNBgspSj-LQlzdsOiI7VqkVXdBm4uRZVHbG6y-FoGMGWIfP5xOL1gx3fgA6FFJqOK5F7m7JaunZhdbJAOnNoSUnLo8jts7ABgYMAKdvRRDBtslQAdFO7aUDAosCm8/s1600/BloggerSpice+SidebarH2.png) no-repeat scroll 0 0 transparent; color: rgb(213,213,213); height: 66px; font-size: 140%; font-weight: bold; margin: 0 0 -28px; position: relative; left: -30px; top: 0; width: 362px; text-align: center; padding: 15px 0 0; font-family: 'Oswald',Sans-Serif; padding-bottom: 15px; } Style 10 Code for Style 10 are below- .sidebar h2 { padding:10px; text-align:center; border-top-right-radius:30px; border-bottom-left-radius:30px; background:#000000; color:#FFFFFF; font:140% 'Oswald',Sans-Serif; } Step5Finallyhit theSavetemplatebutton. Customization To change the Background and Border color change #000000 with different color. you can get the color code fromColor Picker. To change the Font size alter 140% with 120% or 160%. To change the Headline Font change 'Oswald',Sans-Serif with different font. Now check your template sidebar to see the new style. I hope you will like the new looks of your template sidebar. Thank you.