Blogger Blog Templates

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

Replay

Posted by Bhavika On Wednesday, November 21, 2012 0 comments

Replay is a 2 column wordpress theme converted to blogger by Sora. The template features content slider, right sidebar, social widget, drop down menu, HTML5 music player and page navigation widget.

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

<div class='menu'>
<ul class='menu' id='menu-main-menu'>
<li><a href='#'>News</a>
<ul class='sub-menu'>
<li><a href='#'>Ribbon Slider</a></li>
<li><a href='#'>Fade Slider</a></li>
</ul>
</li>
<li><a href='#'>Artists</a></li>
<li><a href='#'>Events</a></li>
<li><a href='#'>Releases</a></li>
<li><a href='#'>Media</a>
<ul class='sub-menu'>
<li><a href='#'>Gallery</a></li>
<li><a href='#'>Videos</a></li>
<li><a href='#'>Dropdown</a>
<ul class='sub-menu'>
<li><a href='#'>Sample One</a></li>
<li><a href='#'>Sample Two</a></li>
<li><a href='#'>Sample Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

In the above code replace '#' with category links, change the category text, add sub-categories below 'sub-menu', and save the changes. Below it is the featured content slider, keep the image size 400px x 400px. Here is the code to look for in Edit Html -

<div class='ribbon-slide'>
<ul>
<li class='slide-400'><a href='#'>
<img class='fullwidth' height='400' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpXfLgInxVBY3ZvpBDK5_dpiEBN41YDee2gjSeWrXO-JSU3rMSR5qnCMSmzOeGIhxOX2OYtmMAMx3OO0d3nQquJm8y-5eq3WhGcregGm20GFMqjlZJuyrEe4WwOOPrJuc8btqh-D4oVU/s400/1.jpg' width='400'/> </a>
</li>

Replace '#' with the post urls, add the image links and follow the same steps for all the slides. In case you want to add captions for each image then insert this code after '</a>' for each slide.

<div class='ribbon-caption'>
<a class='ribbon-caption-title' href='#'>
<span>Ozone world tour started</span>

An interesting part of this theme is the music player, so your readers can listen to some music while browsing your content. Look for this code in Edit Html and change song.mp3 and Song Title to your favorite tunes -

<div class='playlist'>
<a href='/song1.mp3'>Song Title 1</a>
<a href='/song2.mp3'>Song Title 2</a>
</div>

To configure the social widget in the header, search for this code in Edit Html -

<div class='social-links'>
<a class='facebook' href='#' target='_blank' title='Facebook'/>
<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank' title='Rss'/>
<a class='tumblr' href='#' target='_blank' title='Tumblr'/>
<a class='twitter' href='#' target='_blank' title='Twitter'/>
</div>

Add your social ids (marked in bold) and save the changes. The page navigation widget has to be configured as well, in the below code the first option shows 'number of posts in each page' and the second one shows 'number of buttons will display', change it as per your choice.

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

Download Replay Blogger Theme Read More or Download this Blogger Template

Monaco Blogger Theme

Posted by Bhavika On Wednesday, November 07, 2012 0 comments

Monaco is a 2 column wordpress theme converted to blogger by New Blogger Themes. It has a nice slider, horizontal menu bar and 3 column footer.

Lets begin with the menu bar, to add links go to 'Layout', click on edit link of 'Edit This Menu' widget, and save. Moving on to the slider, modify the default content in Edit Html, search for this code -

<ul class='slides'>

<li>
<a href='ENTER-SLIDE-1-LINK-HERE'><img class='slide-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ZyVWeKFwMUWthZqj8B85FuGf8mJM5O9-MMwG-4Y2N1pb9NaGgZ0T1qhAb6Z_TwuhHKx7E1Em4FnyIz4Cz7t3Tfjk-yqm0BPY2XTN5x_fpONuhz9NmooO6Ip54J4dFCJxYqU80iW1Has3/s1600/slide1-600x400.jpg'/></a>
<div class='flex-caption'>
<h3>Praesent sapien velit</h3>
<p>A Blogger Template by NewBloggerThemes.com. Maecenas imperdiet, ligula et mattis feugiat, elit felis fringilla purus, eu pretium quam justo ac orci. Nunc congue, enim sit amet dignissim malesuada, metus purus aliquet nibh, non euismod urna urna ac libero. Aenean congue enim fringilla elit vulputate ut ornare massa aliquam. Mauris pellentesque odio et justo vehicula ullamcorper. Aliquam laoreet placerat massa vel [...]</p>
</div>
</li>

Enter the post link (as mentioned in the code), add the image url, keep the image size 600px × 400px, add post title and few lines of description. You have to follow the same steps for the remaining slides and save the changes. Below the slider you can add one line intro text to your blog, to change the default line look for this code -

<div class='intro-text'>
Monaco, a free blogger theme from NewBloggerThemes.com
</div>

The main column shows posts in the standard summary format with thumbnail. The single sidebar on the right and 3 column footer will show your different widgets and content.

Download Monaco Blogger Theme Read More or Download this Blogger Template

Insomnia Blogger Template

Posted by Bhavika On Monday, October 08, 2012 0 comments

Insomnia is a 2 column wordpress theme converted to blogger by Sora Templates. The template includes dual menu bar, featured content slider, 3 columns footer and social sharing widget.

The topmost menu bar shows page links automatically, while the second menu bar with dropdown can be configured from Edit Html -

<div class='menu'>
<ul class='fadein drop' id='menu-main-nav'>
<li><a href='#'>Blog</a>
<ul class='sub-menu'>
<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Politics</a></li>
<li><a href='#'>Technology</a></li>
<li><a href='#'>Social Media</a></li>
</ul>
</li>
<li><a href='#'>Content Styling</a></li>
<li><a href='#'>Page Templates</a>
<ul class='sub-menu'>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact Form</a></li>
<li><a href='#'>Full Width</a></li>
<li><a href='#'>Left Sidebar</a></li>
</ul>
</li>

In the above code replace '#' with the relevant category links, add your main categories and the sub-categories will appear under 'sub-menu', once done save the changes.

To configure the featured content slider find this code in Edit Html and make the changes -

<div class='viewport'>
<ul class='overview'>
<li class='featured-post col g4'>
<a class='dt-thumb' href='#'><img class='dt-post-image thumbnail' height='225' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUk-MPL2sQ8lREb2WaDw4yJx3_kWHfMrj_z_Seb8xdjLVp8CnzWIH_2OcMEGzIurul31Tqwu5KsBbKY4X7w266E0s9tiOi1qT5EUqQ3V-VR6jWzgIajvafkqFXnuJDZUeSXrBj3XtFLE/s300/1.jpg' width='300'/></a>
<div class='post-info'>
<h2 class='entry-title'><a href='#'>Under Lights in Astoria</a></h2>
</div>
</li>

Keep the image size 300px × 225px, add the image url, replace '#' with post link, add post title, and follow the same steps for all the slides. Your latest posts will be neatly displayed in the main column, and the post page has the social media icons and a comment form integrated in it.

The single sidebar and footer can be used to display popular posts, archives, recent comments, blogroll etc.

Download Insomnia Blogger Template
Read More or Download this Blogger Template

Galauness, a Minimalist Blogger Template

Posted by Bhavika On Monday, October 01, 2012 0 comments

Galauness is a clean, minimalist 3 column blogger template created by Iksandi. The template includes neat display of post images with cool hover on effects, custom 404 error page and custom lightbox, related posts articles and social media buttons, 3 column footer and is available in two background colours - white and black.

Galauness, a minimalist clean blogger template

You can begin by configuring the social media links above the header, search for this code in Edit Html and add your account ids -

<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Feed</a>
</li>
<li class='icon-facebook'>
<a href='http://facebook.com'>Facebook</a>
</li>
<li class='icon-twitter'>
<a href='http://twitter.com'>Twitter</a>
</li>
<li class='icon-gplus'>
<a href='https://plus.google.com'>GPlus</a>
</li>
<li class='icon-youtube'>
<a href='http://youtube.com'>Youtube</a>
</li>
<li class='icon-flickr'>
<a href='http://flickr.com'>flickr</a>
</li>
<li class='icon-lastfm'>
<a href='http://last.fm'>Last.fm</a>
</li>
<li class='icon-instagram'>
<a href='http://instagr.am'>Instagram</a>
</li>
<li class='icon-skype'>
<a href='http://www.skype.com'>Skype</a>
</li>

Next is the top navigation bar, find this code in Edit Html and make the changes -

<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>category</a>
<ul>
<li><a href='#'>Category 1</a></li>
<li><a href='#'>Category 2</a></li>
<li><a href='#'>Category 3</a></li>
<li><a href='#'>Category 4</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a expr:href='data:blog.homepageUrl + "404"'>404 Error Page</a></li>
</ul>
</div>

Replace '#' with the category links, add sub-categories and save the changes. The main column shows the post images, text and comment on hover, its a lovely effect to have on blogger.

You also need to configure the post date from Settings--Language and formatting, change the Date Header Format and Timestamp Format, this step has to be done in order to avoid any errors. Also make sure you have disabled lightbox and comment form is embedded below post in Settings--Posts and comments, as shown in the image below.

galauness blogger template comment and lightbox setting

The footer also includes several features, like putting up your flickr stream. In order to activate that, paste this code in Layout--Add a gadget and add your flickr username (marked in bold) -

<script src=”http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=USERNAME” type=”text/javascript”></script>

Galauness minimalist clean blogger template footer

Next to Flickr you can also show your latest twitter updates, add the below code in Layout--Add a gadget and change Username with your twitter handle -

<div id=”twitter_div”>
<ul id=”twitter_update_list”></ul>
</div>
<script src=”http://twitter.com/javascripts/blogger.js” type=”text/javascript”></script>
<script src=”http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3″ type=’text/javascript’></script>

Download Galauness 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

Sumatera Photo Blog Template

Add Pinterest 'Pin It' Button to Blogger Posts

VideoBox

Replay

Monaco Blogger Theme

Insomnia Blogger Template

Galauness, a Minimalist Blogger Template

Archive

Recent Templates

Recent Comments

Video Guides