Blogger Template | Night Martini

Night Martini is three column blogger template, with an fixed width design.Just very simple to install and with very low loading time with which your visitors have not to wait to get it load,as like other templates with many images.It has small post width section better for those who don't love to write much about in there post.Just love only blogging about small bit of useful information to share with the readers and especially if you blogging about the hard drinks or soft drinks.

FEATURES:
- Gravatar ready
- 3 columns, left sidebar
- Tested in major browsers (i.e. Firefox, Internet Explorer 7, Safari, Opera, Chrome)

Other blogger templates you may like is Green Day and Maalaga.Don't forget to check them for sure.

Blogger Template | Blue Paperlicious

Blue Paperlicious is another two column minima style blogger template, with an fixed width design.Just very simple to install and with very low loading time with which your visitors have not to wait to get it load,as like other templates with many images.Rss widget button ready at top,and the template is installed with three column footer in it and a beautiful post footer showing author and labels.The best part about template is, its simplicity and clean,will love it.You can see some features below.

FEATURES:
- Built-in RSS button
- Widget Ready
- Gravatar ready
- 2 columns, right sidebar
- Tested in major browsers (i.e. Firefox, Internet Explorer 7, Safari, Opera, Chrome)

Other blogger templates you may like is Potrika and Newzmag.Don't forget to check them for sure.

Blogger Template | Business Time

Business Time is a 2 column minima style blogger template, with an fixed width design.Template is very good for business websites niche and looks very beautiful.Some features included in it are seo hack and calender hack and a beautiful sidebar header.The most important thing i have made in this is easy customization of colors unlike other templates, as you can customize all colors your self with blogger tool of fonts and colors.

Other blogger templates you may like is Portfolio Press and The Latest.Don't forget to check them for sure.

Business Template Installation

• Timestamp Format


Just Go To Blogger Layout > Settings > Formating > Timestamp Format and just select the format as shown in picture below and save it.

Blogger Template | Elegant

Elegant is a 2 column minima style blogger template, with an fixed width design.Template is loaded with menu links at the top and gifted with very high quality images.Just what you have to do is small customization in menu links and rest it is very easy to use design.Just download xml file and upload to your blogger.Compatible with all browsers and working with full blogger functionality.Please don't remove credits to it a its our right.

If you want more better templates then check for sure Green Day and Newzmag as both are premium templates given by me for free.

Elegant Template Installation

• Top Menu Links

Just find the below codes and edit the links and text in it.



<div class='Menu'>
<ul>
<li><a class='on' href='/'><span>Home</span></a></li>
<li class='page_item page-item-2'><a href='#' title='About'><span>About</span></a></li>
<li class='page_item page-item-9'><a href='#' title='Page 1'><span>Page 1</span></a></li>
<li class='page_item page-item-10'><a href='#' title='Page 2'><span>Page 2</span></a></li>
</ul>
</div>

Just replace # with links and text with your linking text.

Blogger Template | Green Day

Green Day is a 2 column template, with an fixed width design.Template is loaded with menu links at the top and gifted with very high quality images.It looks like an premium one with many more features like to have welcome message at top of sidebar and also an search and rss widget ready with it.Just what you have to do is small customization in menu links and change one timstamp format which you will find in settings below.Ad ts good for those who love to use green color as its full of green.

If you want more better templates then check for sure Irresistible and Bueno as both are premium templates given of free from woothemes.

Green Day Template Installation

• Timestamp Format


Just Go To Blogger Layout > Settings > Formating > Timestamp Format and just select the format as shown in picture below and save it.




• Top Menu Links

Just find the below codes and edit the links and text in it.



<div id='nav'>
<ul>
<li><a Title='Home' href='/'>Home</a></li>
<li><a href='#' title='About'>About</a></li>
<li><a href='#'>Posts RSS</a></li>
<li><a href='mailto:#' title='Contact'>Contact</a></li>
</ul>
</div>




• Welcome Text


Just find below codes



<div id='welcome'><p><!-- replace the content with your welcome text -->
Write all your content here.</p></div>



Just replace red text with your welcome message.

Blogger Template | Maalaga

Maalaga is a 2 column template, with an beautiful menu links.Template is loaded with Social Bookmarks button at the top and gifted with very high quality images.It looks like an premium one with many more features like to have show your featured post too at top of post conent and with lots of advertisement option at the top of post and in the sidebar too.Search box is also installed in sidebar.Just what you have to do is small customization in menu links and change header image with yours and description.

If you want more better templates then check for sure Irresistible and Bueno as both are premium templates given of free from woothemes.

Features Of Maalaga Blogger Template

• Fixed Width Template


• Two Column Blogger Template


• Right Sidebar


• Rss Button Ready


• Twitter Ready Widget


• Compatible With Mozilla, Chrome and IE7


• Top Menu Links


• Beautiful Comment System


• 125 x 125 adds Widget


• Have Featured Post


• Search Box Ready

Hacks Supported By Template

• Swap Title Hack For Blogger


• Hidden Navbar Layout


• Blogger Avatars Activated


• Menu Links


• Search Box Ready


