Grunge Mag Blogger Template

After a long gap, I have converted one of the most used requested 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.

Grunge Mag Blogger Template

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&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>

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 = &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'/>

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.smashingtips.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.




- has written 4 posts on Techie Blogger

Mohamed Rias is former owner of techieblogger.com. Rias is a freelance writer on web design , SEO , blogger and graphics.

If you like this article , then please help us by bookmarking

No comments yet... Be the first to leave a reply!

Leave a Reply

You must be logged in to post a comment.