WELCOME TO EHOST.COM.NP

Saturday, December 17, 2011

How to Change Post Title Background Color in Blogger-Blogspot Templates



In this tutorial I'll tell you how to change the post title background color in Blogspot blogs. This option is not present by default in Blogger Template Designer. We can add background color to the post title and also change the color of title itself. As usual, we'll do some editing in the template HTML code and after that, you'll be able to change the post background color from Blogger Template Designer. So, here are the simple steps to follow:

Note: This tutorial has been updated on 06/18/2016.


Steps to Change Post Title Background Color


  1. Open the Template section.


  2. Blogger Updated Dashboard

  3. Click the Edit HTML button.


  4. Blogger Edit HTML Button

  5. You'll see a lot of code on next page. Don't worry. Just expand the ... tag by clicking on the arrow on left side.



  6. Now find the following code:

  7. /* Variable definitions ====================

    Replace the above code with the following one:
    /* Variable definitions ====================   


  8. Now find following line of code:

  9. ]]>

    Replace the above code with following one:
    h3.post-title { background:$(post.title.bg.color); padding:10px;}
    ]]>

  10. That's it. Coding is finished. Save your template. Now, changing the background color is super easy. See below.



How to Customize the Post Title Background Color from Blogger Template Designer?


  1. Open the Template Designer by clicking on Customize button.



  2. Chose Advanced from left side and then click the first option Post Title Background Color.



  3. Now, simply make changes and make sure to click the Apply to Blog on top right to save your changes. You can also preview the changes live.


I hope this tutorial was helpful to you. There is another tutorial to center the post title. Do check that out as well. Kindly add a link back to this blog. Link code is available at the bottom of this page. Add it anywhere in your blog. For further customization, contact me and get your work done for as low as $11.
ADS SPACE

Categories

Article How-to All Posts WordPress Android Web design Blogger Plugins CSS Google JQuery Plugins Programming Reviews Web Hosting Blogger Blogging Blogging Tips Tricks Web Development Facebook Git Internet Make Money Online Social Plugins Tips Tips and Tricks Tools Tutorials Windows WordPress Plugins Blogging Tips and Tricks Freebies GSM Google Analytics HTML How To's JavaScript Plugin Development S.E.O SEO SMS SmartPhone Social Media Tips amp; Tricks Top-Most Updates Webmaster Tools Whatsapp Applications Apps Blogger Basics Documentary Downloads Entertainment Gadgets Games Gmail Google AdSense Guest Post IPhone Make Money Blogging SVN Security Softwares Web Hosting Tips and Tricks Wordpress Tips Wordpress Tips and Tricks hostgator iOS Advertising Networks Advertising Technology Affiliates Antivirus Audience amp; Traffic Biography Blog post Blog post Blogger Blogger Errors Blogger Tips Blogger Tools Blogger Widget Blogosphere Bogger Widgets CSS selectors CSS symbols CSS3 Computer amp; Internet Content Writing Coupon Codes Data amp; Analytics Deleted blog Design DoubleClick for Publishers Email and newsletter marketting Email marketing Excel Tips Excel Tips and Tricks Facebook Tricks Feed Feedburner Feedburner subscribers Font Fun GitHub Giveaways Gmail primary inbox Gmail tabs Google sign-in Guides HTML amp; CSS HTML5 Infographics Inspirational Instagram Internet Marketing Internet Tips amp; Tricks Job Listings Knowledge Life Hacks Lists Make-Money Monetization amp; Conversion Monetize Navigation Online Marketing Other PHP Tutorials Passport Publishing amp; Content Quotes RSS Sidebar Smartphones Social Networking Status Tech Tech Blog Technology Telegram Themes UI / UX User Psychology amp; Research VB.Net Web Tools Web browser Widget Windows Tips Windows-10 ad viewability admin notice blogging tools bluehost cherry-pick clone cors custom scrollbar customizer dismissible notices duplicate post feed title git branch git clone gpg gpg2 hybridauth iPad icon font notice responsive wordpress theme same origin policy scrollbar signed git commit smartsvn theme customizer vcs wordpress theme wordpress themes

Blog Archive