• Beautiful Bookmarking icons

Maalaga Template Installation

• Header Image And Description


Just find below codes and change the image link with your header and description with your blogs description.



Find :-

div#sitename h1 { background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCUq7-hD_Mjb3pjHXm8Cj6XQ0QKls3H_mUD_lrIRcScQM9tpCXaF7GBQNmBr7Py6Qk-fAJfgNS5hzgoKYZBzCnUHmDPrOX3mFN7S1EvfPgtlZyaTxBnxdpMx9BFaagWxm2kefA-9R9BDI/s1600/sitename.png') top no-repeat; }

Change the background image with yours.

Find :-

<div id='sitename'>
<h1><a href='/'>Maalaga Blogger Template</a></h1>
<p>Just another Blogger Template</p>
</div>

Change the title and description with yours.








• Top Menu Links


Just find the below codes and edit the links and text in it.



<div id='navmenu'>
<div id='navmenu-wrapper'>
<ul>
<li class='current_page_item'><a href='/'><span><span>Home</span></span></a></li>
<li class='page_item page-item-13'><span><a href='#' title='About'><span><span>About</span></span></a></span></li>
<li class='page_item page-item-18'><span><a href='#' title='Child Page'><span><span>Child Page</span></span></a></span></li>
</ul>
</div>
</div>



Replace # with links and bold ones with linking text.


• Second Menu Links



<div id='category-wrapper'>
<div id='category'>
<ul>
<li class='cat-item cat-item-3'><span><a href='#' title='View all posts filed under Entertainment'>Entertainment</a></span></li>
<li class='cat-item cat-item-4'><span><a href='#' title='View all posts filed under Featured'>Featured</a></span></li>
<li class='cat-item cat-item-5'><span><a href='#' title='View all posts filed under Internet'>Internet</a></span></li>
<li class='cat-item cat-item-6'><span><a href='#' title='View all posts filed under Music'>Music</a></span></li>
<li class='cat-item cat-item-7'><span><a href='#' title='View all posts filed under Travel'>Travel</a></span></li>
<li class='cat-item cat-item-8'><span><a href='#' title='View all posts filed under WordPress'>WordPress</a></span></li>
</ul>
</div>
</div>



Just find below codes and edit the links to your and also the linking text all in red.




• Featured Post


Find the following codes :-



<div id='featured'>
<div id='featured-wrapper'>
<div class='interior'>
<h2><a href='#' rel='bookmark' title='Permanent Link to Beautiful House'>Featured Post</a></h2>
<img alt='' class='header' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWIA_jCW5m4ty2oPPEVW3wslKSwkcDfbN8ifzCIRMPJAxrLnjt0pB_f7afiDTToehD_jTBHQqJR9BrfrGtb053VBB97RQehMcx5cfYyom_ncEHCx8xDUmjpaztXdhJ_POW8EEwGOaf-to2/s800/new_tive.jpg&amp;w=562&amp;h=191&amp;zc=1'/>
<p>Thank you for sharing 2008 with us. May we have another great new year ahead. Abundant blessings &amp;...<a href='#'/></p>
</div>
</div>
</div>



Just replace bold text with post title and red link with image link and text in italics with post summary and # with post link.


• Social Bookmarking Icons


Just find below codes and change all the username links written in italics to yours.



<div id='socialbookmark'>
<div id='socialbookmark-wrapper'>
<ul>
<li>
<a href='/feeds/posts/default'>
<img alt='RSS Link' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRcGbUgvCUsVo_XjaDNfAwnzhlHrv2BgVsQ9VMkh4YCKXsOrFZsOpap7h9FYlOM4nim5kBLZjpQ0oe43ko0j-Ce-dz81h7I_iHWjMnwMUxa-1JjMVns7zh4WPO4a4YQIfQoXFz794gknTE/s400/icon-rss.png'/></a></li>
<li><a href='http://www.facebook.com/anshuldudeja'><img alt='Facebook Link' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigqJ20IOtelTxJw53_xiX9zUHzrUf0xyaP3PPpEl4VlNSk6KTDWRogV_BEBbKv4OGoV6PDePw2lConA3BR4Pt6d1M7fEh6hNXNUFooPOx5fL64cyfM2XM1ZaCdGhjEo0UjWn7a4my8lUP-/s400/icon-fb.png'/></a></li>
<li><a href='http://www.twitter.com/anshuldudeja'><img alt='Twitter Link' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJCs4LthovrRuQieT2jR8MdC6gtKT0yUpfHjBi9hb1Rd9oTcahzz5BjYs3xFzHA1K7-Y_xFP7-o9P192t0E97EzhAX0iZ5kbTM4yavbh9JwN3_9hguYOAZ_Ma29irG4LLnpXemjQ3hQDb/s400/icon-twit.png'/></a></li>
<li><a href='http://anshul555.stumbleupon.com/'><img alt='StumbleUpon Link' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP5fljlNVuo2CY9zn4syJw3Oo4inMhnJWxL7o9J_8tvJCor2yZfWF9c1w4qO-FASpCxoiui8Jhd6UgtDadh4wQ83PT_r1Jtwq9FhTJeLf-XfZ_butEToMVaMr7mrIfsoNX5EX5WR773DM2/s400/icon-su.png'/></a></li>
<li><a href='http://www.delicious.com/anshul555'><img alt='Delicious Link' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLo6Q4lkG3wnfKST_PT-T1O3ypsrEl6-FPEHZ_sZ-PZSMlq9Pf6LuBsnWXBc-AnCaBvuZz16WJA2-jL6QYaC9cUtofxiDM3VE4nBb16VY35tGm7w-ZfQ-3b_yxtfinOvyF1HpTcL7j3ac/s400/icon-delicious.png'/></a></li>
<li><a href='http://technorati.com/people/technorati/anshul555'><img alt='RSS Link' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQNJELvhhyphenhyphenMqK2j_6ylujnFU8eJAvaB4c8OKko41GH5qvclFB-wARyKhU9aKzz8PwtTuYHbyiB2QuZW_LRlscdnqcFb9Xkv15ue8_ReONDiF70LjYCWOZPV2nw06m4pBmX3Mx_3za8MQzg/s400/icon-technorati.png'/></a></li>
<li><a href='http://digg.com/users/anshul555'><img alt='Digg Link' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZB3A-qPyYe_ytz00P4pnpEIp19y_jyNJ52zsBrsxitTofnlulKl3Qle3sgT37FaBgpj9Y795d52lIcVgKgNt6Hs4gRU9JEccyamqFylDD6yH6_0wA1RdENzsjbaISw3qjjq-u8MjGJ68I/s400/icon-digg.png'/></a></li>
</ul>
</div>
</div>




