Remove Blogger Gears & Customize your Mobile Version | CutieCoding

Estimated Reading Time:
As someone who loves Blogger's dynamic views templates, it isn't easy to find good resources to help customize it to my heart's content. Why, you ask? Because, often, a cool customization that should work on all Blogger templates categorically doesn't work on dynamic views. Pout.

Having said that, I am so excited that this change works on dynamic views templates as well as the other static templates.

It started with this article by the Blogger Developers that talks about custom mobile templates. To the bottom of the article is where I found my nug. It talks about changing the HTML of your blogger template so that it recognizes when it is being viewed on mobile versus on a desktop screen. Of course, once it is able to figure out the difference, we can then apply a different set of CSS rules to when your blog is viewed on mobile than when it's viewed elsewhere.

In this edition of CutieCoding, I'm going to paraphrase and rewrite the instructions they have so that it's easier to follow. And then, show you how to remove those blogger gears that appear when your blog loads. Now, something interesting to note is that if you don't provide a separate CSS rule for the mobile blogger gears to be removed, it doesn't automatically take on the "universal" or desktop CSS code that you would otherwise provide. *In case you're wondering what trip I was on for using a picture of a London telephone booth in a CSS article? Weeellll, it's a phone...that is a template of sorts...and it's sort of mobile? Get it? Aaaah, you had to be there.

REMOVE BLOGGER GEARS & CUSTOMIZE YOUR MOBILE TEMPLATE
The TL;DR Version
  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. 
  3. Go to ‘Template’ and click the button ‘Backup / Restore’ on the top-right corner of the page. Follow the instructions to download a copy of your blog template. This is just a safety measure. 
  4. Now, back on the ‘Template’ page, click on ‘Edit HTML’ under the ‘Live on Blog’ frame.
  5. Click anywhere on the box with the HTML code and then, press Ctrl + F (for Windows) or Command + F (for Mac) on your keyboard.
  6. Type in <body (including the less-than sign) in the search bar that appears and press Enter. Only one entry should show up. 
  7. Change it from <body> to <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  8. Click on ‘Save Template’ and you should be back on the Template page. Again. 
  9. Now, click on the ‘Customize’ button under the ‘Live on Blog’ frame.
  10. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
  11. Paste the code below at the end of any other CSS code you might have there.
  12. Press ‘Apply to Blog’.
  13. Whodunnit? Youdunnit!

/* REMOVING THE BLOGGER GEARS ON PAGE LOAD */
.blogger-gear, .mobile .blogger-gear {
  display: none;
}




The Lengthy Version
This time, I don't got anything longer than what the introduction doesn't cover. So... Ray out! Peace!




Image credit for the telephone booth pic: *sooz*


Comments

Popular Posts