Blogger, Blogger Templates

Grunge Mag Reloaded Blogger Template

1 127

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.

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='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.

About the author / 

Related Posts

1 Comment

  1. timkeck June 6, 2012 at 9:30 pm - 

    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.

Popular

Editor’s Pick

  • Maximizing Performance with useLayoutEffect React Hook

    Discover how to optimize your React apps with our comprehensive guide on ‘Maximizing Performance with useLayoutEffect React Hook’. Learn how to leverage this powerful hook for efficient DOM manipulation, eliminating visual glitches, and creating smoother transitions. Ideal for both novice and expert React developers.

  • Mastering the Art of Newborn Sleep: Proven Tips for Better Sleep in the First Week

    Congratulations on your new arrival! As a new parent, you’ll quickly realize that one of the biggest challenges of caring for your newborn is ensuring they get enough sleep. In their first week of life, newborns typically sleep for 16-17 hours a day, but it can be difficult to establish a sleep routine that works…

  • 20+ Cool Terminal Commands to have fun with Ubuntu

    Users of command line interface always look out for something new to work with which makes them get excited. You might have seen some ASCII arts being used in info files of software and wondering how they did it. Well here we have added a collection of commands with which you can enjoy and have…

  • 40+ best online coloring tools for graphic designers

    If you are a web designer or dealing with some graphic design project then you will need some coloring tools for getting color hints from ready made color templates from professional designers. There are lots of Online color tools, but it will take time to search them all via Google. So i have tried to…

  • React Hooks Best Practices: How to Write Better and Cleaner Code

    React Hooks are a new addition to the React library that allow developers to use state and other React features without writing classes. Hooks provide a simpler and more flexible way to write React components, making code easier to understand and maintain. By following React Hooks Best Practices, you can improve the quality and maintainability…