• 468 x 60 Add banner


Just find below codes and change with your advertiser link and its banner link or with google add codes between ad start and end comment.



<div id='myads'>
<!-- Your ads start -->
<p><a href='http://www.anshuldudeja.com'><img alt='Advertisement' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE9A78Ds66CfTRcv-zdKCSjNJGNdF_bnqtATjyBn8kcA-s5DSCD5jNUvZLDUEW_F7qcbEpBSRiA_3t1xK3mwLmraQ1Gwz-hLJY0oaV7ae-POI0tj8ul6f2uDYBLMBJlcPfW8NNEk0drLNi/s800/1.jpg'/></a></p>
<!-- Your ads end -->
</div>





• 125 Banner Ads


Just find the below codes:-



<div class='box box-adverts'>
<h2>Sponsors</h2>


<div class='interior'>

<div class='row row-1'>
<a class='ads-1 ads-l' href='#'><img alt='Advertisement' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>

<a class='ads-2 ads-r' href='#'><img alt='Advertisement' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
</div>

<div class='row row-2'>
<a class='ads-3 ads-l' href='#'><img alt='Advertisement' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>

<a class='ads-4 ads-r' href='#'><img alt='Advertisement' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
</div>

</div>

</div>



Now replace the # with links and image link with yours or either completely remove all codes if you don't want banner ads.


• Archive Format


If you are using blogger archive in your sidebar i suggest to select these settings.Just go to Blogger Layout > Click On Edit Button Link of Blog Archive Widget . A pop-up window will open just select from there the style as Flat List.As Blog will look nice with it.

If i left something that you need more while installation of template or something where i got wrong in explaination or made complex let me know.

Donate If You Like The Work

If You Really liked our work and want us to continue provide these premium templates for free, Then support us by donating something you feel for this design by using paypal button in my sidebar.

Blogger Template | Newzmag

Newzmag blogger template i.e Newspaper, or some say it is magazine type of theme. This template is very in demand for all those who run dynamic content weblog.Blogger writing daily content news will love it a lot.Twitter account is ready to be added within the theme setup. Suitable for beginner or journalism who write a lot.Rss feed widget is also ready and very beautiful slider with image thumbnail used in it.For more features and its live demo you can read on below.

If you are not in search of this type of template the other templates you can give the trial are sGallery and Mainam.

Features Of Newzmag Blogger Template

• Fixed Width Template


• Two Column Blogger Template


• Right Sidebar


• Rss Button Ready


• Twitter Ready Widget


• Compatible With Mozilla, Chrome and IE7


• Top Menu Links


• Beautiful Comment System


• 125 x 125 adds Widget


• Auto Slider Featured Post

Hacks Supported By Template

• Swap Title Hack For Blogger


• Hidden Navbar Layout


• Post Date Widget


• Blogger Avatars Activated


• Auto Move Featured Posts


• Tweet Me Button

Newzmag Template Installation

• Header Title


Just find below code and change the text in red with your title.



<div class='header-text'><h1><a class='header-title' href='/'>Blogger Template Demo</a></h1></div>




• Top Menu Links



Just find the below codes and edit the links and text in it.



<ul id='top-navi'>
<li><a href='/'>Home</a></li>
<li class='page_item page-item-2'><a href='#' title='About'>About</a></li>
<li class='page_item page-item-75'><a href='#' title='Contact'>Contact</a></li>
</ul>




Replace # with links and bold ones with linking text.


• Featured Content Slider


Just Go To Blogger Layout > Page Elements > Click on Edit Button of HTML/Javascript Widget as shown in below picture




And add the following codes to it.



<!-- begin featured -->
<div id="featured">

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Twitter Traffic &#8211; How To Drive Loads of Traffic to your blog and Make Money</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyJNc4bQI54M4XRlwRQpVQUlIn71t-oGYmo8LecUuUd6mOWgg7kZZFRaqcNHnb_nKcZ_UyO_AtP28E0G5yX0oPxM-jtXuxBwibGXEcsC9fl7j6WX4uY8ttNGpsK3sINVi5HaReBjUDem1/s400/twitter_lg2.jpg"/></div>
<p>If you aren&#8217;t using twitter as a way of generating free traffic to your website, you&#8217;re missing out on one of the easiest marketing strategies ever to hit the Internet.
With so many social communities online, it is easy to see why Internet Marketers with limited time have been drawn to the simplistic interface and speediness...</p>
<div class="featured-meta">
<span class="featured-date">11th October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Secret Methods of How to Make Money with Email Marketing</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhybO6b5Za3f5udcm7SjWRdkPn-RRzGiAb5tW232Pxs2uFQuDf7y1HYY7iuIuo_hXfut2ny_Gh0zQGif28njyM8zg1OZOkGsZuovF5gYw-9BJqn1a8ZvVZeJs5_RGLP4ELVJd7jf4V2vO19/s400/ebook_350.png"/></div>
<p>Online marketing may have developed a sudden surge these past few years, but many in the know how have felt its rise even from way then. As more internet based businesses are put up, the need to develop new marketing skills and knowledge based on this new medium have arisen. More and more marketing strategies...</p>
<div class="featured-meta">
<span class="featured-date">1st October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Get paid to blog at today.com</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0AuVoLEEtQr_hLrm1i2tJMT7_3yENd0giN18AYYZaXVUVFHPCKRqtWQMGPFEDSoaLqdNCWqgwPQ2glkIPBnTKEChX7BdEo5C6QLWv9bd4ED5ltPx0uPbTk1LA0JmhjktUtdLSDSMaAk2s/s400/070125_the_traffic_bully.gif"/></div>
<p>Today.com is a free blogging platform that works like Blogger and Wordpress, except that you will be paid for blogging at Today.com. Payment will be made on the 10th of each month via Paypal or check with $50 minimum payment.
How to Earn Money with Today.com
1. $2.00 per 1000 unique visitors for the first 30 days.
2....</p>
<div class="featured-meta">
<span class="featured-date">25th March 2009</span>
<span class="featured-comment"><a href="/#comments">4 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Free download CPA marketing guide</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNM_up6Dg3S8J0exwK2KWDEwr_9IRhg0xOL5-0ggHTRJaOrNUSiBwPKauWf2syuYoG2UA9H8baBAyyMMmxPqIrGtUCa2whMPT7l07J9igwXMMX-IWo_m9QkYWRd-lPHrlyeyPW1yAHfHE/s400/downloadreport.jpg"/></div>
<p>Gauher Chaudhry, the man behind Pay Per Click Formula, has just released an 89 page insider&#8217;s guide to CPA marketing profts for FREE!
That&#8217;s right, FREE as in cost you zero cents to get the most comprehensive guides on CPA marketing and learn the way to earn as much as $100,000 per day with CPA...</p>
<div class="featured-meta">
<span class="featured-date">18th March 2009</span>
<span class="featured-comment"><a href="/#comments">10 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Delicious ice cream post</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH2zxGG91Rlw5otlqKvqJJlSO8WesfJ68x0gtqheK6c5QerDSffLw_grHNXMoy7Knk8-7RfkdDvJT-At68Ks1r0e7e-lHkPCZ81aOq3CNqDn-WPi84JyZFd8YeqzXXRMHfMGtc7jdO2RFY/s400/ice_cream.jpg"/></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec lorem. Duis erat. Mauris faucibus, nibh sed scelerisque commodo, libero lacus posuere diam, at ornare felis quam vitae mauris. Nam in diam. Cras nec metus. Nam suscipit elementum eros. Mauris ut nibh. Maecenas id velit. Nulla pellentesque porttitor dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
<div class="featured-meta">
<span class="featured-date">3rd December 2008</span>
<span class="featured-comment"><a href="/#comments" title="Comment on Delicious ice cream post">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

</div>
<!-- end featured -->



Replace :-

# :- With Post Link
Bold Text:- With Post Title
Green Text Link:- With Image Link
Text In Italic :- With Post Description
11th October 2009 :- With Your Post Date
/#comments :- With Post url Like this http://post-url/#comments

Now edit all like this or i just give you basic formt for it below.Just keep on making yours.



<!-- begin featured -->
<div id="featured">

<div class="post">
<div class="featured-text"><h1><a href="Post-Link" class="featured-title">Post Title</a></h1></div>
<div class="featured-thumb"><img src="Image-url"/></div>
<p>Post-Summary</p>
<div class="featured-meta">
<span class="featured-date">Post-Date</span>
<span class="featured-comment"><a href="Post-link/#comments">Comment-Count</a></span>
<a href="Post-link" class="featured-read">Read full</a>
</div>
</div>

