How I use Google Chrome To Design Blogger Templates?

Google Chrome has excellent capability of allowing you to see how your design looks by adjusting the settings live. You can redesign or edit...

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. :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,69,Blogging tips,198,Bugs and Errors,34,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,305,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
SEO and SEM Guide For Bloggers: How I use Google Chrome To Design Blogger Templates?
How I use Google Chrome To Design Blogger Templates?
http://lh5.ggpht.com/-Odi4n32qEts/TvjE183V2rI/AAAAAAAAFrk/--G4rA3AWJI/image%25255B127%25255D.png?imgmax=800
http://lh5.ggpht.com/-Odi4n32qEts/TvjE183V2rI/AAAAAAAAFrk/--G4rA3AWJI/s72-c/image%25255B127%25255D.png?imgmax=800
SEO and SEM Guide For Bloggers
https://www.experiencelab.info/2011/12/how-i-use-google-chrome-to-design.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/12/how-i-use-google-chrome-to-design.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy