Blogger Blog Templates

Italian Food Blogger Theme

noreply@blogger.com (Bhavika) — Fri, 25 May 2012 09:01:00 +0000

Italian Food as the name suggests is a 2 column food theme created by Chica Blogger. The blogger template comes with featured slider, social media icons, twitter widget and 3 column footer.

To set up the slideshow, go to Template--Edit Html and look for the below code -

<div id='slider'>

<a href='#' title='Introducing Blogger Theme'>

<img alt='' src='http://1.bp.blogspot.com/-njAAK0M60eo/T25_7kDesQI/AAAAAAAADgM/xE37VKpg3Sc/s1600/1.jpg' title='Introducing Blogger Theme'/>

</a>

<a href='#' title='Another image in a post'>

<img alt='' src='http://1.bp.blogspot.com/-OnwNpDofysY/T25_7x-lgWI/AAAAAAAADgY/_nOGUaxrInA/s1600/2.jpg' title='Another image in a post'/>

</a>

Now replace '#' with your post link, change the title, image link and image alt text, follow the same steps for all the slides. Make sure all images are 900 x 300px. Above the slider in the menu bar are the social media icons - Facebook, twitter and RSS - you can change the links from Edit Html, click on 'Expand widget templates' and find the following code -

<div id='social'>
<a href='#'>
<img alt='Twitter' src='http://3.bp.blogspot.com/-u9okk_BeX4w/T0hJfN7QTHI/AAAAAAAADG0/uWZNb96MX0U/s1600/twitter.png' title='Twitter'/></a>
<a href='#'>
<img alt='Feed' src='http://1.bp.blogspot.com/-p3J22mhWdhY/T0hJVlK86xI/AAAAAAAADF0/Bn9Gm0lFDbA/s1600/rss.png' title='RSS'/></a>
<a href='#'>
<img alt='Facebook' src='http://3.bp.blogspot.com/-X-uS8ZroVnk/T0hJF1FdVKI/AAAAAAAADFI/wLjTh0XPR74/s1600/facebook.png' title='Facebook'/></a>
</div>

Replace '#' with your social ids and save the changes. The main column has the usual format of displaying post summary with thumbnails along with author, date and comments.

The sidebar has an integrated search box, and the bottom of the main column is the twitter widget that shows your latest tweet. You need to insert your twitter handle from Edit Html -

<div id='twitter-widget'>

<li class='twitter-updates'>

<ul id='twitter_update_list'/>
<a href='http://twitter.com/claudiacs' id='twitter-link'/>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/claudiacs.json?callback=twitterCallback2&count=1' type='text/javascript'/>

</li>

</div

Simply replace 'claudiacs' with your own id, it appears twice in the code. The 3 column footer can be used to show blogger widgets of your choice.

Download the Italian Food Blogger Theme

Green Health Blog Template

noreply@blogger.com (Bhavika) — Thu, 24 May 2012 17:26:00 +0000

Green Health is a 2 column blogger template created by Lasindu Nadishan. It has a nice cascading slider, dual menu bar with dropdown and a 3 column footer.

The top menu bar on the right can be edited from Edit Html and search for this code -

<div id='pagemenucontainer'>
<ul id='pagemenu'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
</ul>

Replace '#' with your page links and insert relevant titles, save the changes. Similarly, for the second menu bar look for this code in Edit Html.

<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Business</a>

<ul class='children'>
<li><a href='#'>Money</a></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Social</a></li>
</ul>
</li>

Now here you have to insert the sub-categories under 'children' along with the links, follow the same steps for all the categories. Moving on to the slider, search for this code -

<div id='slidewrap'>
<ul class='kwicks horizontal'>
<li id='kwick_1'>
<span class='fadeout'/>
<div class='excerpt'>
<h2><a href='http://www.coolbthemes.com/' rel='bookmark' title='Permanent Link to Quas molestias excepturi'>Quas molestias excepturi</a></h2>
</div>
<img alt='Quas molestias excepturi' height='305' src='http://1.bp.blogspot.com/-Ch_tdavYv6k/T6KLU141HKI/AAAAAAAAKvY/UphqTt4--TQ/s1600/1.jpg' width='600'/>
</li>

Replace the post link, title, add in your own image url, keep the image size 960px x 400px and 'alt' text, follow the same steps for the remaining slides. The main column has the same format of displaying articles, thumbnails with a summary about the post, along with author, comments, time and date stamp.

The single sidebar shows social profiles in a neat manner and different blogger widgets. One thing I found missing in this template is a search box, you can probably add the Google Custom Search in the sidebar. The 3 column footer as well can be utilised to show varied content.

Download the Green Health Blog Template

Integrating Facebook Comments in Blogger

noreply@blogger.com (Bhavika) — Thu, 17 May 2012 17:33:00 +0000

Integrating Facebook comments in your blogger blog is a convenient way for users to simply post a comment instead of signing from other accounts. There are couple of steps involved, which are simple as well, but once its done, see the comments flowing in.

First step is to create a facebook application for your blog from Facebook Developers. Once you are on the page, click on 'Create New app' on the top right of the screen, put in the 'Application name', which can be anything like your blog name, it shouldn't be more than 32 characters. Next put 'App Namespace' which could anything as well, I put blogtemplates and click on continue. Don't tick on the last option on web hosting, its not required.

Next fill in the security text in the captcha box and submit.

In case you haven't added your mobile phone number in your Facebook account, it will show you a message to confirm your cell number. Once you add it, you will receive a SMS with the confirmation code from Facebook. Enter the code in the box and click on confirm, this will verify your account.

Take down your application id, and in 'App Domains' enter 'blogspot.com'. If you host the blog on your own domain, then enter your domain name here. Below that you will find 'Website with Facebook Login', enter your site url and save changes. Your facebook application is ready to use.

Log in to your blogger account, go to Template--Edit Html and search for the '' tag and add this code below it. Put in your facebook application id which you saved earlier, before adding -

<meta content="FACEBOOK-APP-ID" property="fb:app_id" />

Next step is about adding the facebook comments code under the blog post, for that go to Edit Html, click on 'Expand Widget Templates' and search for this code -

<div class='post-footer-line post-footer-line-3'>

In case you don't find the above code, since all blogger templates are not the same, search for this code -

<p class='post-footer-line post-footer-line-3'>

If you still don't find it, then look for the code below, you will certainly find this one -

<data:post.body/>

Right after the line of code, whichever you found from the ones given above, insert the following code and save the changes. You can modify the width of the comment box, right now its 450px, or the change the colour scheme from 'light' to 'dark'.