.
.
repeat above part again for second post with other post url and title
.
.
.Keep on adding above part to any no. you want in between begin and end of featured content
.
.
<div><!-- end featured -->



Just Replace Bold Text with what they saying and keep on repeating the middle codes with other posts links to increase the no of posts in slider.

I have hosted the javascripts file in blogger itself because of bandwidth problems.You can host them to your server also to make your template load fast.All three scripts you will get together with template on above download link.


• Twitter Username


Just find below codes and change the twitter username to yours.



<div class='header-twitter'><a href='http://www.twitter.com/anshuldudeja'>Follow me on Twitter</a></div>





• 125 Banner Ads


Just find the below codes:-



<div class='sidebanner1'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
</div>
<div class='sidebanner2'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
</div>
<div class='sidebanner1'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a></div>
<div class='sidebanner2'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
</div>



Now replace the # with links and image link with yours or either completely remove all codes if you don't want banner ads.


• Read More Feature


As the design is based on read more feature,but i have not added any automatic read more feature to it.To have post summary at home page you have to use read more feature provided by blogger.If you don't know about it i will tell you how to implement it in this template.

First Of all Go to Settings > At The bottom of page will find Select Post Editor.Just select the option of updated editor and save settings like below picture.



Now, If you write your post in Edit Html Mode then you need to add only


<!-- more -->


at place where you want to break post in summary and keep on writing post further.

If you write in Compose mode just click on the icon available for it in compose mode as shown in picture.

If i left something that you need more while installation of template or something where i got wrong in explaination or made complex let me know.

Donate If You Like The Work

If You Really liked our work and want us to continue provide these premium templates for free, Then support us by donating something you feel for this design by using paypal button in my sidebar.

Blogger Template | Potrika

Hello readers,i am again with another blogger template which i don't know you will be going to like or not but i hope some will like it for sure and will use it on your blog.It took a lot time to me to make it but i have made it very easy to setup for you including menu links.Its just simple design,which can have featured post and also don't forget its again a magazine style,one of my favourites.

My last release was Foodiary Blogger template and best one was bueno blogger template.Check it if you haven't checked it.

Let's take an look at potrika blogger template.

Features Of Potrika Blogger Template

• Fixed Width Template


• Two Column Blogger Template


• Right Sidebar


• Adds Ready


• Top Menu Links


• Compatible With Mozilla, Chrome and IE7


• Automatic Thumbnail


• Add Featured Post

Hacks Supported By Template

• Swap Title Hack For Blogger


• Hidden Navbar Layout


• Blogger Avatars Activated


• Featured Post Content


• Read More Hack With Thumbnail


• Top Menu Links


• Splited Header

Potrika Template Layout

Potrika Template Installation

• Header Image


Just go to Blogger Layout > Page Elements > Click On Edit Button Of Header as i shown in above layout.A Popup window will open.Just browse for the image of your header from your computer and select an option for Instead of Title And Description and save it.

To best fit your header use an image of size 239px � 105px as i have used in demo blog.If you wants its psd file and make yours just get it from wordpress download link.


• Featured Content


Just Go To Blogger Layout > Page Elements > Click on Edit Button of New Post Widget or Add a Gadget and open HTMl/Javascript as shown in above picture.And add the following codes to it.



<p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK2DGGB7yJrZzdN8E1SvmiovXXQCceJfRJIbeFm3Sje-wK2F2rm1eaV9O05CGjjlwQW5HQFFXlqyA0x4FuvfPeRzBELD3TUk5CLEl1DhD-gUAtMyTtoIiaINLkXhVrnQk62ba379nWvQ8/s400/w2.jpg"/></a>
</p>

<div class="latest_content">
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing .......
</p></div>



Just what you have to do is edit the red # with post url,green link with your image link,and text written in bold with post description.


• Two Menu Links As Linklist


When you will go to Layout > Page Elements there you will see two linklist widget as shown in above layout picture.Just click on Edit button and add the links you want to add.


• 728 by 90 Leadeboard Add


Just see the Layout Picture I have shown above.There i have shown you the advertise widget.Just click on the edit button and add your advertising codes there.

If i left something that you need more while installation of template or something where i got wrong in explaination or made complex let me know.

Donate If You Like The Work

If You Really liked our work and want us to continue provide these premium templates for free, Then support us by donating something you feel for this design by using paypal button in my sidebar.

Blogger Template | Foodiary

Foodiary another blogger template from me which is again a magazine style template.I don't know most of you like them or not but i have many more like these to release,if you like these templates.It was the free wordpress theme from simplywp.net and i converted it for you with full features support from blogger.I have also made to work featured gallery for you to show of your featured content.

As many of bloggers love to show of there content in gallery or can say there most important posts or works to there readers.The first featured gallery template which i released was chucky blogger template which again was magazine style,don't forget to check it for sure.So lets take an demo of foodiary blogger template.

Features Of Foodiary Blogger Template

• Fixed Width Template


• Two Column Blogger Template


• Right Sidebar


• Rss Button Ready


