Blogger Blog Templates

MXfluity Responsive Blogger Template

Posted by Bhavika On Monday, June 10, 2013 0 comments

MXfluity is a 2 column responsive blogger template with a grid layout. The theme comes with right or left sidebar option, related posts, emoticons in comments section, SEO optimized and its IE 9 compatible.

To configure the menu bar, go to Edit Html and search for this code -

<ul id='navinti'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Comments</a></li>
<li class='dgnsub'><a href='#'>With Sub Menu</a>
<ul class='sub-menu hidden'>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
</ul>

Replace '#' with category links, add sub-categories under 'sub-menu', change the categories and save the changes. The sidebar shows your Recent comments, labels, blogroll, popular posts in a expandable form. You need to configure the Recent comments widget, enter the code below in an HTML widget -

<div id="rcentcomnets"></div>
<script type='text/javascript'>
//<![CDATA[
RecentComment({
numComments:5,
avatarSize:50,
characters:100,
adminBlog:""
});
//]]>
</script>

The template also displays related posts below each article and page navigation to view the next and previous posts.

Download MXfluity Responsive Blogger Template Read More or Download this Blogger Template

Pinfinity

Posted by Bhavika On Thursday, April 25, 2013 0 comments

Looking for template like Pinterest, take a look at Pinfinity, a worpdress theme converted to blogger. It has a clean layout, dropdown menu, social sharing widget and search box.

Configure the dropdown menu from Edit Html, search for this code -

<li class='current_page_item'><a href='#'>Home</a></li>
<li><a href='#'>Page Template</a></li>
<li><a href='#'>Double Width Page</a></li>
<li><a href='#'>Post Formats</a>
<ul>
<li><a href='#'>Standard Format</a></li>
<li><a href='#'>Image Format</a></li>
<li><a href='#'>Gallery Format</a></li>
<li><a href='#'>Video Format</a></li>
<li><a href='#'>Audio Format</a></li>
<li><a href='#'>Quote Format</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
</ul>

Add sub-sections under default 'Post formats', replace '#' with menu item links and save the changes. Each image on the home page includes a comment icon and like button, and the template turns into a single column when you enter the post.

The social sharing icons are placed in the header which you need to modify. Look for this code and add your account links -

<aside class='widget group widget_ci_social_widget'>
<a class='icn twitter' href='https://twitter.com'>Twitter</a>
<a class='icn facebook' href='http://www.facebook.com'>Facebook</a>
<a class='icn pinterest' href='http://pinterest.com'>Pinterest</a>
<a class='icn youtube' href='http://www.youtube.com'>Youtube</a>
</aside>

Download Pinfinity Blogger Template Read More or Download this Blogger Template

Rocket

Posted by Bhavika On Monday, April 22, 2013 0 comments

Rocket is a 3 column magazine theme with interesting features - vertical menu bar with drop-down, featured content slider, social media widget and page navigation widget.

To configure the featured slider, search for the below code in Edit Html -

<section class='slider-wrapper'>
<h2 class='widget-title'>Feature news</h2>
<div class='flexslider' id='home-slider'>
<ul class='slides'>
<li>
<article>
<div class='kp-view'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsI7yxvv5dzPQ6XGRvsYvopxKTpINRdN7_uGpBYxpY8jcG5STwl_nn8bieMVhlNzHOv1ETFzVrnwNTnEaf7XfoDtwtFXcxXLBeejOFp1goO2-UI1X4I8TgKX0cknVHCiI4ktbm7cvpTlCA/s848/slide-1.jpg'/>
<a class='kp-mask' href='#'/>
</div>
<div class='flex-caption'>
<h1><a href='#'>Eight Important Factors of Good Web Typography</a></h1>
</div>
</article>
</li>
<li>
<article>
<div class='kp-view'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpEXJdP3DNkRwLMKxUSuuGTIuj8BmtF39h-JiIB1XsYHlsDfngvXOQnMlpJmxe0HWDE0TPlVwcy4rtoGESFuwqTtE9yqjiYTYSZMdr9vyYiq1K-dK6eK1_VgbpnHRL7vEZTfX6qPxvL3x/s848/slide-2.jpg'/>
<a class='kp-mask' href='#'/>
</div>
<div class='flex-caption'>
<h1><a href='#'>We provide awesome Blogger themes</a></h1>
</div>
</article>

Keep the slider images 848px × 412px and change the image urls (marked in bold), replace '#' with the post links, and change the default post titles. The main column shows post snippets and within each post is an author information box and a neat comment system.

This template has a static menu bar on the left. To modify the links, go to Edit Html and search for this code -

<span class='menu-icon'>Menu</span>
<ul id='main-menu'>
<li class='current-menu-item'><a href='index.html'>Home</a></li>
<li><a href='#'>Features</a>
<ul>
<li><a href='#'>Categories page</a></li>
<li><a href='#'>Single page</a></li>
<li><a href='#'>Search page</a></li>
<li><a href='#'>Element page</a></li>
<li><a href='#'>Typography page</a></li>
<li><a href='#'>404 page</a></li>
<li><a href='#'>Contact page</a></li>
</ul>
</li>
<li><a href='#'>Categories</a></li>
<li><a href='#'>Single</a></li>
<li><a href='#'>Search</a></li>
<li><a href='#'>Element</a></li>
<li><a href='#'>Typography</a></li>
<li><a href='#'>404</a></li>
<li><a href='#'>Contact</a></li>
</ul>
<div class='divider-menu'><span/></div>
</nav>
<div class='clear'/>

Replace '#' with category or page links, add sub-sections under 'Features' and save the changes. The right sidebar includes search box, social sharing icons, popular posts and labels widget.

You also need to configure page navigation widget, go to Edit Html and find the below code, change the numbers, the first one is for 'Number of posts in each page' and the second one is for 'Number of buttons will display.'

<script type='text/javascript'>//<![CDATA[
var posts=6,
num=2,

Download Rocket Blogger Theme

Sunrise

Posted by Bhavika On Wednesday, March 06, 2013 0 comments

Sunrise is a 3 column template with featured content slider, vibrant color scheme, dropdown menu, right sidebar and 3 column footer.

Lets begin with the dropdown menu, go to Edit Html and look for this code -

<div class='content'>
<ul class='sf-menu' id='superfish-1'>
<li><a href='#'>Events</a></li>
<li><a href='#'>Artists</a></li>
<li><a href='#'>About us</a></li>
<li><a href='#'>Gallery</a>
<ul>
<li><a href='#'>Gallery 1 col</a></li>
<li><a href='#'>Gallery 2 cols</a></li>
<li><a href='#'>Gallery 3 cols</a>
</li>
</ul>
</li>
<li><a href='#'>Our blog</a></li>
<li><a href='#'>Contact</a></li>
<div class='clear'/>
</ul>
</div>

Replace '#' with your category links, change the default categories or labels, you can also add sub-categories under the default 'Gallery', and save the changes. Next is the featured slider, in Edit Html search for this code -

<div class='field-content'><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz5anehQUTCrs__4FEbFQVAxO6abltZnOzeXgb-dNqCmChfziMCHExaMsMa-2uNU1331JtWRK61tsp0Fi5dzH1m9RXxpwZMEUL56andjMeV6pwoYCMdpfmo4rJidLW5Tas9LJWNeE5HrD0/s340/1.jpg'/></a></div></div>
<div class='views-field views-field-nothing'><span class='field-content'><div class='jcarousel_bg'>
<div class='jcarousel_indent'>
<div class='views-field-title'>Aenean sodales dapibus.</div>
<div class='clearfix'>
<div class='button'><a href='#'>more</a></div>
</div>

Replace '#' with post link, change the image url, add the post title (marked in bold), and follow the same steps for subsequent slides, in each slide there is also a 'More' link to read the entire post. This theme also includes a neat comment form. In case you want to remove or change the word 'Announcements' above the slider, look for this line in Edit Html -
<h2>Announcements</h2>
Similarly, if you want to remove or change the text 'Upcoming Events' in the main column, look for this code -

<h2>Upcoming events</h2>

Download Sunrise template Read More or Download this Blogger Template

Sumatera Photo Blog Template

Posted by Bhavika On Tuesday, February 05, 2013 0 comments

Sumatera is a 2 column photography blogger template created by Urang Kurai. Its a simple template with minimalist features and a unique way of displaying photos.

The vertical menu bar appears in the left hand sidebar along with the category blogger widget. While the latest posts show up in suspended frames, similar style to Pinterest, and it also has nice hover on effects. Post pages come with social media sharing icons and the in-built commenting system is also very neat.

This template doesn't include a footer column, so there is limited space to display more content.

Download Sumetra Blogger Template
Read More or Download this Blogger Template

Add Pinterest 'Pin It' Button to Blogger Posts

Posted by Bhavika On Monday, December 10, 2012 0 comments

Pinterest, the content-sharing pinboard style social network, is a great way to build traffic and get more people to visit your site. What better way than add Pinterest 'Pin It' button to your blog post.

I tried quite a few codes available on the net, and this one seemed to work well, the rest are either outdated and not working, or if the button works the image doesn't show up, so don't waste your time trying them out. The steps to add the Pin it button, with or without counter, to your blogger posts are mentioned below.

Go to Template--Edit HTML, click on 'Expand Widget Templates' and look for this code, it generally appears twice so take the first one from top -

<data:post.body/>

Now paste the below code after it, if you want the button to appear on top of the post then insert this code above '<data:post.body/>' -

<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
</b:if>

In case the Pinterest script in the above code appears twice in your template, then delete this line from the code -

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

You can adjust the margin (marked in bold) so it fits in properly, you can change the positioning of the button as well, at present its 'beside' indicated in bold, you can change that.

Also the Pin it button can be aligned to 'right', 'center' or 'left' in the above code, change this part -

text-align: left;'

Save the changes and the Pin it button should appear in your blog posts. Once readers click on 'Pin It', they get to select which image to pin, if there are multiple images in your post.

Thanks to Green Lava for this useful tutorial. Read More or Download this Blogger Template

VideoBox

Posted by Bhavika On Tuesday, December 04, 2012 1 comments

Video blogger templates have always been visually appealing. Another one to the list is Video Box, originally a wordpress theme and ported to blogger by Sora. VideoBox has dual menu bar with drop down, featured video slider, 4 column footer, header banner, page navigation widget and social media buttons in each post.

Lets begin with the drop down menu bar, go to Edit html and search for this code -

<nav class='primary'>
<ul class='sf-menu' id='topnav'>
<li><a href='#'><span class='right'>Home</span></a></li>
<li><a href='#'><span class='right'>Videos</span></a></li>
<li><a href='#'><span class='right'>Portfolio</span></a>
<ul class='sub-menu'>
<li><a href='#'><span class='right'>Portfolio 1 col</span></a></li>
<li><a href='#'><span class='right'>Portfolio 2 cols</span></a></li>
<li><a href='#'><span class='right'>Portfolio 3 cols</span></a>
<ul class='sub-menu'>
<li><a href='#'><span class='right'>1st category</span></a></li>
<li><a href='#'><span class='right'>2nd category</span></a></li>
<li><a href='#'><span class='right'>3rd category</span></a></li>
</ul>
</li>

Add your categories etc, replace '#' with the links, and below 'sub menu' you add your sub-categories, you can also add sub sub-categories below 'Portfolio 3 cols', save the changes.

To modify the video slider, its pretty simple, search for this code -

<ul class='slides'>
<li class='item'>
<p><iframe frameborder='0' height='315' src='http://www.youtube.com/embed/Ok2VamxrYAY' width='560'/></p>
</li>

<li class='item'>
<p><iframe frameborder='0' height='315' src='http://www.youtube.com/embed/JitvT29fybE' width='560'/></p>
</li>

Replace the 'YouTube' video link, which you get from the embed code. If this your embed code, take only the link marked in bold -

<iframe width="420" height="315" src="http://www.youtube.com/embed/xdLNMEXWTL8" frameborder="0" allowfullscreen></iframe>

The second part of the code is below it, where you have to add the headline (indicated in bold) and post link (#).

<ul class='thumbs pagination'>
<li>
<span class='youtube-temp'/>
<span class='hover-bg'/>
<a class='title' href='#' rel='0'>Lorem ipsum dolor sit amet</a>
<a class='link' href='#'/>
</li>
<li>
<span class='youtube-temp'/>
<span class='hover-bg'/>
<a class='title' href='#' rel='1'>Fusce et lectus nec neque feugiat</a>
<a class='link' href='#'/>
</li>

The main column will display your latest posts with a facebook like button, so users can instantly share your content. Although when you click on the post, the video doesn't load on the home page, it takes you to the post page where you can watch the clip.

For the page navigation widget to function, you need to make a small change in the below code -

<script type='text/javascript'>//<![CDATA[
var posts=9,
num=2,

Change the number of posts in each page from '9' and '2' is the number of buttons will display.

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

MXfluity Responsive Blogger Template

Pinfinity

Rocket

Sunrise

Sumatera Photo Blog Template

Add Pinterest 'Pin It' Button to Blogger Posts

VideoBox

Archive

Recent Templates

Recent Comments

Video Guides