<b:if cond='data:blog.pageType == "item"'> <div id="fb-root"></div> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/> </b:if>

The final step is to add the Facebook Namespace declaration in your code. Right on top of Edit Html you will find -

<html

Right after this insert the code given below -

xmlns:fb="https://www.facebook.com/2008/fbml"

This is how it should look -

The facebook namespace code is relevant for all the facebook widgets and applications, so don't add it again. Save the changes and the facebook comments will be functioning on our blog.

Please note that integrating facebook comments won't hide the Blogger comments, unless you select that option from Settings--Posts and comments--Comment Location, then select 'Hide'.

Moderation of Facebook comments

To keep a track on the facebook comments and moderate it, you have to visit the Comment Moderation tool. Click on settings on the top right corner and edit it as per your choice.

Lifetime Blogger Template

noreply@blogger.com (Bhavika) — Wed, 16 May 2012 06:18:00 +0000

Lifetime is a 2 column blogger template ported from wordpress by Avinash Bhardwaj. Its a simple black and yellow theme with drop down menu, social media icons, 3 column footer and neat comment section.

To change the menu bar links you have to go to Edit Html and look for this code -

<div class='menu'> <ul class='' id='menu-top-links'> <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-185' id='menu-item'> <a href='#Link'>About</a> </li> <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item' id='menu-item'><a href='#Link'>Blogging</a> <ul class='sub-menu'> <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item' id='menu-item'><a href='#Link'>web hosting</a></li> <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item' id='menu-item'><a href='#Link'>wordpress</a></li> <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item' id='menu-item'><a href='#Link'>featured</a></li> <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item' id='menu-item'><a href='#Link'>blogger</a></li> </ul> </li> <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item' id='menu-item'><a href='#Link'>Contact</a></li> <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item' id='menu-item'><a href='#Link'>joomla</a></li> <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item' id='menu-item'><a href='#Link'>web design</a></li> </ul></div>#039;menu-item

Add the category links where indicated and category title where indicated in the code, you can also put sub-categories under 'sub-menu' and then save the changes. Below the menu bar is the default search box and the social bookmarking icons, for which the links have to be added in Edit Html, here's the code -

<a href='#Facebook link'><img src='http://2.bp.blogspot.com/-Bc1ClYViuTg/T4zrQJpvMOI/AAAAAAAAB6k/kruUn5BtJgw/s1600/facebook%2B%255BHDTV%2B%2528720%2529%255D.png'/></a> <a href='#Twitter Link'><img src='http://2.bp.blogspot.com/-uBOg1GK-s4o/T4zrauyZNdI/AAAAAAAAB6w/Bsmbtfv6GZ0/s1600/twitter%2B%255BHDTV%2B%2528720%2529%255D.png'/></a> <a href='#Linkdin Link'><img src='http://4.bp.blogspot.com/-69ei7pec0dI/T4zrlwxynAI/AAAAAAAAB68/gBut_9h06Hk/s1600/linkedin%2B%255BHDTV%2B%2528720%2529%255D.png'/></a> <a href='#Delicious Link'><img src='http://4.bp.blogspot.com/-6hL_wETPORg/T4zrxAAND7I/AAAAAAAAB7I/AaZFDsfEXPg/s1600/delcious%2B%255BHDTV%2B%2528720%2529%255D.png'/></a>

The single main column displays an image from the post with the date and comments adjacent to it. Within the post at the end are the different share buttons including facebook, twitter, Google Plus, etc., are integrated in the theme. While the sidebar has different widgets like about me, archive, category list etc. You can also utilize the footer space to show more widgets. Download the Lifetime Blogger Template

My Movie Blog Template

noreply@blogger.com (Bhavika) — Tue, 15 May 2012 06:14:00 +0000

My Movie is a 2 column blogger template designed by Klodian. It has a movie-related background, dual menu bar, featured slider and 3 column footer.

Pages are enabled in the top menu bar, which can be customised from Layout (in the new blogger version), while the second menu bar includes blog labels that will show automatically. To modify the featured slider, go to Layout, edit 'Featured Posts', and carry out the changes in the below code -

<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="http://3.bp.blogspot.com/_Ax-O2ayi6kU/TSGsLt4NWOI/AAAAAAAABCg/3Uukug-mi0w/s1600/1.jpg" /> <span><strong><a href="#">Blockquote</a></strong> <p>Sed dignissim mauris nec velit ultrices id euismod orci iaculis. Aliquam ut justo id massa consectetur pellentesque pharetra ullamcorper nisl...</p> </span> </li>

Replace '#' with the post link, add your image url (marked in bold), post title and description, repeat the same step for all the slides and save the changes. While the sidebar on the right shows the social media icons on top, you need to add the below code in Layout, click on edit 'social icons' and paste the code. Add your social account links (marked in bold), you can also add different icons by changing the image url.

<a href='http://twitter.com/' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-oFF4HrEbwaI/To9NpETr6dI/AAAAAAAAEJk/jowvXNvTKcY/s1600/twitter.png" title='twitter'/></a><a href='http://facebook.com/' target='_blank'><img alt='facebook' src="http://4.bp.blogspot.com/-O6nMA1_akTo/To9NmwKzo4I/AAAAAAAAEJU/UFiFTyAJbnw/s1600/facebook.png" title='facebook'/></a><a href='https://plus.google.com/' target='_blank'><img alt='google plus' src="http://3.bp.blogspot.com/-NbS3DZVbHU0/To9NnX6odTI/AAAAAAAAEJY/SvIFghHPw-k/s1600/gplus.png" title='google plus'/></a><a href='http://www.linkedin.com/' target='_blank'><img alt='linkedin' src="http://3.bp.blogspot.com/-bzutYp7uln0/To9Nn2z36jI/AAAAAAAAEJc/-_kgc1MkEB4/s1600/linkedin.png" title='linkedin'/></a><a href='http://feedburner.com' target='_blank'><img alt='rss feed' src="http://1.bp.blogspot.com/-SLbNOLbWhs0/To9NoZ-cOHI/AAAAAAAAEJg/uRl444L2fyg/s1600/rss.png" title='rss feed'/></a><a href='mailto:your@email.com' target='_blank'><img alt='email' src="http://1.bp.blogspot.com/-zyZkki5OJqE/To9Nmf1xb8I/AAAAAAAAEJQ/dlUOxjZ0H5U/s1600/email.png" title='email'/></a>

Below the social widget you can have a slideshow, archive, popular posts etc., similarly, in the 3 columns in footer you can insert any blogger widgets. Download the My Movie Blog Template

Gossip Show Blogger Template

noreply@blogger.com (Bhavika) — Mon, 14 May 2012 11:54:00 +0000

Gossip Show is a 3 column theme created by Chica Blogger. Its a clean blogger template with featured content slider, social media icons, summarised posts on home page and 3 column footer. The white, pink and blue colour scheme makes this blogger template suitable for celebrity, lifestyle, gossip or feminine blog.

Firstly, you can upload your logo from Layout, then click on edit in 'header' section, upload your logo and save, ensure the logo size is 450px × 100px. Below the header is the single menu bar where you can add pages, categories etc. Go to Layout, click on edit 'Second Menu', add the links and save. Social media icons can be displayed on the extreme right of the menu bar, add your social account links in Edit Html, click on 'Expand widget templates' and search for the below code. Replace '#' with your facebook, twitter and RSS links.

<div id='social'> <a href='#'> <img alt='Twitter' src='http://1.bp.blogspot.com/-tVj7w9psq6g/T1Z06FgwF1I/AAAAAAAADaA/qHiA8IgU4Ts/s1600/twitter.png' title='Twitter'/></a> <a href='#'> <img alt='Feed' src='http://4.bp.blogspot.com/-q2xroCjPxO8/T1Z06S_mIDI/AAAAAAAADaM/RT_phXGen-Q/s1600/rss.png' title='RSS'/></a> <a href='#'> <img alt='Facebook' src='http://3.bp.blogspot.com/-h3ByAXL5SuU/T1Z06cuhDkI/AAAAAAAADaY/-s0UJEqKRjc/s1600/facebook.png' title='Facebook'/></a> </div>

Coming to the slider, in Edit Html find the below code -

<div id='slider-container'> <div id='slider'> <a href='#' title='Introducing Blogger Theme'> <img alt='' src='http://1.bp.blogspot.com/-nGkMe_hU2kg/T1MDaLL_apI/AAAAAAAADRs/fMtmF8R5ZFw/s1600/1.jpg' title='Introducing Blogger Theme'/> </a> <a href='#' title='Another image in a post'> <img alt='' src='http://1.bp.blogspot.com/-Y9LFRFobsEY/T1MDajmxl4I/AAAAAAAADR4/QUlvOqvMr5s/s1600/2.jpg' title='Another image in a post'/> </a>

Now replace '#' with post url, add the post title, image url and alt text, follow the same steps for rest of the slides, and save the changes. Keep the image size 600x x 300px for the slider to show properly. In the main columns each post shows up in a brief format with thumbnails, labels and comments. The single sidebar on the right and the footer can be used to display different blogger widgets. Download the Gossip Show Blogger Template

Small Biz Blogger Template

noreply@blogger.com (Bhavika) — Thu, 03 May 2012 10:22:00 +0000

Small Biz is a 2 column business theme converted from wordpress to blogger by Lasantha. Its a clean template with featured slider, tabbed widget and integrated social media buttons.

You can add your blog logo in the header from the Page Elements section of the new blogger version, logo size must be 284px width and 50px height. You can also insert a banner ad next to the logo. There is a small welcome note at the start of the blog for your readers. Moving on to the featured content slider, go to Edit Html and look for the below code -

<div class='fp-slides-items'> <div class='fp-thumbnail'> <a href='#'><img src='http://2.bp.blogspot.com/-2oF247jRgWM/T5ar1J5LXhI/AAAAAAAAFTY/ezDTtJljGgY/s1600/1.jpg'/></a> </div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='#'>This is default featured slide 1 title</a> </h3> <p> Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com. </p> </div> <div class='fp-prev-next-wrap clearfix'> <a class='fp-next' href='#fp-next'/> <a class='fp-prev' href='#fp-prev'/> </div> </div> </div>

Add the slider image, title, post description, and replace '#' with your featured post URL, follow the same steps for the remaining slides, save the changes. Below the slider, each post appears in a summarised format with thumbnail and labels. While the single sidebar displays your social media profiles, search box and other widgets. In order to change the tab names, find this code in Edit Html and replace the titles.

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'> <li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li> <li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li> <li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li> </ul>

Download the Small Biz Blogger Template

Sens Blog Template

noreply@blogger.com (Bhavika) — Sat, 31 Mar 2012 09:36:00 +0000

Sens is a 3 column blogger template created by Klodian. Its a nice theme that includes featured posts slider, 4 columns in footer and social widgets integrated.

To set up the social media icons in the header, go to Design--Page Elements, click on edit Social icons and paste the following code in the widget box and add your facebook, twitter etc user name or id.

<a href='http://twitter.com/YOUR ID' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-oFF4HrEbwaI/To9NpETr6dI/AAAAAAAAEJk/jowvXNvTKcY/s1600/twitter.png" title='twitter'/></a><a href='http://facebook.com/YOUR ID' target='_blank'><img alt='facebook' src="http://4.bp.blogspot.com/-O6nMA1_akTo/To9NmwKzo4I/AAAAAAAAEJU/UFiFTyAJbnw/s1600/facebook.png" title='facebook'/></a><a href='https://plus.google.com/YOUR ID' target='_blank'><img alt='google plus' src="http://3.bp.blogspot.com/-NbS3DZVbHU0/To9NnX6odTI/AAAAAAAAEJY/SvIFghHPw-k/s1600/gplus.png" title='google plus'/></a><a href='http://www.linkedin.com/YOUR ID' target='_blank'><img alt='linkedin' src="http://3.bp.blogspot.com/-bzutYp7uln0/To9Nn2z36jI/AAAAAAAAEJc/-_kgc1MkEB4/s1600/linkedin.png" title='linkedin'/></a><a href='http://feedburner.com/BLOG URL' target='_blank'><img alt='rss feed' src="http://1.bp.blogspot.com/-SLbNOLbWhs0/To9NoZ-cOHI/AAAAAAAAEJg/uRl444L2fyg/s1600/rss.png" title='rss feed'/></a><a href='mailto:your@email.com' target='_blank'><img alt='email' src="http://1.bp.blogspot.com/-zyZkki5OJqE/To9Nmf1xb8I/AAAAAAAAEJQ/dlUOxjZ0H5U/s1600/email.png" title='email'/></a>

The single menu bar can display the blog pages, which you can easily create from Posting--Edit Pages--New Page. Moving on to the featured content slider, create images of 960px×300px, go to Design--Page Elements, edit 'Featured Posts' and you will find the below code, just insert your image link, post url, title and short description, follow the same steps for all the slides and save the changes.

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/_Ax-O2ayi6kU/TSGsLt4NWOI/AAAAAAAABCg/3Uukug-mi0w/s1600/1.jpg" />
<span><strong><a href="#">Blockquote</a></strong>

