Blogger Blog Templates

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.
Read More or Download this Blogger Template

Lifetime Blogger Template

Posted by Bhavika On Tuesday, May 15, 2012 0 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 Read More or Download this 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 Read More or Download this Blogger Template

Gossip Show Blogger Template

Posted by Bhavika On Monday, May 14, 2012 0 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 Read More or Download this Blogger Template

Small Biz Blogger Template

Posted by Bhavika On Thursday, May 03, 2012 0 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 Read More or Download this Blogger Template

Sens Blog Template

Posted by Bhavika On Saturday, March 31, 2012 1 comments

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 Read More or Download this Blogger Template

Add Pop Out Social Bookmarking Widget for Blogger

Posted by Bhavika On Tuesday, March 27, 2012 0 comments

floating pop out social bookmarking widget for blogger

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. Read More or Download this Blogger Template