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.

• Backup Blogger widgets
• Video tutorial to backup blogger widgets

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.

[html]
<div id="subscribe">
<a href="http://feeds.feedburner.com/smashingtips"><img src="http://feeds.feedburner.com/~fc/smashingtips?bg=99CCFF&amp;fg=444444&amp;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>

[/html]

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.

[css]
.comment-author a {
font : 16px arial;
color : #a10000;
margin-top : 10px;
font-weight : bold;
text-decoration : none;
margin-bottom : 10px;
margin-left : 5px;
}
[/css]

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.

[html]
<SCRIPT type=’text/javascript’> var thumbnail_mode = &quot;float&quot;; summary_noimg = 500; summary_img = 250; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src=’http://smashingtips.com/wp-content/uploads/2012/06/readmore.js’ type=’text/javascript’/>
[/html]

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.

[html]
<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>
[/html]

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.