<p>Sed dignissim mauris nec velit ultrices id euismod orci iaculis. Aliquam ut justo id massa consectetur pellentesque pharetra ullamcorper nisl...</p>
</span>
</li>

The main column follows the same format, post summary with image, Read More link, social bookmarking icons and comments. The right sidebar can be used as a single or a double column, so you can add your different blogger widgets. This template also includes a 4-column footer to add text or html widgets.

Download the Sens Blog Template

Add Pop Out Social Bookmarking Widget for Blogger

noreply@blogger.com (Bhavika) — Tue, 27 Mar 2012 10:32:00 +0000

Social media sites are important to generate traffic to your blog/site, draw new visitors and boost your search rankings.

I found a nice pop out social bookmarking widget for blogger that allows readers to share their favorite post easily, and it looks neat as well without any widget scrolling constantly on the page. Check the widget on one of our sites - Reliance Digital TV.

The widget allows you to add sliding social media buttons like - Facebook, Twitter, Digg, Google +1 and Stumbleupon - you just have to hover on it and the widget comes sliding out on the right. Here are few easy steps of installing it on your site.

1) Go to Design--Edit Html and add Jquery JavaScript Plugin (Ignore this step if your blog already has a Jquery Plugin). Search for this code -

</head>

Add this line of code before it -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

2) Now search for the head tag.

<head>

Paste this code below it and save the template -

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

Note: Google +1 button only works when you disable default share buttons in blog posts

