May 2012

Johny Magstore Shopping Blogger Template

Posted by Bhavika On Wednesday, May 30, 2012 4 comments

Johny Blackstore is a beautiful e-commerce blogger template created by Maskolis. The shopping store template is packed with features like a dual menu bar, slider to display latest products, grid and list view of products on home page, simple panner and zoomer for users to take a better look at the product, social media profiles and more.

Johny Magstore Shopping Blogger Template

Lets start with the horizontal bar on top where the social media icons are displayed along with the search box. To add your links, go to Edit Html and search for this code, and replace '#' with your facebook, twitter etc., account ids.

<ul class='isocial'>
<li><a class='rss' href='#' target='_blank' title='Subscribe via RSS'/></li>
<li><a class='facebook' href='#' target='_blank' title='Become a Fan'/></li>
<li><a class='twitter' href='#' target='_blank' title='Follow Us'/></li>
<li><a class='google' href='#' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='#' target='_blank' title='Watch The Video'/></li>
</ul>

Coming to the first menu bar with drop down, look for this code in Edit Html -

<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>
<li><a class='arrow' href='#'><span>Support</span>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>

Now replace '#' with category links or any page links, this template shows a small tagline below each heading in the menu bar, you can change the text to display, like in the above code its given 'This is' .....'About us', edit it if you like.

Similarly, for the second menu bar, look for this code -

<li><a href='http://feeds.feedburner.com/JohnyTemplate' title='Posts RSS'>Posts RSS</a></li>
<li><a href='http://johnytemplate.blogspot.com/feeds/comments/default' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://johny-darktube.blogspot.com/p/sample-page.html'>Sample Page</a></li>

Change the links, title, category name etc., and save the changes. Coming to setting up the product details, the below code has to appear in each post, instead of copying and pasting everytime, insert it in Settings--Posts and Comments--Post Template click on 'add' and paste the below code -

<div class="product_image">
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:150px; height:150px;">
<img border="0" class="item_thumb" src="product_image.jpg" /></div>
<span class="item_price">$00.00</span> </div>
<div class="product_describe">
Descriptions... </div>

Every time when you to go to create a new post or add a new product, the code will be there in the posting area. You need to change the below details in the code -

src="product_image.jpg" /> - add your product image url, image size should be 300px-300px.
$00.00 - Price of the product
Descriptions... - product description

This template uses simplecart of wojodesign.com and it supports top currency like Dollar, Pound Sterling and Euro. To replace the Paypal account with yours, find the code below -

<script type='text/javascript'>
simpleCart.email = "johnytemplate@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = ["thumb_image" , "Quantity_input" , "Total", "remove" ];
</script>

Replace the text marked in bold with your email id and save the changes.

setting up the featured slider for shopping blogger template

The slider automatically picks up posts based on the label you have selected, to enable that feature go to Layout, click on 'edit' featured content slider, put in the label of your choice, save and the slider will be functioning. The product will be displayed when you hover on the image. Below the slider you will find the Grid and list view icon, you can see how the display changes, its a cool feature of this template.

Shopping cart is on top left which shows the costing details and checkout. The template has 2 columns on either side and also a related products widget at end of each post.

Download the Johny Magstore Shopping Blogger Template

Italian Food Blogger Theme

Posted by Bhavika On Friday, May 25, 2012 0 comments

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

Posted by Bhavika On Thursday, May 24, 2012 1 comments

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

Posted by Bhavika On Thursday, May 17, 2012 0 comments

creating facebook comments application for blogger

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.

filling security code for facebok application

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" />

add facebook application id in blogger html

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 -

adding facebook comments code in blogger html

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

Posted by Bhavika On Tuesday, May 15, 2012 3 comments

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

Posted by Bhavika On Monday, May 14, 2012 0 comments

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

Posted by Bhavika On Monday, May 14, 2012 1 comments

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

Posted by Bhavika On Thursday, May 03, 2012 1 comments

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

Blogger Blog Templates

Free blogger templates for your blogspot blog...

Blogger Store

Lightroom Photo Blog Template

Magpress

Sens

Pop Out Social Bookmarking Widget

Johny Magstore Shopping Blogger Template

Italian Food Blogger Theme

Green Health Blog Template

Integrating Facebook Comments in Blogger

Lifetime Blogger Template

My Movie Blog Template

Gossip Show Blogger Template

Small Biz Blogger Template

Archive

Recent Templates

Recent Comments

Video Guides