MONOP Blogger Template

Free MONOP blogger template is nice template style blogger for personal blog with beautiful design. It's a 2 column blogger template with right sidebar, 3 column footer,  pagination for blogger ready, ads ready, dropdown menu, clean design template, and more. This template designed for personal blog blog with daily updates posts.


What are the new Features?

  • As usual keeping alive the "Be Unique motto" following are the new features: 
  • The Template is coded using familiar Blogger CSS classes and HTML Tags using the minima template as the structure.
  • It is compatible with all browsers including IE
  • It is highly Optimized making it smoother for search engines to crawl your content
  • 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.
  • 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 Share Widget, Related Posts, Reply link, Read More Link, Newer Older Home Links, comment count, WordPress style RSS Form etc. etc. etc.....
  • The header title uses Google Fonts so you don't need Photoshop any more to create a nice logo.
  • 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:


drop down menu

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='http://1.bp.blogspot.com/-XNaxBUcw4I8/TgPihF-_wlI/AAAAAAAAD8A/Qw4kloU7oOQ/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(http://2.bp.blogspot.com/-39kJ8qyqrVs/TdpYPqKjAhI/AAAAAAAADf8/FDkLDuCwF7E/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(http://4.bp.blogspot.com/-6_H2QDYGHpI/TdpYPF7LYmI/AAAAAAAADf0/wBev_aveLGw/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(http://3.bp.blogspot.com/-rbsZjAPUA2c/TdpYQO7m2zI/AAAAAAAADgE/VLRVbnICkZA/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(http://2.bp.blogspot.com/-h72a-fyDTWw/TdpYO0gOhRI/AAAAAAAADfs/s-5_Ckdp-bQ/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>
Thanks : http://www.mybloggertricks.com for design template.

0 Comment:

Posting Komentar