Blogger, Blogger Templates

Grunge Mag Reloaded Blogger Template

1 108

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

  • 6 Reasons why Linux Servers are More Secure

    Although there are several servers available on different operating system platforms like windows, unix , etc. I feel that Linux Servers are more secure when compared to other competitors.There are several reasons why Linux servers are more secure than those running solely off of Windows. The importance behind this extra security is to help prevent…

  • 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…

  • 25 Useful Tools for Registering and Monitoring Domain Name

    Anything from a company to products, websites to blogs require a good name to have a good impression at the audience. Getting a good name for the site can be really difficult as most of the names are already taken by some one else. This case is especially prominent in the area of website’s domain…

  • 6 Handy Tips for Responsive Web Design

    Information Technology and Telecommunication have progressed at a rapid rate in the recent years. The development of smartphones, tablet PCs, notebooks and touch screen enabled android mobile devices in the last decade or so is a testament of how quickly technology has evolved. The invention of these multiple computing platforms has urged website developers to…

  • Ultimate Twitter Tools and resources

    Twitter, the micro-blogging platform that has taken the Internet by storm, has so much to offer the online entrepreneur or personal user, yet is misunderstood by many people. Twitter not only allows you to tell the world “what I am doing right now” via its web interface, but can also be integrated and enhanced by…