MONOP TEMPLATE

Follow @Sederhana_Blog

Releasing The Priceless "MONOP TEMPLATE"

UPDATE: All templates and resources can be download for free without waiting from our download page

Whether it is EID, Christmas, New Year or Summer Vocations, I have always tried to gift my loyal friends and readers with the best resources possible. Since 60% of you requested a two Column Blogger Template, I therefore kept the word and designed a highly MONetized and  OPtimized template. Joining the starting few letters of both these words will coin up MONOP and that's how it took its name! This template can become the best turning point of your blogging careers and revenue. My main focus this time was to code it as search engine friendly as possible so that search engine spiders may love to crawl it and advertisers may love to buy an Ad spot on it.

The navigation menu is specially designed for high CTR AdSense earning by providing a beautiful section to 728 by 15 AD Link unit. I wont keep your awaiting any further, please see the Demo below,

Live Demo

What are the new Features?

As usual keeping alive the "Be Unique motto" following are the new features:

1. The Template is coded using familiar Blogger CSS classes and HTML Tags using the minima template as the structure.
2. It is compatible with all browsers including IE
3. It is highly Optimized making it smoother for search engines to crawl your content
4. It is highly monetized keeping High Click Through rate and Advertisers Likes and dislikes in mind. A 468 by 60 Banner next to Header and Adsense Link unit above navigation are the best Ad placements of this theme.
5. It is equipped with all widgets that any blogger would wish for. May that be the beautiful Drop Down Menu, Split Header, Multi Tabs widget, Three Colum Footer, Customized Comment Form, Customized Author Comments, Flapper Social ShareWidget, Related Posts, Reply link, Read More Link, Newer Older Home Links, comment count, WordPress style RSS Form etc. etc. etc.....
6. The header title uses Google Fonts so you don't need Photoshop any more to create a nice logo.
7. All tutorials published on this blog or anywhere else, can easily be applied to it without getting any error

Customization

Below are some simple important changes that you must make:
Navigation:

To change the navigation menu links find and edit this code,

<div id='subnavbar'>
      <ul id='subnav'>
        <li>
          <a expr:href='data:blog.homepageUrl'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
        </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXsrQlWouBZuMDHiRc4KpNlN8JV85wIuPmB7-7rjeJ0ThzyHbwkofqIhys3NHJV9YO2Ih1x2l19jAdWIQ8-hJ7W2DsPqP41kjiPyM_mrgnnT9eqx-0LAjoVlK-2rPXSDizOFDJjtehlE/s400/arrow-down.png'/></a>
             <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>
  <li>
          <a href='#'>Download This Theme</a>
        </li>
      </ul>     </div> 

Replaced the bolded black texts with your link titles and the # sign with link URLs

You can also add more menu tabs by adding this code as many times as you want just above</ul>

<li><a href='#'>Title</a></li>

If you wish to add a drop down menu to any tab then simply add the code below before the </li> tag of any tab (for example see carefully how I added it to the Sitemap tab),

<ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>

AdSense: 

This part is the most important reason behind designing this template. I will discuss its customization and integration method on my coming post because I want to explain it in detail.

Multi Tab:

To change the titles of tabs simply find them in your template and replace them with whatever title you like. For more details on this read the Menu Tabs tutorial

RSS Form:

To add the rss form paste the code below inside a HTML/Javascript widget,

<style>
    .mbtbar{width: 100%; float: left; padding:0; margin:0;}
    .mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: none;  line-height: 35px; vertical-align: middle; width: 300px; padding: 0 10px 0 4px;}
    .mbtbar .count span.bigcount{color:#BF0100; font-size: 24px; font-family: Helvetica, Arial; line-height: 35px; vertical-align: top; padding-right:3px;}
    .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
    .mbtbar .subicons a{text-decoration: none; color:#333333;}
    .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
    .mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVHpi17UUOsbT7NARzfd6IFQh_NVZFvqCBUgqoCZOJhPLbeBS9I5U_MnQub06pAcoPW7iHkq-HwGCVADWeUtk5Fy-nzKTb6LY4Jr2EoKFauCf_I92j8xOjRdp74j0jDtD6J_S65yUI18/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
    .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oAQkC9j6xHamKA6DygoUa7ZFbrHr9o4Oqtw0apFRfXxvciZbzP1T2kuJhvrxQBlr9wR5vC3L7FEOxNkda9uhPtJXeVE8lWiU-urqMQQ7goCe2bODzwxaA-MF6jQSEL7addZTGptOiSA/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
    .mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErAcueM154iZXqD58tnTexOwhqmH1RSanbCCjqo7mZvk9cT81T0zBdmbaLYH8s-kmvyE8t-NW42_jIbJ3A9qBVKulL_p9Als-iEvTyophjJ2jv2Q7obl23OP0iXZu5DTJ0t7m09E5jn0/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
    .mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
    .mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9IO1apl5ZZGXk7CpWUOfbKSTuCgKMImM54Ydgdlp5U8ruXNDf0x5zfBLWOaNpFwng1LMnZ7vZwFayCIFXq4Pv7Hac4ESFwyQYWfWi95_K7X_UqrSHRzrkWP5cRMR_L2hiasfyvmltRlY/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
    .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
    .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
    .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#bf0100 0%,#ac0100 100%); background:-webkit-gradient(linear,left top,left bottom,from(#bf0100),to(#ac0100)); border: 1px solid #ac0100; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

    </style>
    <!--[if IE 7]>
    <style>
    .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
    .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#AC0100; border: 1px solid #AC0100; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
    </style>
    <![endif]-->
    <div class="mbtbar"><div class="count">Join <span class="bigcount">1807+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.mybloggertricks.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/mybloggertricks" target="_blank" rel="nofollow">Twitter</a></div></div>
    <div class="emailsub">
    <div class="emailicon">Stay Updated via Email Newsletter</div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

To customize the above code with your twitter, facebook and Feed links then read this tutorial: Create RSS Form

Please Share it! :)

Kindly Bookmark this Post using your favorite Bookmarking service: