March 2012

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

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.

Queen Photo Blog Template

Posted by Bhavika On Monday, March 26, 2012 0 comments

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

Posted by Bhavika On Monday, March 19, 2012 0 comments

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

Simple Dark Blogger Template

Posted by Bhavika On Friday, March 09, 2012 0 comments

Simple Dark 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 Simple Dark 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

Sens Blog Template

Add Pop Out Social Bookmarking Widget for Blogger

Queen Photo Blog Template

SuperHost Blogger Template

Simple Dark Blogger Template

Archive

Recent Templates

Recent Comments

Video Guides