How Firebug Helps You Design Your Blogger Blog

For most bloggers, the idea of adjusting the coding of their blog to improve the user experience is daunting at best and often quite frightening. HTML5, CSS, and other coding elements are their own virtual language and for the average Blogger user looking to update a personal blog, the automatic settings are about as good as it gets. What if there was a better way to code a blog, whether a beginner or a pro, that could be done within the browser itself?<br /><br />If you're using Firefox or Chrome, then you should also be using Firebug. It allows you to code your website in real time, so you can maximize the UX of your blog in no time at all.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo-Yg9onIE_wDA_GREn9_0dsBi9PpPFWrEyRrqvwVaej3JK4PYIWKBHvWB3aMm_xepbsZBBQENY4Cjc9ckrN8bwJF4MEl9A7Sz1BFNazLow0TphHalB5uuYXasAqCDpXUZXgNeCBAa3tls/s1600/firebug-blogger-customization-made-easy.png" width="320" /></div><br /><h3>You No Longer Need To Edit Through Blogger!</h3>If you've ever tried to update a Blogger theme through the editing functions of the website, then you know how difficult it can be. You can preview your designs, but you can't save any changes to officially see what is going to happen with your site until you publish the edits. If you've missed just one line of code or forgotten one small element, you're going to have to go back into the editing matrix, find the error, update it again, and repeat until you have a responsive blog once again.<br /><br />What Firebug allows you to do is see all of those elements that make up a website in real time. Instead of editing and then publishing, you can edit in real time and see updates happen, all without affecting the user experiences of visitors that are coming to your site while you're editing. You can change the fonts, colors, or virtually anything else within the design of the site quickly and see the results of your work as it happens. Don't like it? Just undo your changes.<br /><br />It's really that easy.<br /><br /><h2>Using Firebug to Customize CSS in Blogger</h2>This guide will show you how to modify the CSS code of a Blogger template. Usually, the Blogger Template CSS style declarations are editable through the style.css file, found between the <span style="background-color: yellow;"><b:skin></span> and <span style="background-color: yellow;"></b:skin></span> tags.<br /><br />To download Firebug and get more details regarding its powerful features, visit: <a href="https://getfirebug.com/" rel="nofollow" target="_blank">Firebug</a> for Firefox, or if you are using Chrome, get the <a href="https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench" rel="nofollow" target="_blank">Firebug Lite</a> app. I would recommend to use Firefox, which is more complete and quick, but, nevertheless, both work the same.<br /><br />Once Firebug is installed, a small bug icon will be available in the upper right of your Web browser's address bar. Clicking it, a horizontally split screen will be shown at the bottom of the browser's window. The page will continue to show in the upper half, while the lower half will show the HTML of the current web page.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="firebug" border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl-h-t5yau5iu34uypSUefBgjACyQMttIzbwzlYEv1-u4rmAKhrdWc-wE7CN7H01ioCZkCyrLyaHzxcYxxknTznCZteYpSqFCeYJ318ZVJY7poA6aoWH-Zgxgd_o3H_4aQuzjh4C_UW89B/s1600/inspect-blogger-element-with-firebug.png" title="How Firebug Helps You Design Your Blogger Blog 1" width="640" /></div><br />To customize any web element from a Blogger template, just click either on the Firebug icon in the toolbar, or the "Inspect Element with Firebug" item in the context menu. Next, click the blue cursor button to Inspect and place the cursor right over the element to customize.<br /><br />For example, let's say that we want to change the title of the "Blog Archive" gadget. After we clicked the inspect button, mouse over the "Blog Archive" title which will be highlighted as shown in the screenshot below. To change this element, click on it:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="inspect element using firebug" border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4Trn-_JlvQ1iGGPqhp40DjegY0tNUBv0PIbufUEHIVLogGMRFxZskQUPUr3vjHg-Dtq6eiT8p18h_M8PS0xfKZgvRRzNkdXrZ_z2HVhP6pMwVzevXhUNVbpJ271RygFmpu0Z9GxU6HCn/s1600/inspect-blogger-with-firebug.png" title="How Firebug Helps You Design Your Blogger Blog 2" width="640" /></div><br />Now that we decided which element we want to change, right click on the "Style" panel and select the "Add rule" option:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add CSS rule in firebug" border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdyn2haPT6aLbLRvCdpWw2rrNdgm7uncSZOgJnrR1Ppxh7bLkrUjuqI8Fglc_YnNXUizDu8Jt_NK26n2HysB91k_VlTHgLbYaKr-OiL_BkuDYmG65rfoEHjiuDlsOKZ7CyGEacA94ie8T/s1600/firebug-add-rule-blogger-archive-gadget.png" title="How Firebug Helps You Design Your Blogger Blog 3" width="640" /></div><br />This will give the class or the id of the highlighted element - in our case, the heading of the Blog Archive (#BlogArchive1 > h2). To edit this rule that we just added, click anywhere near the left curly bracket that will open a text box, so that we can type a new CSS declaration:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="firebug css declaration " border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFL2BQihAXzHZBm15zd1BEo2qYAUzNua2MPAlNRJrwtYr2cxl_TYgMLBeym0QkTxwr9ml4IJJbQ9JIlr9dgyN8NrmwqncWCT5UeldiXHf3oKpDa0diRLnWN0sHXOtyV0fapOaVa4KA7ujq/s1600/edit-blogger-template-using-firebug.png" title="How Firebug Helps You Design Your Blogger Blog 4" width="640" /></div><br />And here comes the fun part. Let's say that we want to make the title red. We will type <b>color</b> and hit Enter, then we will type the color value or the <b>red</b> text and hit Enter. We will also set the set the font size to 20px, text alignment to center (text-align: center) and make the text underlined (text-decoration: underline):<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="modify blogger css with firebug" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-rsSfxpoMJ8vAfLCGJVoM92cNB86quLuSbxBfeRAsrzWSOZxETc8m_t8C_aWw4LI1WIgpt5lD0jS1QTN7-9tfpSFprU7thGGancv0ZG_-zxGDWKxq215rDYNoIDyMlt9KZAUYD7yR4mHp/s1600/add-css-declarations-to-blogger-using-firebug.png" title="How Firebug Helps You Design Your Blogger Blog 5" width="640" /></div><br />The cool thing about Firebug is that when modifying any CSS property, you can see the results directly applied on the page. So, after adding these declarations, we'll see a big red underlined title for our Blog Archive gadget (see in the screenshot above).<br /><br />To apply this CSS rule on a Blogger template, just select it beginning from the right curly bracket and to the #(id) or .(class) symbol, then right click it and Copy the CSS code.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="copy firebug css rule" border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgikPMcXJKQO1xvwVxTJEm6b58vZLXBLmAPk0Ya1PuuMqYZ6jE2zH7yo7gT33dE6TKigwnVnuzxDWEuCzLbJhCAkkAcnWcp2TXVNFxES9THBHdrgx-XwtlWeWe9rbHcDYlcd_laUTHcjOmH/s1600/copy-css-rule-from-firebug.png" title="How Firebug Helps You Design Your Blogger Blog 6" width="640" /></div><br />Before making any change, it's highly recommended to make a backup of your current template. Go to "Template" and click the "Backup/Restore" button on the upper right side. On the same "Template" location, click on the "Customize" button and navigate to "Advanced" > "Add CSS". Paste the CSS rule that you just copied into the CSS box:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add firebug css to blogger template" border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAr2JpeG2_cic_-_JKkJ_bN3Ek7U4eSUj_qpAX6BrZIUhKQ4iWOhYZZObJ68Kbb30yp8QnSrFjXz27mOKBudZlQUGSXVQQ-xzEyw-anaYcV0WCIY9QORJ34Rkf7VKYgMT9amCKlS9MGaWv/s1600/blogger-template-add-css-rule.png" title="How Firebug Helps You Design Your Blogger Blog 7" width="640" /></div><br />Click the "Apply to blog" button on the upper right corner to save the changes and view your blog.<br /><br /><h3>Firebug Also Gives You One Distinct Advantage...</h3>One of the best reasons to install Firebug into Chrome or Firefox is that it allows you to emulate some of your favorite website designs quickly and easily. Instead of hiring a web designer to do the work, which could cost you thousands, you can simply start Firebug and see what the CSS styles are for your favorite site. This allows you to create a similar widget.<br /><br />From there, all you've got to do is change the coding to make the design elements work under the rules of your own custom.css. This means you can make easy design changes to your Blogger blog without having to go through all of the menus and editing functions so that your template can truly be your own. Do you have some work to do? Sure - but Firebug does all of the primary work for you.<br /><br />All you've got to do is have a creative mind and a few minutes to make changes to the coding design. Whether you've been coding for years or are just starting your first blog, this is definitely the best way to make sure that your visitors have the best experience possible!

How Firebug Helps You Design Your Blogger Blog

For most bloggers, the idea of adjusting the coding of their blog to improve the user experience is daunting at best and often quite frighte...

Read more »