Tonzer Template Customization

SHARE:

Template:	Tonzer
Layout:	Three Columns
Size:	36.0 KB
Compatibility:	IE9+, All
License:

Demo      Download

Template Description:

I have already discussed in detail the important features for SEO, Social Media and Plugins. To read about why this template is so different please read the following article:
Please Note : Important 
Sorry for inconvenience :

There is a small error in this template.
when you are going to add Html/javascript element to sidebar you have to add This code overflow:hidden;
goto> edit template > edit html> Find by pressing Ctrl + F #content-wrapper {

#content-wrapper {
background: #fff;
margin: 20px auto;
/*(Aad code here)*/ 
position: inherit;
padding: 20px 10px 10px 10px;
width: 965px;
}

after adding save your template and goto layout add your html/javascript element. after adding your element to sidebar again come back to template and remove this overflow:hidden; code and save your template you have done.

this error comes only in sidebar we are working to solve this problem soon.

Easy Customization

Lets begin with important things that you would need to change the look of your template and edit important sections.

1. Subscription box

Copy and Paste The following code inside HTML/JavaScript widget for the subscribe box:

<style type="text/css">
#fb1{ text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghOHiENyNxdoUmaY9wUqxgUsYeNlVJChDljafoIZoPDih7QhQ7ULbxDS9KT8Mlw-BnCC2wDA5xa7MxYJfhYK8ZMFFjSgwrsySqW1a3u8xddLMTpoJvnrkWKXnER3ykDFBgZy1hgtuex_w/s1600/red+fb.png);background-repeat:no-repeat;
background-size:30px;
width:30px;
height:30px;
display:block;
}
#fb1:hover{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8pQ49aoFHpNadQfeH-nnzECfquMHIdq0RYsc8iQQI6ofhryWYxYQYvkBjOJ3Kiz0SffE25oHMo-fjyMJVo39DXFC56Gy-Z-nITxaEaMycs6Sxyc_cMYC9nL5y3ZV7VtBYdXD2x8M4jEz/s320/bw+fb.png);background-repeat:no-repeat;
background-size:29px;
width:30px;
height:29px;
display:block;
}
#tr1{
text-decoration:none;
background-image:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmocrchzcLbnrqcw-HI4TgOMn3qIWnTCYRbnjs24OjOQ-59xLwzabqbk-VE5ZLDlGXfsVqo0lDWB0JP3a-0TqCDqLHTYIxS-6Lu46Su7HL_il0vFykOvfbpCqypp6QJ6Rc7_EJ9NU1NI/s1600/red+tr.png);background-repeat:no-repeat;
background-size:30px;
width:30px;
height:29px;
display:block;
}
#tr1:hover{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTXHMH2XvEQNtHIBiFGCGk_j6FowfkHohUfOJ044258RsfcTlmwiSK0-8OAUKPnAWzJ5EK3NOYfOiNrSZ6flLabZYqjrQH3jrnSCIjeVUgyJqfyf8g5-vK8M7A_gs6ky3ezBNdD4q-Fa8j/s320/bw+tr.png);background-repeat:no-repeat;
background-size:29px;
width:30px;
height:29px;
display:block;
}
#gp1{
text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Qwn_lGaqxc1_ry8Ruj-PhCV-4oaRheVGlhr4v6r0GlPwv_tbuF22peKfey4ZsdgO76GVSF4BPXvJf01h-Gl3TdkmAGCqspnNghxBlzxrg26zN3jIlvGuRIfwLfep_jVWSSbICecuW3s/s1600/red+gp.png); background-repeat:no-repeat;
background-size:30px;
width:30px;
height:29px;
display:block;
}
#gp1:hover{
text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAkNoe1vgSl9QECgLeNsnGUhdWPQXh_zhqI8UvYj1vAJbxoyMysqyLoetMgebFDlnV7bMOS8onoMxIeOY6AQ9zypcePadAhr3OxH0F-mhgQJo_sfbPGfNYZVch3fNA2u4QuIYUBccEZo5/s1600/bw+gp.png);background-repeat:no-repeat;
background-size:29px;
width:30px;
height:29px;
display:block;
}
#pin1{ text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsYFagfXSIUxjhK90jOHZnLR8BlDOU7twuk4LMC4WW9VqpWrbTvmuEDGxMhLx_A_OsI0Urwe32Nsp30r6KdnCo0auHpECYQlET196FD3WFvwbO6BrH4yyT_Qn9yUnz6HlenpUCkSHqKu4/s1600/red+pin.png);background-repeat:no-repeat;
background-size:30px;
width:30px;
height:29px;
display:block;
}
#pin1:hover{
text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGkCbubTkNomb5j0UQkLnlzy5CE_A3baXQlNlWaMLsF02Uz31eqYb9Aswehc45P82CBsOjARbr2LF36LeK6BJpdt9wiCZ00cdC-10mrEVG4ijN_Y7IF5_mKWmB3x6HVIdOkEjz-XeYyhg2/s320/bw+pin.png);background-repeat:no-repeat;
background-size:29px;
width:30px;
height:29px;
display:block;
}
#yb1{
text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9dnp2ifjR54HDeyv-dPUn4rXJGB-FQ84cx1e9UZ08yaFXy98T9QQDxAzBGXknilXOh_eQ01wxIOKSWjhoZ9ayImUh3p49s5lXs3MCG8e4TXJArDcvBdW9Bgnlbr03gsoc8Sfh7UdNHuQ/s1600/red+yt.png); background-repeat:no-repeat;
background-size:30px;
width:30px;
height:29px;
display:block;
}
#yb1:hover{
text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2X5FeVM9vRwMaDhxSJsS9v2irTvz3yqFff7UrP43AsmQVboWwVfQkX-XYVzPL5wEf-W8oi4538kpZ_mTaz8X059WkX907_qCMTzz5qbTECwlrcCMOhvY2rls__oUyneOArKiO-OIVcVYE/s1600/bw+yt.png);background-repeat:no-repeat;
background-size:29px;
width:30px;
height:29px;
display:block;
}
#rss1{
text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1qqYKhlj8uGU0EjPMNm1yl3Vbt-0vSAi-m0pNNcXvHmBqtfD0b7KBEgiwN75ZZXmz7aFQkGAM1qio7ESJp2dsAsyVk6vQWNyF-r160NjGVp6DqwtsA4pYV4wBlzPXeU1-9Qvirg_dRNM/s1600/red+rss.png); background-repeat:no-repeat;
background-size:30px;
width:30px;
height:29px;
display:block;
}
#rss1:hover{
text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2DjLfpfeO401R7VoiIZxhOu_1Sm3Di0O1bH4I2kusrDhKUrekAM_xp13d1nygBVN3WRFXS-2fKhJVoyFSiBcmCyGLM803lPJR7YWsE_XkhUz5eV5yjiReFCe90LhcEtNsraSOeTjXauf9/s1600/bw+rss.png);background-repeat:no-repeat;
background-size:29px;
width:30px;
height:29px;
display:block;
}
/********** Superscription Box **********/
.subbox {
background: none repeat scroll 0% 0% rgb(255, 255, 255) !important;
border: 1px solid rgb(210, 210, 210);
padding: 0px 5px;
color: #EA3B02;
font-size: 12px;
height: 22px;
width: 190px;
border-radius: 5px 5px 5px 5px;
margin-right: 2x;
margin-top: 2px;}
.int_btn{
border: 1px solid #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#41464A), to(#292D30));
background: -webkit-linear-gradient(top, #EA3B02, #EA3B02);
background: -moz-linear-gradient(top, #EA3B02, #EA3B02);
background: -ms-linear-gradient(top, #EA3B02, #EA3B02);
background: -o-linear-gradient(top, #EA3B02, #EA3B02);
background-color: #900000;
box-shadow: inset 0px 0px 0px #404040;
-webkit-box-shadow: inset 0px 0px 0px #cccccc;
-moz-box-shadow: inset 0px 0px 0px #cccccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-shadow: #2E2C2C 1px 1px 0px;
height: 25px;
width: auto;
color: #FFFFFF;
font-size: 12px;
font-family: Arial;
text-decoration: none;
font-weight: bold;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
cursor: pointer;
}
.int_btn:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#292D30), to(#41464A));
background: -webkit-linear-gradient(top, #292D30, #41464A);
background: -moz-linear-gradient(top, #292D30, #41464A);
background: -ms-linear-gradient(top, #292D30, #41464A);
background: -o-linear-gradient(top, #292D30, #41464A);
background-color: #292D30;
box-shadow: 0px 0px 6px 0px #FFFFFF;
-webkit-box-shadow: 0px 0px 5px 0px #FFFFFF;
-moz-box-shadow: 0px 0px 5px 0px #FFFFFF;
border: 1px solid #ffffff;
color: #ffffff;
}
</style>

/********** Html Editing **********/
<table width="100%"><tr><td>
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkKGt5H_TEeHBEjU46ed4Yx09YX7msDGBgOyRegH4wdXRD7p0MDyrUuLdfJIP3Hp2VmROGuEG1VrCaewexkWTsec76u0QtweQYR5IfT4Gty4wU5HcYsL_BqBcydgek7JoPxwma9Twb7Go/s262/button_subscribe.gif" / width="70%" height="35" /></center>
<div="class">
<center>
<b>Get Latest Tricks Alert Daily</b>
<table border="0"><tbody><tr></tr><tr><td>
<a href="http://www.facebook.com/pages/mybloggertrick" target="_blank" rel="nofollow" title="Be a Fan On Facebook" id="fb1"></a>
</td><td>
<a href="http://www.twitter.com/mybloggertrick" target="_blank" rel="nofollow" title="Follow On Twitter" id="tr1"></a>
</td><td>
<a href="https://plus.google.com/109735993868973606818" rel="publisher" target="_blank" title="Join to Circle" id="gp1"></a>
</td><td>
<a href="http://pinterest.com/mybloggertrick" rel="nofollow" target="_blank" title="Follow on Pintrest" id="pin1"></a>
</td><td>
<a href="http://www.youtube.com/mmktricks" target="_blank" rel="nofollow" title="Subscribe on Youtube" id="yb1"></a>
</td><td>
<a href="http://feeds.feedburner.com/Blogspot/qlGrR" target="_blank" title="Subscribe Via RSS" rel="nofollow" id="rss1"></a>
</td><td>
</td><td>
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/mybloggertrick/ffffff/EA3B02"></script>
<a href="http://feeds.feedburner.com/Blogspot/qlGrR"target="_blank" rel="nofollow"><img src="http://feeds.feedburner.com/%7Efc/blogspot/qlGrR?

bg=EA3B02&amp;fg=ffffff&amp;anim=1" style="border:0; padding-top:2px" alt="Follow Readers" height="26" width="88" /></a>
</td></tr></tbody></table>
</center>
<div align="center">
<div style="border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;"></div>
<center>
<p>Get Tricks Updates Straight in your Inbox
    <br/>by submitting your Email ID below.</p>
<form style="padding-top:2px;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qlgrr',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input onfocus="if (this.value == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" value="Enter your email address..." class="subbox" name="email" style="width:160px;" type="text" />
<input value="Blogspot/qlGrR" name="uri" type="hidden" /><input name="loc" value="en_US" type="hidden" />
<input type="submit" value="Subscribe Now" class="int_btn" />
     </form>
</center>
</div></div="class">
</td></tr></table><table></table>

• Replace Blogspot/qlGrR with your Feedburner title
• Replace the bolded sections with your twitter and Google+ username details

Note: There is also an Email icon in the sharing widget that appears at the bottom of post. To replace its link with your feedburner Email Subscription link kindly find and replace this: (You will find this link inside your template)

http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qlgrr

2. Top Menu

These tabs can easily be adjusted in two ways. 1. either from layout section  2. or from Pages window.
To drag, add, delete or update the tabs, simply go to Blogger > Pages
From here you can add, delete pages and you can also drag the tabs to shift their locations.

3. Main Menu

To edit links simply search for the following code inside your template:

<div id='tonmenu'>

Just below it you will see a list of li tags where you can insert URL and title for your tabs. To create a sub menu transform your code in the following way:
From this:

<li><a href='TAB URL'>TAB TITLE</a></li>

To this:

<li><a href='TAB URL'>TAB TITLE</a>
<span class='sf-sub-indicator'/>
<ul class='sub-menu' style='display: none; visibility: hidden;'>
    <li><a href='Subpage url'>Subpage 1</a></li>
    <li><a href='Subpage url'>Subpage 2</a></li>
    <li><a href='Subpage url'>Subpage 3</a></li>
    <li><a href='Subpage url'>Subpage 4</a></li>
   
</ul>
</li>

I added Jquery easing effect and transition on mouse hover along with smooth drop down effect. All these effects would work only if you add the yellow highlighted codes.

4. Footer Menu

To edit the menu at the bottom, simply find this code inside your template:

<ul id='footer-navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Contact Us.</a></li>
</ul>

Now editing the links would of course be a piece of cake for you all.

5. Blogger Notification Bar

To update the announcement text inside the sticky top bar, find this code:

<body>

You will then see the following code jst below the bode tag:

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'>
Download this Blogger Template by  <a class='link' href='http://www.mybloggertrick.com' target='_blank'>Clicking Here!</a>
<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>

You may replace the bolded text with any message you wish to display to your readers.

6. Author Image

To replace the author image appearing just below post title and also at the bottom of post. Please find and replace the following image link with yours.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ri1nq4dNjTreZnn1KOoGFI33zK5RXyYHbQRgy_mS180HjjJdM2fjMNngtUmJWzBfDzTNmW8GRca0a273Xo0douaBZ4BtSDR719tsam4o5bKeAtBYLzk8USSSRcEgsxl0FImqZB2vDoDC/s1600/site-logo.png

Note: Your image can be of any size but make sure it is at most 30 X 30 in size.

7. Author Info

To edit the title and author description kindly find this code:

<div id='about-author'>

You can then edit the details below it.

8. Archive Calendar

To add the archive widget kindly add an archive widget like your normally do from the layout section and then give it the following settings:

9. Multi Tabs

You can add widgets to the multi tab easily from the layout section but you will manually need to edit its titles from the template section. After you have added your widgets kindly edit their titles by finding this code:

<ul class='MMK-tabs MMK-tabs-widget-MMK-id'>
<li><a href='#widget-MMK-id1'>About Me</a></li>
<li><a href='#widget-MMK-id2'>Video</a></li>
<li><a href='#widget-MMK-id3'>Recent Comments</a></li>
</ul>

You may now set these titles to your preferred widget titles.

SHARE: