How I use Google Chrome To Design Blogger Templates?

Google Chrome Developer toolGoogle Chrome has excellent capability of allowing you to see how your design looks by adjusting the settings live. You can redesign or edit the style sheet of any website your wish using Chrome. While designing a template, one of the things that takes much time is alignment of objects on a div section. The margin and padding property can be a headache if you are not habitual with tools such as Chrome. I normally use MBT HTML Editor to design widgets but just few weeks ago I have started enjoying using chrome for my design projects. I will share some basics here that you can learn in order to better align and style elements on your blog. You can also investigate what CSS properties like font type and effects a site is using.  All this is done using the Developer Tool provided by Google Chrome. Which lets you to edit CSS, HTML and Scripts of any website online. I am sure you will enjoy this tutorial. Follow up.

Design a Menu Using Chrome

I hope you have downloaded Google chrome. If not then please Download it here.  Now open your blog or any site you wish to edit.

Take an example of our blog. Suppose I wish to redesign the look of my sub navigation menu

design menu using Chrome

I will browse the blog in Chrome and I will right click anywhere on the menu and choose "Inspect element"

inspect element

 

Choosing Inspect element will open a new window with two columns. The first column shows the main HTML of your blog and the right column displays the CSS styles applied to each div section.

Chrome Developer tools

As you move up or down your mouse cursor over the div tags in the HTML section you will see that area being clearly highlighted inside your blog. Since I clicked on sub navigation therefore the div section for sub navigation is highlighted by default in the html section and I can clearly see its CSS styles appearing at right under the CSS column. Here is the CSS styles for the navbar as shown in the CSS column:

Note: A CSS Class is preceded with a dot symbol (.blabla) in stylesheet and a CSS ID is preceded with a Hash Symbol (#blabla)

#subnavbar {

  1. background: #0084CE;
  2. width: 960px;
  3. height: 24px;
  4. color: #55B4E7;
  5. border-bottom: 1px solid #EEE;
  6. margin: 0;
  7. padding: 0;

}

 

You can see we are provided with 7 different properties. We can change the background color of the menu, we can adjust its width and height, font color, border and alignment using margin and padding. To edit any property just double click and change it. Lets change the background to green:

Chrome Css stylesheet

I simply double clicked the background property and changed the color to #289728 from #0084ce. At the same time you can see it changing live on your blog too. See the screen shot below,

Chrome Developer settings

See its all fun! Lets now change all other properties and see how it looks on the blog.

You can also click the black arrow next to div section to expand the sub properties for list style and links. See below,

Chrome Developer settings

Clicking on the ul tag will open its separate CSS properties on your right and clicking the li tag will open the list properties. You can then play around with the codes to see how the look changes on the blog and all these changes can be seen live on your blog as you edit without the need to log into your blog. Once your satisfied with the new settings just copy that CSS style and replace your current template style with it by logging into your blogger account.

The menu below was created using Chrome,

menu designed using Chrome

Need help?

Remember that you can only edit the existing styles. You can not introduce any new property using Chrome. For example if I wish to add box shadow effect to the menu then I can't use Chrome because the box-shadow property doesn't exist in the styles. Chrome can be used for adding final touches to your design after you have coded it. Do let me know how you find this new tutorial. Play around with your blog with more confident now. Hope you find this little info helpful. Forgive me for late replies because I can hardly blog these days. Peace and blessings buddies. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

20 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. LolZ Again i m late hahahahha
    i was also planning to write on it
    I also use the same trick
    This is awesome
    I also designed my template with this Chrome Trick ...........

    ReplyDelete
  2. hmmm... I'm using Firebug + Chrome inspect element + DW for design my WP and Blogger themes
    this is my new under construction blog design http://www.LibertyBloggers.com

    ReplyDelete
  3. Great tutorial chrome is one of the best browser I use everything because its easy to use and also a east browser of other browser. Thanks for sharing this awesome tutorial.

    ReplyDelete
  4. same things we can do with firefox firebug addon...

    ReplyDelete
  5. Hope this trick will help for adjusting / modifying an existing template but not to create a template from scratch i guess.

    ReplyDelete
  6. I just use Firefox but i still loving G.C ^^

    ReplyDelete
  7. Assalamualikum ahmed bhai, thank you for this post. i want to ask you some questions ahmed bhai. 1) At top in your post how do you put that dotted lines. 2) I have put a banner code after data. post.body in my blogger html. but the problem is the banner is showing after readmore button. i havent clicked readmore and the full post is not showing but the banner at the end is showing.i want the banner after the end of the post not at the half of the post. please help me ahmed bhai with these 2 questions. Allah Hafiz

    ReplyDelete
  8. @haider
    You better react quick then. See you are late again. :)

    @liberty
    That makes perfect combination and is recommended for advance use.

    @varindar
    I am glad you find the tut playful pal. Welcomed. :>


    @Rehanna
    Exactly you can only edit your existing design. This is what I mentioned in the post. No CSS can be introduced, use this method for final touches.

    @vanlin @Faiz
    Welcomed pals. :>

    ReplyDelete
  9. Chrome Is One Of The Best Browser
    Great Article, THANKS Muhammad ...
    MAKE DOLLARS ONLINE

    ReplyDelete
  10. I am using Firefox + Firebug to design blogger templates and widgets. i have installed chrome and other browsers too to check the compatibility of my templates but at the end i love Firefox. so many useful extensions for developer. I also recommend using Firefox's Web developer tools, i think you will forget about chrome.Blogger Templates.

    ReplyDelete
  11. Nice tips, what do feel about my blog http://www.efiweblog.info/

    ReplyDelete
  12. i use Mozilla firefox 11 it is awesome.

    ReplyDelete
  13. A great website with interesting and unique material what else would you need.
    Web Development

    ReplyDelete
  14. Neat tutorial and great insight, I have actually tried the inspect element but didn't know how to go about it click away as soon as i could. I also used firebug inspector but because i was not knowing anything about it i didn't know what and what to do. But with this tutorial I have known the use of it and how to use design my blog template. thanks

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete