As you can see , In smashing Tips I have one separate category for Blogger users. I will be showcasing all my unique Blogger hacks , Blogger widgets and Tips to customize Blogger templates here. And am an experienced Blogger template designer , so I thought of sharing at least one Blogger Template every week. As an initiative to this , I have converted one of the most used premium wordpress theme called ” Grunge Mag “.Grunge Mag wordpress theme is developed by elegant themes. It’s a professional wordpress theme , so in order to make it available for blogger I have made few changes to optimize the theme and make it look better.

Features of GRUNGEMAG blogger theme
- Opera compatible
- Netscape compatible
- Safari compatible
- Author comments new style
- Gravatar ready – Author
- Firefox compatible
- IE8 + IE7 + IE6 compatible
- Advertisement Ready
- Widget ready sidebars
- Automatic thumbnail creator
- Read More hack
- Page Navigation Widget
- Subscription box
- Favicon Included
- Comment form enabled
Theme installation instructions for Newbies
These are just a simple tutorial for newbie blogger users to upload custom blogger template.
Before uploading the theme , do look at the above tutorials to upload your new template without losing your current blogger widgets.
- Log in To Blogger dashboard and Click Layout link in dashboard panel.
- Now click in Edit HTML link in tab bar.
- Click Browse button and look for folder containing your custom blogger template
- Click Upload button and save
Customizing Blogger Template
Subscription Form
If you are looking to have the same subscription form as in the demo template, Then you need to add this code in any of HTML/Text widget/gadget.
<div id="subscribe"> <a href="http://feeds.feedburner.com/smashingtips"><img src="http://feeds.feedburner.com/~fc/smashingtips?bg=99CCFF&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" /></a><br stlye="clear:both;"/><br/> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=smashingtips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin-left: 85px;"><input value="" class="subscribeinput" name="email" type="text"/> <input type="hidden" value="smashingtips" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input src="http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png" class="subscribesubmit" type="image"/> </form></div>
Once you copy and paste this code into the HTML/Text gadget, search for the word “smashingtips” and replace it with your feedburner name.
Comment Author Style
I have used unique style to differentiate the author comments from the readers comment. You can change the text color and background by editing this css code in the template.
.comment-author a { font : 16px arial; color : #a10000; margin-top : 10px; font-weight : bold; text-decoration : none; margin-bottom : 10px; margin-left : 5px; }
Editing Thumbnail Size
You can see default thumbnail on each post in home and label pages. If you want to change the Thumbnail size, then edit this code.
<SCRIPT type='text/javascript'> var thumbnail_mode = "float"; summary_noimg = 500; summary_img = 250; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src='https://smashingtips.com/wp-content/uploads/2012/06/readmore.js' type='text/javascript'/>
Here you can find, img_thumb_height and img_thumb_width. Specify your height and width.
Inserting Adsense Codes
In the template, i have added adsense codes below the post title. To add Adsense code in your blog, search for the following text “Adsense Code” in your template with Expand blogger templates icon checked.
Then place your Adsense or other adnetwork codes in that place to show your ads.
Adding Link Menu below header
In the layout page, you can find a widget below the Blog title. Click edit button and place your links code there.
<ul> <li class="page_item"><a href="http://www.techieblogger.com">Home</a></li> <li class="page_item"><a href="Add your link">Title</a></li> </ul>
Add as many links you want in the widget.
Final Words
Hope I have covered almost all customization needed to make this template fit your needs. In case you need any other customization, feel free to ask in comments. I will guide you with the modifications.
Related Posts
-
October 29, 2012 -
-
June 8, 2012 Designing Blogger Template : Adding Meta Tags
-
June 7, 2012 Designing Blogger Template : SEO Optimized Title Tag
-
February 12, 2010 25 Useful Tools for Registering and Monitoring Domain Name
-
January 24, 2010 Page Navigation Menu Widget for Blogger
Popular
Editor’s Pick
-
January 15, 2010 16 useful Mac cheat Sheets
Cheat sheet is a concise set of notes used for quick reference. Cheat sheets will contain most of the shortcuts needed to program faster. And it is meant for newbie users who can’t remember the shortcuts or commands. In this article , I have collected some of the useful cheat sheets available for Mac OS….
-
August 17, 2012 How to install Applications using Terminal in Ubuntu?
Whenever we install a new operating system we would at first be puzzled at the strangeness of the new desktop environment. We don’t know what to do and what not to do. But when it comes to linux things get easy than a user can imagine and the problem that pops up can be rectified…
-
January 24, 2010 Page Navigation Menu Widget for Blogger
Yesterday I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing…
-
April 22, 2023 Mastering Webpack Module Federation: How to Solve Singleton Issues with Code Snippets.
Introduction Webpack Module Federation is a feature introduced in Webpack 5 that allows multiple projects to share code dynamically at runtime. This means that you can break up your application into smaller microfrontends and load them on demand. It’s important to solve singleton issues because when multiple instances of the same module are loaded, it…
-
April 28, 2023 React Lazy Loading and Suspense: Boost Performance & UX
Learn how to improve your React app’s performance and user experience by implementing lazy loading and suspense. Discover the benefits and best practices of using these features for faster page load times and smoother user interactions.
1 Comment
I was very pleased to uncover this great site.
I need to to thank you for your time due to this wonderful read!
! I definitely really liked every little bit of it and I have you saved to fav to look at new information on your site.