3) Go to Design--Page Elements, click 'Add a gadget' in the sidebar or blog post, then choose HTML/JavaScript. Paste the below code and save the changes.

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".btntslidebox").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-70"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.btntslidebox{ background: url("http://4.bp.blogspot.com/-q4SqFaTkiTs/TyO_7WhbQYI/AAAAAAAAAjE/n6UDCpWQ3Wo/s1600/tab_left_vertical.png") no-repeat scroll right top transparent !important; display: block; float: left; height: auto; padding: 0 40px 0 5px; width: 65px; z-index: 99999; position:fixed; left:-70px; top:20%;}
.btntslidebox div{ border:none; position:relative; display:block;}
#floatingbuttons{ background: #fff; border-radius: 5px 5px 5px 5px; border: 1px solid #CCCCCC; float:left; padding:0 0 3px 0; bottom:15%; z-index:399;}
#floatingbuttons .floatbutton{ float:left; clear:both; margin:5px 4px 0 4px;}
.addbuttons{ clear:both; text-align:center; padding-top:5px;}
.addbuttons a span.getfloat, .addbuttons a span.sharebuttons{ color:#000; background:none; font-family:arial, sans-serif; display:block; font-size:9px; font-weight:bold;text-decoration:none; line-height:11px;}
.addbuttons a:hover span{ color:#fff; background:none; text-decoration:underline;}
</style>
<div class="btntslidebox" style=""> <div><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class="addbuttons"><a href="http://www.blogtipsntricks.com/2012/01/add-pop-out-social-bookmarking-widget.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>
</div>
</div>

Check the blog and see the widget in action. Its really neat, looks good and makes it simple for readers to share your content.

Queen Photo Blog Template

noreply@blogger.com (Bhavika) — Mon, 26 Mar 2012 08:32:00 +0000

Queen is a portfolio blogger template created by Dzignine. Its a 3 column theme which has a clean layout, minimalist design and requires the new blogger interface to function properly.

The blog title will show up on the left and the search box on the right, to display the search box you have to insert the following code in the Search gadget from Design-Page Elements.

<form id="searchform" action="/search"
style="display:inline;" method="get">
<input id="s" name="s" value="looking for something?"
type="text"/>
<input id="searchsubmit" value="Go" type="submit"/>
</form>

You can change the text marked in bold to search the blog or anything else. Moving on to the main column, for the images to display on the home page, each post should have at least an image of minimum width 740px, and the height will adjust automatically. The template has lightbox effect integrated, which you can enable from Settings--Post comments section.

You can change the font, text color, background, etc via template designer. Queen blogger template also includes a 3 column footer section to add different blogger widgets.

Download Queen Photo Blogger Template

SuperHost Blogger Template

noreply@blogger.com (Bhavika) — Tue, 20 Mar 2012 03:02:00 +0000

SuperHost is a 3 column blogger template ported from wordpress by Lasantha Bandara. The theme features include dual navigation bar with dropdown, full width slider and tabbed widget.

The first menu bar on top can be modified from Design--Page Elements, create a link list and save the changes. Below it is the header section with a banner ad on the right, followed by the second menu bar with sub-category dropdown. Search for this code in Edit Html and add your category, sub-category links.

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>

Now to edit the featured content slider, find this code in Edit Html -

<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://2.bp.blogspot.com/-TmkRkfVVS4I/Tz77uEfBLTI/AAAAAAAADeg/6Zc88ULY0r0/s1600/1.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 1 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
</p>
</div>

Caryy out the changes in the above code - add the image link, post link, slide title and description, follow the same steps for remaining slides. The main column in the center displays snippets of the post with labels and images.

While the two sidebars show different widgets including the social media icons, search box, tabber etc. If you want to change the tab names, look for this code in Edit Html and save -

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>

To add your social media links in the right sidebar, search for this code -

<h3 class='widgettitle'>Social Profiles</h3>
<a href='http://twitter.com/' target='_blank'><img alt='Twitter' src='http://2.bp.blogspot.com/-oFF4HrEbwaI/To9NpETr6dI/AAAAAAAAEJk/jowvXNvTKcY/s1600/twitter.png' title='Twitter'/></a>

Add your twitter handle (marked in bold), similarly put in your facebook, google plus id in subsequent code.

Download the SuperHost Blogger Template

Darky Blogger Template

noreply@blogger.com (Bhavika) — Fri, 09 Mar 2012 12:24:00 +0000

Darky is a 2 column blogger template designed by Blogger Mint. Its a minimalist theme with left sidebar, dark background, custom fonts and multicolor header characters.

Its a simple template which can be easily customised, beginning with the colorful menu bar, you can insert your links and even change the HTML colour code from Design--Edit Html, search for this code -

<a expr:href='data:blog.homepageUrl' style='background: #C44032;'>Home</a></li>
<li class='page_item'><a href='#' style='background: #E6C92E;' title=''>About</a></li>
<li class='page_item'><a href='#' style='background: #5DA028;' title=''>Gallery</a></li>
<li class='page_item'><a href='#' style='background: #7073CF;' title=''>Contact</a></li>

Each post appears in a summarised format in the main column with Read More link to the post. Social bookmarking icons are integrated at the end of the post so readers could share your content.

The single sidebar on the left has nice effect under each widget.

Download the Darky Blogger Template

Angry Birds Blogger Template

noreply@blogger.com (Bhavika) — Tue, 21 Feb 2012 07:58:00 +0000

Angry Birds is a 2 column blogger theme designed by Theme Snack and ported to blogger by Chica Blogger. Its a colorful theme with a slider, automatic summaries with thumbnails, featured author comments and 3 column footer.

The theme has a menu bar on top to display pages like Contact, About etc., after which is the header logo and slider. To modify the slider, go to Edit Html and look for the below code -

<div id='slider'>

<a href='http://angrybirds.themesnack.net/?p=24' title='Introducing WP Theme'>

<img alt='' src='http://4.bp.blogspot.com/-dPjpuC2oyXM/Ts2hwaYzI_I/AAAAAAAACq8/PRrUt7GLXV8/s1600/5.jpg' title='Introducing WP Theme'/>

</a>

<a href='http://angrybirds.themesnack.net/?p=21' title='Another image in a post'>

<img alt='' src='http://1.bp.blogspot.com/-ENdSWyspy08/Ts2iKJP5szI/AAAAAAAACrI/QAvlVIReZQA/s1600/4.jpg' title='Another image in a post'/>

</a>

Add the post link, title, img alt text and image url for each slide and save the changes. In the main column each post comes with a short summary linking to the full post and thumbnail. The single sidebar has a nice section to display social media icons, you can add your own image, if you like, add the user id and one line text and save the changes. Follow the same step for your RSS feed and facebook.

<a href='YOUR-LINK-HERE'>
<img alt='Twitter' src='http://1.bp.blogspot.com/-iekDCUVs3Dg/Ts2ZqqRjv0I/AAAAAAAACqc/PbEaxTHQ8Ug/s1600/twitter.png'/></a>
<h4><a href='YOUR-LINK-HERE'>Follow me</a></h4>
<p>You can follow my updates on Twitter</p>

</li>

<li>

<a href='YOUR-LINK-HERE'>
<img alt='Feed' src='http://3.bp.blogspot.com/-I3VbqY1KmLo/Ts2ZrHYLYNI/AAAAAAAACqk/OE57s_gmAw4/s1600/rss.png'/></a>
<h4><a href='YOUR-LINK-HERE'>Posts RSS</a></h4>
<p>Read my full posts on your favorite feed reader</p>
</li>
<li>

Below this is the search box, followed by blogger widgets like Popular Posts, archives etc. Angry Birds is good to use if you want a simple, functional theme for a kids blog.

Download the Angry Birds Blogger Template

MagPress Blogger Template

noreply@blogger.com (Bhavika) — Thu, 02 Feb 2012 05:50:00 +0000

MagPress is a magazine style blogger template designed by New WP themes and converted to blogger by Lasantha. Its a 3 column theme with dual navigation bar, featured content slider and 4 column footer.

You can add your blog logo from Page Elements, which is the default Blogger method, image size should be 270px width and 43px height.

To configure the top navigation bar, go to Design--Page Elements, create a link list of pages like About, Contact, Advertise, etc., and save the changes. The second menu bar that comes with a drop-down, go to Edit Html and find this code -

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>#039;#

Change the main category (Business, Downloads etc) and sub-categories under 'ul class=children', insert the relevant links and follow the same steps for other default categories. Moving on to the slider, go to Edit Html and find this code -

<div class='fp-thumbnail'>
<a href='#'><img src='http://1.bp.blogspot.com/-JvhwCcqa-rw/TwL46MDfD0I/AAAAAAAACMk/Si0xNf-L0yo/s1600/1.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 1 title</a>
</h3>
<p>
Go to Blogger Edit Html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
</p>

Add the post link, image url, post title and short description in the above code and repeat the steps for remaining slides. The sidebar on the right includes social media icons for users to connect with you, a search box, and tabbed widget to show varied content. Change the tab names from Edit Html -

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>

You can utilise the second sidebar and footer space to show more content. Overall Magpress has a simple layout and can be used if you have lots of content on your site.

Download the MagPress Blogger Template

Nomad Blog Template

noreply@blogger.com (Bhavika) — Tue, 24 Jan 2012 07:02:00 +0000

Nomad is a 2 column portfolio style template created by Web2Feel and converted to blogger by Best Theme. The template has a simple and clean layout with a left sidebar and 4 column footer.

Lets start with the menu bar on top, go to Design--Page Elements, click on edit 'Link list' and create one of your own. To modify the slider, go to Edit Html and search for this code -

<a href='#Link URL'><img alt='' class='slideimg' src='http://2.bp.blogspot.com/-TFvtizGX9xg/TclVwvR0n1I/AAAAAAAAFKk/GPUU-lbgOfM/s1600/beauty-of-nature.jpg' title=''/></a>
</li>

<li>
<a href='#Link'><img alt='' class='slideimg' src='http://2.bp.blogspot.com/-qHPzW7cHKvE/TclWS8IjaLI/AAAAAAAAFKs/5HbetZCZRnI/s1600/nature-photography.jpg' title=''/></a>
</li>

Add details like post url, link, change the image url, title and follow the same steps for all the slides, save the changes. The image size can be around 650px x 430px. The main post area includes boxes with an image, short brief on the post linking to the entire article and comments.

The left sidebar has the blog logo on top, access your Edit Html, find this image url and replace it-

http://3.bp.blogspot.com/-9S6F5BDojXI/TxK1wOJq8kI/AAAAAAAAGoM/BlKu-iOPYp0/s1600/logo.png

Additional content or blogger widgets will display in the sidebar and footer.

Download the Nomad Blog Template

Vito's Restaurant Food Blogger Template

noreply@blogger.com (Bhavika) — Mon, 09 Jan 2012 03:15:00 +0000

Vito's Restaurant is a 3 column food or cooking blogger template designed by Putu Eka Ariyasa. It has a neat food design and main layout, with left and right sidebar, and 4 column footer.

Lets start with the main menu bar on top, to modify the links, create pages like About, Contaact etc from Posting--Edit Pages--New Pages, and the link will appear in the menu bar. To change the slider, go to Design--Edit HTML > Expand Widget Templates, search for this code -

<div id='slider-wrapper'>
<div id='slider'>
<a href='#'>
<img alt='' src='https://lh3.googleusercontent.com/-FD-WqmvrAO0/Tv08QcngXpI/AAAAAAAAAvY/dV2E8BPEifk/h1600/slider-1.jpg' title='#slide-caption-one'/>
</a>

Add image link, alt text, image url, description and save the changes, follow the same steps for the remaining slides. The main post appears below it, at the end of the post is a small box which has the default Blogger social media icons, labels and comments.

The two sidebars and the footer space can be utilised to display labels, categories, archives, or any blogger widgets.

Download the Vito's Restaurant Food Blogger Template

VideoTek Blogger Theme

noreply@blogger.com (Bhavika) — Wed, 21 Dec 2011 14:32:00 +0000

VideoTek is a 2 column template created by Theme Pix and ported to blogger by Deluxe templates. Its a movie-related theme with a featured content slider, social bookmarking icons, pages enabled and an internal search box.

The first menu bar on top is used to display pages, so once you create a page, the link automatically appears on top. The social bookmarking icons next to it can be changed from Edit Html, search for this line, and replace deluxetemplates with your user name -

twitter.com/deluxetemplates

Similarly for facebook, search for -

facebook.com/deluxetemplates

Replace the user name with your facebook id. Now moving on the slider, the code is inserted in Design--Page elements under Featured Posts, click on edit and replace the relevant details in the code, like the image url, link, post headline and description, follow the same steps for all the slides and save -

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/_Ax-O2ayi6kU/TSGsLt4NWOI/AAAAAAAABCg/3Uukug-mi0w/s1600/1.jpg" />
<span><strong><a href="POST_LINK#">Blockquote</a></strong>

<p>Sed dignissim mauris nec velit ultrices id euismod orci iaculis. Aliquam ut justo id massa consectetur pellentesque pharetra ullamcorper nisl...</p>
</span>
</li>

The second menu bar above the slider shows labels automatically. The right sidebar will show different blogger widgets - Archives, Popular Posts, categories etc., as per your choice.

Download the VideoTek Blogger Theme

Creatica Blogger Template

noreply@blogger.com (Bhavika) — Sat, 10 Dec 2011 03:24:00 +0000

Creatica is a nice-looking 3 column blogger template ported from wordpress by Lasantha and originally a creation of Ft Themes. The theme features a full width slider, dual navigation bar, tabbed widget, featured section and social bookmarking icons.

Lets configure the first menu bar, go to Design--Page Elements, click on edit this menu and create a link list like 'Home', 'About', 'Contact' etc., save the changes. For the second menu bar, go to Edit Html and find this code -

<div class='menu-secondary-container'>

<ul class='menus menu-secondary'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

Replace '#' with your links and change the category names, follow the same step for the next lines of code. You can also add sub-categories and save the changes. To display your own header logo, go to Page Elements and click on edit 'header', the size should be 329x60px.

Moving on to the featured content slider, make images of 930x300 px, access Edit Html and search for this code -

<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://3.bp.blogspot.com/-965Vx1uaaeU/Tt7z4WSnImI/AAAAAAAABIo/DqaQnvVzDWc/s1600/1.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 1 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
</p>
</div>

Make these changes in the above code -
- Replace '#' with your post link
- Add image url here - img src='http://3.bp.blogspot.com/-965Vx1uaaeU/Tt7z4WSnImI/AAAAAAAABIo/DqaQnvVzDWc/s1600/1.jpg
- Add the slide title as mentioned above and put in a description below it.

The main column shows summarised posts with 'Read more' link and labels, comments, date stamp shows below the headline. The right sidebar has the search box and tabbed widget, which can be modified from Edit Html. You can change the name of the tabs if you like.

<a href='#widget-themater_tabs-844379150-id1'>Popular Posts</a></li>
<li><a href='#widget-themater_tabs-844379150-id2'>Archives</a></li>

The left sidebar can be utilised to show more blogger widgets - Recent Posts, Comments, About etc. The download link includes Creatica template with and without the slider.

Download Creatica Blogger Template

Adding Alt Text in Images for SEO

noreply@blogger.com (Bhavika) — Thu, 08 Dec 2011 14:16:00 +0000

The newer versions of Blogger and for some the older versions as well, don't offer SEO features by default, you have to manually incorporate it. Like the image alt text that forms an important traffic generator for your blog. Search engines can't read images by itself, it depends on alt text or image description.

Here is how you can add alt text to your images. If this is the image code -

<a href="http://2.bp.blogspot.com/-TADZiK7-x-k/TtbnFClFkZI/AAAAAAAAGSU/8icT7geB2Ew/s1600/lightroom_advanced_photo_blogger_template.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="328" width="400" src="http://2.bp.blogspot.com/-TADZiK7-x-k/TtbnFClFkZI/AAAAAAAAGSU/8icT7geB2Ew/s400/lightroom_advanced_photo_blogger_template.png" alt="Lightroom advanced Photo Blog Template" /></a>

Insert alt at the end of the code and add your image description. This will also help to generate image traffic if you manage to include the right keywords in image alt and at the same time the reader should understand the image content. The text doesn't need to be very long or spammy.

Also while saving or uploading an image ensure that you have renamed the image with the keywords and not just saved it as 'IMG 45672.jpg', this is an effective SEO tip to attract Google image traffic.

In case you are linking the image to another site or content on your blog, then you can add title text after alt, title text would be a short description of the link or the image. Please note that Google uses title text only if the image includes a link.

Magazine Blogger Template for Women

noreply@blogger.com (Bhavika) — Tue, 06 Dec 2011 10:31:00 +0000

Template Women is a magazine style theme created by Templates Novo Blogger. Its a 3 column template with a slider, summarised display of latest posts by categories on the home page and a 3 column footer.

To modify the slider, click on Design-Edit Html and look for the below code -

<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
<span>COLOQUE AQUI A LEGENDA<br/>
</span>
</li>

Add your post url here - 'COLOQUE AQUI O LINK DO POST'
image url here - 'COLOQUE AQUI O LINK DA IMAGEM' and post description in this line - 'COLOQUE AQUI A LEGENDA'. Similarly, follow the same steps for rest of the slides and save the changes. The image size should be 610px (width) and 310px (height).

In this template, the main column displays in a different style, latest posts from selected labels appear in a summarized format. To get this working, go to Design--Edit Html and search for this code -

imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 60; // numero de caracteres do resumo
summaryTitle = 25; //numero de caracteres do titulo
numposts = 3; // numero de resumos por categoria

var contarlabels = 0;
labelname = new Array("Desfiles","Gastronomia","Moda","Beleza");
labeltitle = new Array("Desfiles","Gastronomia","Moda","Beleza");

Add the image url in the link marked in italics, that will appear when there are no pictures in the post. While add the labels (marked in bold) of your choice which you want to show up on the home page.

Also search for this code in Edit Html and add your blog url (marked in bold).

salida + = '<div class="featured">';
salida + = '<h3>' + labeltitle [contarlabels] + '</ h3>';
salida salidainner + =;
salida + = '<b> <a href=" http://templatefeminina.blogspot.com /search/label/' labelname[contarlabels] + + More'?max-results=10">' + LabelName [contarlabels] + '</ a> </ b>';
salida + = '</ div>';
document.write (salida);
contarlabels + +;
}

Replace all the links which are marked in bold with your blog url and add the labels you've selected as well. It will appear in the same order on the home page as the code.

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Desfiles?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Gastronomia?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Moda?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Beleza?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'/>

You can change the number of posts per label as well, in the above code change - max-results=3. While the sidebar includes the normal features like archives, tag cloud, search box etc. This theme also has a 3 column footer space to add more blogger widgets.

Download the Women Magazine Blogger Template

Lightroom Photo Blog Template

noreply@blogger.com (Bhavika) — Thu, 01 Dec 2011 02:49:00 +0000

Lightroom is a lovely photography blog template created by Dzignine. Its a 2 column template that displays photos in gallery format on the home page and sidebar on the left. Lightroom is available in two styles basic and advanced, lets take a look at some of the features.

In the basic version only one image of 740x740 appears on the home page while in the advanced style the entire photo gallery loads. The theme has a switchable background which is easy to change via template designer (in old Blogger interface) or 'Customize' (in new Blogger interface) then locate the 'background' tab. Select a background from blogger's default list or upload your own.

Change blog font colours etc. from Template Designer, although the theme comes with an attractive font - Times New Roman - which enhances the overall look of the blog. In order to insert your own blog logo in the header, go to Layout or Page Elements, click on edit 'Header' and upload your file.

The menu bar appears below the logo in the left sidebar along with blogger widgets like Popular Posts, Archives, Categories. Currently, the blog is aligned to the left, you can center align it by adding the below code after #outer-wrapper { from Edit Html.

Margin:0 auto;

The post pages include social bookmarking buttons and a neat comment form.

Download the Lightroom Photo Blogger template

Gears, an Auto Listing Blogger Theme

noreply@blogger.com (Bhavika) — Thu, 24 Nov 2011 01:39:00 +0000

Gears is a 2 column auto listing template designed by Web2Feel and ported to blogger by Best Theme. The theme features include a slider, dropdown labels/categories bar/

Once you've uploaded the blogger template, edit the slider images from Design--Edit Html and find this code -

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='pslider'>
<div class='spanel'>
<img alt='' class='slideimg' src='http://3.bp.blogspot.com/-MM04qAN48Ro/TsSZX30JE9I/AAAAAAAAGSs/K42XSHuVIgU/s1600/wallpaper-16004-1024x640.jpg' title=''/>
</div>

<div class='spanel'>
<img alt='' class='slideimg' src='http://1.bp.blogspot.com/-IanfKPcAQmk/TsSaxYedmEI/AAAAAAAAGS4/I0TpkpHd7ig/s1600/2010_porsche_boxster-1024x640.jpg' title=''/>
</div>

Replace the image urls (ideally image size should be 1024x640), add alt text and insert the title, follow the same steps for subsequent slides and save the changes. Below the slider is a select category bar where you display model year, maker, body type, price range etc., in dropdown format. To edit the text go to Edit Html and search for this code -

<div id='filter'>
<div class='clearfix' id='browselist'>
<p class='listin'>
<span>Car Condition</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#condition-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='condition-dropdown' name='condition-dropdown'><option value='#'> - Select - </option>

<option value='#Link'>New</option>
<option value='#Link'>Used</option>
</select>
</p>

<p class='listin'>
<span>Model Year</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#model_year-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='model_year-dropdown' name='model_year-dropdown'><option value='#'> - Select - </option>

<option value='#Post Label Link'>2008</option>
<option value='#Post Label Link'>2009</option>
<option value='#Post Label Link'>2010</option>
<option value='#Post Label Link'>2011</option>
</select>
</p>

<p class='listin'>
<span>Maker</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#make-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='make-dropdown' name='make-dropdown'><option value='#'> - Select - </option>

<option value='#Post Label Link'>Aston Martin</option>
<option value='#Post Label Link'>Audi</option>
<option value='#Post Label Link'>BMW</option>
<option value='#Post Label Link'>Dodge</option>
<option value='#Post Label Link'>Ferrari</option>
<option value='#Post Label Link'>Porsche</option>
</select>
</p>

<p class='listin'>
<span>Body type</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#body-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script><select id='body-dropdown' name='body-dropdown'><option value='#'> - Select - </option>

<option value='#Post Label Link'>Convertible</option>
<option value='#Post Label Link'>Coupe</option>
<option value='#Post Label Link'>Roadster</option>
</select>
</p>

<p class='listin'>
<span>Price range</span><br/>
<script type='text/javascript'>
jQuery(document).ready(function($){
$("select#car_price-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script><select id='car_price-dropdown' name='car_price-dropdown'><option value='#'> - Select - </option>

<option value='#Post Label Link'>120k - 130k</option>
<option value='#Post Label Link'>150k - 160k</option>
<option value='#Post Label Link'>160k - 170k</option>
<option value='#Post Label Link'>40k - 50k</option>
<option value='#Post Label Link'>50k - 60k</option>
<option value='#Post Label Link'>60k - 70k</option>
<option value='#Post Label Link'>80k - 90k</option>
</select></p>
</div></div>

Now replace #Post Label Link with your created post label url, and you can change the category options as well. Please note - All the options are labels, so make sure to include the right labels in your post. Although the user can only select one option at a time, there is no multiple selection of labels.

On entering a post there is a snippet giving complete information of the car, so whenever you create a new post you have to paste the below code, under New Post-Edit Html tab and insert the image link, alt text and fill in all the details or modify it if you like -

<img class="singimg" src="http://3.bp.blogspot.com/-MM04qAN48Ro/TsSZX30JE9I/AAAAAAAAGSs/K42XSHuVIgU/s1600/wallpaper-16004-1024x640.jpg" alt="" />

<div class="cardetails clearfix">
<span><strong>Year :</strong> <a href="#Link" rel="tag">2010</a></span>
<span><strong>Body type :</strong> <a href="#Link" rel="tag">Coupe</a></span>
<span><strong>Make :</strong> <a href="#Link" rel="tag">Porsche</a></span>
<span><strong>Model :</strong> 911 GT3</span>
<span><strong>Color : </strong>Yellow</span>
<span><strong>Transmission : </strong>Automatic</span>
<span><strong>Fuel type :</strong> Gasoline</span>
<span><strong>Price :</strong> $130000</span>
</div>

Below the code you can post your entry or add a description. On the top right corner of the slider is the contact bar to include your name, email, phone number etc. To modify the details go to Design--Edit Html, find this code and insert your details -

<div id='contactlist'>
<ul>
<li>Name : <span>Thecarguy</span></li>
<li>Email :<span>carguy@xample.com</span></li>
<li>Phone : <span>1800-GETURCAR</span></li>
<li>Twitter : <span>cartweet</span></li>
</ul>
</div>

The template also includes a single sidebar and 4 column footer to display additional information, put up ads etc.

Download the Gears, an Auto Listing Blogger Theme

Blogger Store, Shopping Template

noreply@blogger.com (Bhavika) — Fri, 04 Nov 2011 08:09:00 +0000

If you are looking to start an e-commerce or shopping site then this is the theme for you. Blogger Store is a better version of the shopping cart template designed by Java Templates and Zoom Template. The template includes dual dropdown menu bar, slider, grid and list style post view, animated shopping cart and more.

Once you have uploaded the theme, you can start with customising the template settings. In order to change the Shopping Cart code, go to Edit Html and search for this -

<script type='text/javascript'>
//<![CDATA[
/* SIMPLE CART SETTING
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = 'rifkiblogger@gmail.com';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
//]]>
</script>

Replace the email id marked in bold, and change the default currency 'USD' to your currency, please check the list of available currency in the download folder and save the changes. To proceed with the navigation bar, edit the links in the top menu from Edit Html and add your links here '#' and related text -

<ul id='top-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Category</a>
<ul class='sub-menu'>
<li><a href='#'>Category 1</a></li>
<li><a href='#'>Category 2</a></li>
<li><a href='#'>Category 3</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul>

Similarly for the second menu bar, modify the links and categories in the below code -

<ul class='nav'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='#'>Product Category</a>
<ul>
<li><a href='#'>Camera</a></li>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Electronic</a></li>
<li><a href='#'>Phone</a></li>
</ul>
</li>
<li><a href='/p/sample-page.html'>Sample Page</a></li>
<li><a href='#'>How To Use ?</a></li>
<li><a href='#'>Get it !</a></li>
</ul>

Coming to the slider that can be used to display your featured products, the default setting will show your latest posts. If you want to show posts by specific label/category, go to Edit Html and search for this line of code -

<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/>

Replace it with this one, and add the label/category -

<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&alt=json-in-script&callback=featured_product"></script>

Before you start creating new posts you need to insert a code in Settings--Formatting--Post Template (this would be in the old blogger interface) in the new one its Settings--Posts.

<div class="item_image">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>

<div class="item_Description">
Descriptions...
</div>

Now you create a post, put in a product title which will also be the product name on ShoppingCart, add an image (preferred size is 140x140), copy the image URL and paste it in the below code, add the product price, description and you are set to publish.

<div class="item_image">
<img border="0" class="item_thumb" src="http://example.com/product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Product description.
</div>

There is an animated shopping cart button in the second menu bar that shows the total items and price, on clicking on it detailed view of the products purchased pops up.

Download the Blogger Store, Shopping Template

Super Clean Blog Template

noreply@blogger.com (Bhavika) — Fri, 23 Sep 2011 07:38:00 +0000

Super Clean Template is a 2 column theme designed by Templates Novo Blogger. It includes some interesting features like the slider, auto display of posts summary on home page, nice hover effects for images and author box.

To modify the horizontal menu bar, go to Edit Html and look for this code -

<a href='Link 01'>Home</a></li>
<li><a href='Link 02'>Tutoriais</a></li>
<li><a href='Link 03'>Portfolio</a></li>
<li><a href='Link 04'>Contato</a></li>

Change 'Link' to relevant page links with the respective text. Moving on to the slider, you can activate it from Edit Html, search for this code -

<div id='galeria'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='POST_URL' rel='1'><img alt='' src='IMAGE_URL'/></a>

<a href='POST_URL' rel='2'><img alt='' src='IMAGE_URL'/></a>

<a href='POST_URL' rel='3'><img alt='' src='IMAGE_URL'/></a>

</div></div>

<div class='paging'>
<a href='POST_URL' rel='1'>1</a>
<a href='POST_URL' rel='2'>2</a>
<a href='POST_URL' rel='3'>3</a>

</div></div>

Simply insert the post urls and image links as mentioned in the above code, images should be 800px × 289px. In the main column summary of posts with thumbnails appear automatically, and a replacement image appears when there is no picture in the post.

The post pages have Twitter and Facebook share button already integrated under the headline and at the end of the post is the author box with your avatar. To edit it, click Edit Html--Expand Widget Template and look for this code -

<div class='post-autor'>
<span class='autor-avatar'><img src='Avatar_url'/></span>

<span class='autor-descriÃ§Ã£o'>

<h4>Title</h4>

<p>Author description.......................</p>

</span>

</div>

Add the title and author description in the above code, save the changes. The sidebar includes the popular posts widget, archives, search, categories etc., you can modify that as per your choice. Overall its a nice template to use to display varied content.

Download the Super Clean Template

Hosting Review Blogger Theme

noreply@blogger.com (Bhavika) — Sun, 11 Sep 2011 06:40:00 +0000

Hosting Review is an original blogger theme created by Deluxe Templates. This 3-column blogger layout has a featured slider, dual menu bar, widget ready sidebars and social bookmarking icons, and is suited for a technology theme.

The header section includes the search box, 468x60 banner ad and social media icons. In order to change the twitter and facebook links, go to Design--Edit Html, search for this code and replace deluxetemplates with your id -

http://www.twitter.com/deluxetemplates

http://www.facebook.com/deluxetemplates

To activate the slider, go to Design--Page Elements, click on 'Edit' Featured posts section, add this code -

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="IMAGE_URL" />
<span><strong><a href="POST_LINK">POST_HEADLINE</a></strong>

<p>POST_DESCRIPTION...</p>
</span>
</li>

<li class="s3sliderImage">
<img src="IMAGE_URL" />
<span><strong><a href="POST_LINK">POST_HEADLINE</a></strong>

<p>POST_DESCRIPTION...</p>
</span>
</li>

<li class="s3sliderImage">

<img src="IMAGE_URL" />
<span><strong><a href="POST_LINK">POST_HEADLINE</a></strong>

<p>POST_DESCRIPTION...</p>
</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

Add the relevant links as mentioned in the code and save the changes. The two sidebars on either side of the main column include various widgets - About us, archive, Popular Posts widget etc., modify them as per your need from Design--Page Elements.

Download the Hosting Review Blogger Theme