Blogger Template, Thesis Designer, From Hacktutors ~ Easy HTML Tricks for Blogging

355
Times Downloaded

I've converted it into blogger template based on the theme of ShoutMeloud.

Features of Thesis Template:

It has stylish 2 columns, one is post body and second one is sidebar, where you can put many widgets and Ads. In the bottom of this template, there is 3 rows as well.

This template consists of Read More hack with automatic thumbnail to make the template more professional.

Readers can easily comment on any post by clicking Add your comment button which consists on Home Page. Also, you can view, how many comments consists in each posts.

It has 2 navigation bar on the top of the template where you can add the main link to your blogs post or categories.

On the bottom of the template there is 3 rows where you can place option widgets like About Me, Categories and so on.

It has the most demanded Blogger hack i.e. Page navigation on the bottom of each page.

Customizations

Top Menu Configuration

To customize Top Menu, find the following code in your template and place your own links.

<div id='nav'>
<ul id='secnav'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://hacktutors.info/2009/08/contact-me.html'>Contact Us</a>
   <ul class='children'>
   </ul>
  </li>
  <li><a href='http://www.hacktutors.info/p/our-in-touched-bloggers.html'>Bloggers</a></li>
  <li><a href='http://hacktutors.info/p/link-to-us.html'>Link to Us</a></li>
  <li><a href='http://hacktutors.info/search/label/Download'>Download</a>
   <ul class='children'>
   <li><a href='#'>Drop</a></li>
   </ul>
  </li>
  <li><a href='http://www.hacktutors.info/search/label/Page%20Rank'>Rank</a></li>
  <li><a href='#'>Join HackTutors</a>
   <ul class='children'>
   <li><a href='#'>Advertise</a></li>
   </ul>
  </li>
</ul>

Adsense Search Customization

To customize the search form on the top right side of the template, find the following code and replace it with your own adsense search code.

<div id='google-search'>
  <form action='http://www.shoutmeloud.com/search' id='cse-search-box'>
   <div>
   <input name='cx' type='hidden' value='partner-pub-6601904697443775:73g5y9j0de1'/>
   <input name='cof' type='hidden' value='FORID:10'/>
   <input name='ie' type='hidden' value='ISO-8859-1'/>
   <input name='q' size='30' type='text'/>
   <input name='sa' type='submit' value=''/>
   </div>
  </form>
  <script src='http://www.google.com/cse/brand?form=cse-search-box&lang=en' type='text/javascript'/> </div>

Sub Navigation Bar

To customize sub navigation bar, search for the following code code and replace the link with your own.

<div id='categories'>
  <ul>
   <li><a href='http://hacktutors.info/search/label/Blogging'>Blogger tools</a> </li>
   <li><a href='http://www.hacktutors.info/search/label/Graphic'>Graphics</a>
   <ul class='children'>
   <li class='cat-item cat-item-149'><a href='#'>SEO</a> </li>
   </ul>
   </li>
   <li><a href='http://www.hacktutors.info/search/label/Web%20design'>Web Design</a>
   <ul class='children'>
   <li><a href='http://www.hacktutors.info/search/label/Social%20Media'>Social Media</a> </li>
   </ul>
   </li>
   <li><a href='http://www.hacktutors.info/search/label/Make%20money%20online'>Make Money Online</a> </li>
   <li><a href='http://www.hacktutors.info/search/label/Blogger%20Help'>Blogger Help</a> </li>
  </ul>
</div>

Header Logo and Banner

Search for the following code in your template to replace the logo. There is the 468X60px banner on the top right, you can customize that with your banner URL.

<div id='joelogo'>

<a href='http://www.hacktutors.info'><img class='logo' src='http://4.bp.blogspot.com/_b0xJ7qk6DTc/TGdrjNWW8cI/
AAAAAAAAA1Q/mZxvQIRDDO0/s1600/Thesislogo+copy.png'/></a>

<div id='joead2'>
<a href='http://www.hacktutors.info' target='_blank'><img border='0' src='http://3.bp.blogspot.com/_b0xJ7qk6DTc/TGdcVUncDfI/
AAAAAAAAA0o/T6te7Q6DjS8/s1600/Bigbanner.gif'/></a>
</div>
</div>

Placement of Google Ads below the Sub Navigation bar

You can get more ad clicks by placing the Google Ad Link Units below the sub navigation bar. To do like that, search for the following code and place your link unit code just below the following code.

<div id='joead3'>

Your ad code goes here.

</div>

Customizing Facebook Like Button

There is the small Facebook like button on the top right in each blog posts. To customize that, Search for the following code in your Template:

<div class='post-header-line-1'>

<div style='float:right;padding:4px;'>

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.hacktutors.info&layout=button_count&
show_faces=false&width=70&action=like&font=arial&
amp;colorscheme=light&height=21' style='border:none; overflow:hidden; width:70px; height:21px;'/>

</div>

Replace above red codes with the following:

(Code Updated)

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&
width=64&action=like&
font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:64px; height:40px;'/>

Now, you are ready to use this template! Enjoy the new Thesis Blogger Template. If you have any problem regarding this template, you are free to ask me. You can suggest me any thing that you are thinking to do new in this template.