• Twitter Ready Widget


• Compatible With Mozilla, Chrome and IE7


• Search Box Ready


• Beautiful Comment System


• 125 x 125 adds Widget


• Add Post Automatic Thumbnail


• Auto Slider Featured Post

Hacks Supported By Template

• Search Box For Blog


• Swap Title Hack For Blogger


• Hidden Navbar Layout


• Post Date Widget


• Blogger Avatars Activated


• Three Column Footer


• Auto Move Featured Posts


• Tweet Me Button


• Social Bookmarking Widget


• Read More Hack WIth Thumbnail

Foodiary Template Installation

• Featured Content


Just Go To Blogger Layout > Page Elements > Click on Edit Button of HTML/Javascript Widget as shown in below picture



And add the following codes to it.



<div id="featured">
<div class="enter">

<div class="featured-body">
<div class="featured-thumb"><img alt="&nbsp;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyJNc4bQI54M4XRlwRQpVQUlIn71t-oGYmo8LecUuUd6mOWgg7kZZFRaqcNHnb_nKcZ_UyO_AtP28E0G5yX0oPxM-jtXuxBwibGXEcsC9fl7j6WX4uY8ttNGpsK3sINVi5HaReBjUDem1/s400/twitter_lg2.jpg"/></div>
<div class="featured-text"><a href="#" class="featured-title">Twitter Traffic &#8211; How To Drive Loads of Traffic to your blog</a></div>

</div>

</div>
<div class="enter">

<div class="featured-body">
<div class="featured-thumb"><img alt="&nbsp;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhybO6b5Za3f5udcm7SjWRdkPn-RRzGiAb5tW232Pxs2uFQuDf7y1HYY7iuIuo_hXfut2ny_Gh0zQGif28njyM8zg1OZOkGsZuovF5gYw-9BJqn1a8ZvVZeJs5_RGLP4ELVJd7jf4V2vO19/s400/ebook_350.png"/></div>
<div class="featured-text"><a href="#" class="featured-title">Secret Methods of How to Make Money with Email Marketing</a></div>
</div>

</div>
<div class="enter">

<div class="featured-body">
<div class="featured-thumb"><img alt="&nbsp;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0AuVoLEEtQr_hLrm1i2tJMT7_3yENd0giN18AYYZaXVUVFHPCKRqtWQMGPFEDSoaLqdNCWqgwPQ2glkIPBnTKEChX7BdEo5C6QLWv9bd4ED5ltPx0uPbTk1LA0JmhjktUtdLSDSMaAk2s/s400/070125_the_traffic_bully.gif"/></div>
<div class="featured-text"><a href="#" class="featured-title">Get paid to blog at today.com</a></div>

</div>

</div>
<div class="enter">

<div class="featured-body">
<div class="featured-thumb"><img alt="&nbsp;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNM_up6Dg3S8J0exwK2KWDEwr_9IRhg0xOL5-0ggHTRJaOrNUSiBwPKauWf2syuYoG2UA9H8baBAyyMMmxPqIrGtUCa2whMPT7l07J9igwXMMX-IWo_m9QkYWRd-lPHrlyeyPW1yAHfHE/s400/downloadreport.jpg"/></div>
<div class="featured-text"><a href="#" class="featured-title">Free download CPA marketing guide</a></div>
</div>

</div>
<div class="enter">

<div class="featured-body">
<div class="featured-thumb"><img alt="&nbsp;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH2zxGG91Rlw5otlqKvqJJlSO8WesfJ68x0gtqheK6c5QerDSffLw_grHNXMoy7Knk8-7RfkdDvJT-At68Ks1r0e7e-lHkPCZ81aOq3CNqDn-WPi84JyZFd8YeqzXXRMHfMGtc7jdO2RFY/s400/ice_cream.jpg"/></div>
<div class="featured-text"><a href="#" class="featured-title">Delicious ice cream post</a></div>

</div>

</div>
</div><!-- END featured -->



Just what you have to do is edit the red content i.e red link with the image link of your post,red text with post title and # with the post link.Edit all the below content like this to make your own.

I have hosted the javascripts file in blogger itself because of bandwidth problems.You can host them to your server also to make your template load fast.All three scripts you will get together with template on above download link.


• Twitter Username


Just find below codes and change the twitter username to yours.



<a class='side-twitter' href='http://www.twitter.com/anshuldudeja'>Follow me on Twitter</a>




• 125 Banner Ads


Just find the below codes:-



<div class='banner'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTejhby9Ova8xLnp1NSdKTVdNdlJkK_fJ-W9QLahbkFWo0dYHZUbdsdTi9WVGbWRNmIZySXI4Kpil8MYHstSpEJPTefyE8RQYKmwRRUXgYv9nMsPubFocNcD8iM5OBwl4YWYklzFIovMm_/s400/125.gif'/></a>
</div>



Now replace the # with links and image link with yours or either completely remove all codes if you don't want banner ads.


• Post Image And Content Size




summary_noimg = 730;
summary_img = 140;
img_thumb_height = 230;
img_thumb_width = 295;



Just find above codes and control these properties to do change in image size and content size if you want to,as many users like to adjust in there own way.You can read about adjusting whole hack here - Automatic Read More Hack With Thumbnail.

If i left something that you need more while installation of template or something where i got wrong in explaination or made complex let me know.

Donate If You Like The Work

If You Really liked our work and want us to continue provide these premium templates for free, Then support us by donating something you feel for this design by using paypal button in my sidebar.

Blogger Template | Bueno

Hello my friends,today i am going to release another blogger template which you will be going to love a lot.This time the template again comes in seven beautiful colors as same as irresistible template one which was my previous released template available in nine different colors.If you have not checked it then check for sure as it was my one of the best conversion with full functionality.You can view it here.

As irresistible was designed by woothemes and this time again a theme i took for conversion is from them,as they give really the best wordpress themes.So lets take a look at my new template name Bueno.

Just Don't Forget To Check All The Colors Available For This Template From Fixed Drop Down Menu at Top Right Of Demo Blog.

Features Of Bueno Blogger Template

• Fixed Width Template


• Two Column Blogger Template


• Right Sidebar


• Seven Colors Background


• Two Menu Links


• Compatible With Mozilla, Chrome and IE7


• Search Box Ready


• Beautiful Comment System


• 125 x 125 adds Widget

Hacks Supported By Template

• Search Box For Blog


• Swap Title Hack For Blogger


• Hidden Navbar Layout


• Post Date Widget


• Blogger Avatars Activated


• Three Column Footer


• Remove Subscribe To Posts Atom


• Remove Archives Count


• Remove Labels Count

Bueno Template Installation

• Header Image

Just go to Blogger Layout > Page Elements > Click On Edit Button Of Header > A Popup window will open.Just browse for the image of your header from your computer and select an option for Instead of Title And Description and save it.

To best fit your header use an image of size 175px � 61px as i have used in demo blog.


• Top Menu Links


Just find the below codes and edit the links and text in it.


<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>
</ul>



Replace Red ones with links and bold ones with linking text.


• Page Links


Just find the below codes in your template.



<div id='meniu'>
<ul>
<li class='current_page_item'><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'> Sitemap</a></li>
<li><a href='#'>Full Width</a></li>
<li class='rss'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='RSS Feed'>Rss</a></li>
</ul>
</div>



Just replace the # with your links and the linking text pointing to them.


• Timestamp Format


Just Go To Blogger Layout > Settings > Formating > Timestamp Format and just select the format as shown in picture below and save it.




• 125 Banner Adds


Just go to Blogger Layout > Page Elements > Add a Page Element in Sidebar > HTML/Javascript and now just add below codes.



<div class="ads125">
<a href="#"><img src="http://i38.tinypic.com/25ezi91.jpg"/></a>
<a href="#"><img src="http://i38.tinypic.com/25ezi91.jpg"/></a>
<a href="#"><img src="http://i38.tinypic.com/25ezi91.jpg"/></a>
<a href="#"><img src="http://i38.tinypic.com/25ezi91.jpg"/></a>
</div>



Just replace # with your advertisers blog link and image link with advertisers banner link.


• Archive Format


If you are using blogger archive in your sidebar i suggest to select these settings.Just go to Blogger Layout > Click On Edit Button Link of Blog Archive Widget . A pop-up window will open just select from there the style as Flat List.As Blog will look nice with it.


• Switching To Other Themes Of Template


I have released this theme in 7 colors,so i wanted that users can switch to any theme they like at any time they want.So i made the switching of the theme very easy and will take hardly a minute to give new look to your template.

As i have given you xml file for all 7 colors you can use any color xml you like but at any time if you want to switch to other color you will try to upload other color xml but this will effect all your widgets so just read simple instructions to switch to other color theme within a minute.

Just what you need is to change 4 image links and two colors to give your theme a new look.For images just find for bodytile.jpg, bullet_hover.png, date.png and ico-rss.png.Just replace them with other colors images.You will get image links to use for all themes in notepad file when you download this template.

For colors just check for below codes in your template.You will get them at the beggining of your template codes only.



<Variable name="linkcolor" description="Link Color"
type="color" default="#ccc" value="#115900">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#9bd28e">



Just change the two color values in red and you are done with it.All the color codes you will get in notepad file when you download this template.

If i left something that you need more while installation of template or something where i got wrong in explaination or made complex let me know.

Donate If You Like The Work

If You Really liked our work and want us to continue provide these premium templates for free, Then support us by donating something you feel for this design by using paypal button in my sidebar.

Auto Move Image Slider i.e carousel For Blogger

I had provided you earlier with an image slider with two left and right panels which on click take you to other images.But some of my readers at that time wanted it to have auto moves of images in slider.So in this post i will tell you how to auto move the images in slider.If you you don't know what exactly image slider is, then don't worry, just i would like you first to read my previous post on image slider for it and if you like it just follow that tutorial to have it in your blog.

Some other widgets you would like to implement for sure like peel add for blogger for attracting your visitors to subscribe your blog or show of your advertiser or show of some other important stuff.Some hacks like these i previously wrote were image hover effect,images reflection in blogger posts and zoom your images in blogger posts,which might also help you a lot.

Now lets carry on with an important tutorial of how to add the auto move image slider to your blog.

Just see it at top below the blog header.

Download this Zip file and get two javascript files from it for backup.

Now after getting these two scripts you can upload them to your own server,if you want else dont know where to upload check my this post on where to upload .js files.

Now Just login to your blogger account Then Go To > Layout > Edit/Html > Press Ctrl+ F

Now search for </head> and place the below javascript codes before this tag.

<script src='http://btemplatescripts.googlecode.com/files/auto-slider.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

In the above codes you will see red coloured lines just replace them with the link of your file which you downloaded and uploaded to your server, if dont want then also you can use my above links.

Now Search for this code ]]></b:skin> and add the below css above it.

#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipLPAK7sEppi6Z9qUtRErvaNcPDMel3ulUw01OlTXod2utjM7l2ZNZZNv704XZ8JGuL10hM5dRSwRb9HTphonvcT6IsWaM2gGzY9LRXCcAPkFqOZIdlFQTqWTmX0BQ5DTw4KFfFmpTBQ/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsKrISzHTIngouucv9Rmz0cNSHImoojwLIWR1RL8YrNepFosquLLaIkH3fzlItVM3jXUUEVbnJlT7vytRQG7bb6Y7YDvvlQMIX6ZdUdcq_icd_JwzWFkU7c9zAQJBeo6uOozkLSQvUBg/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCmi6npX6TWKbzInZrkRcSXXXSajaMmqrPELZodv_gCfLWtVjgZGFyoLXAN8289JRFxCoU_ymWkfSXswb_JyEApIDcYMempnwenWYEMb3-90EolZat-A98D_QB99r5fNjVPi346-jJt9U/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>

The green lines are the images of side arrows to make it scroll left and right you can make and add your also to make it look different.And in pink are number to control speed of slider.

Now Save Your Template.All the coding part is finished,now just how to add images to slider.

Just go to Layout > Page Elements > Add A Gadget > Html/Javascript

And add the below links of images and posts in it,in the format i am writing below.

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ6zV8nbxc548JF8jX0MUX22E54XKYQhkQ5nFCcI9tsUNv-3HG8JApmidQJ4xWpblwKzw279of3F-iWKUofcjBnAdPJDOjiem56VC4RUMpub35UmgjFMIreHrKL7YClZKU4r6eXcWyEzo/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/02/simple-blog-writing-template.html" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4gC_e6oT0WuRhdGgGZdVgZP3EQ2aBf8Hjc2ojMm7HLhubEHP0VUd-nv1yqZZ8V0wQpYnbUoYNxEILVASAR2bgkGR-Hw89YE_nCyFL7C-dhjJ0zl-tCI1feroecAfzrGPyrWZbbTXpyM/s400/simple+Blog+Template.png" height="110"/> </a>
</div>
<!-- end code of 2nd -->

<!-- 3rd Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/woork-style-blogger-template-design.html" target="blank" title="Woork Style Blogger Template"> <img width="160" alt="Woork Style Blogger Template" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/> </a>
</div>
<!-- end code of 3rd -->

<!-- 4th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/blogger-buster-style-blogger-template.html" target="blank" title="Blogger Buster Style"> <img src="http://img23.imageshack.us/img23/8537/bloggertemplate.jpg"/> </a>
</div>
<!-- end code of 4th -->

<!-- 5th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/free-lenomag-blogger-template.html" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3vfTonBFo-dxOiC8d8PP4ZAb0oH1C5z90wK4wQnxcEPqGwpZl40_4fvVt1cKYUqDCStoMAvfNpXE7WnUHTSCWfyOqDSCtd9SvQ_mXh2F497UkGfNsF_T1dK9xW3JDLzZDQ2ayWUX62gA/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- end code of 5th -->

<!-- 6th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/money-blogger-blogger-template.html" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH_IDFtIgtzqI3e3oLClNYtrNWC8M9MaI5tWG9vjxvF8u0RsVqwgott6E8HqLO_VgUEZsNWTTweCWhe653jK1QBlPUhF0kvRxHmWMJWhQaZk2H3GsgMfmqIf7mzaXpvsNCpsVj5DdUa7A/s320/money2520blogger.png" height="110"/> </a>
</div>
<!-- end code of 6th -->

<!-- 7th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/digital-statement-blogger-template.html" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://img2.pict.com/fd/ad/16/9de4e09426b4090113f40930f2/bnaeY/800/digital2520statement.png" height="110"/> </a>
</div>
<!-- end code of 7th -->

<!-- 8th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/orkut-theme-blogger-template.html" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://img2.pict.com/f3/ec/dd/06efff55a05477591153094b2f/rDVvV/800/orkut2520theme2520blogger2520tem.png" height="110"/> </a>
</div>
<!-- end code of 8th -->

</div></div></div>

Just change the links and images url with yours and also there titles.Just keep on adding links to in this format to any number you want as you can add hundreds of images and posts in this format no limit to it.Java web hosting is also rising in popularity now, so better try searching one that suits your needs now.