Blogger Blog Templates

Lightroom Photo Blog Template

Posted by Bhavika On Wednesday, November 30, 2011 6 comments

Lightroom is a lovely photography blog template created by Dzignine. Its a 2 column template that displays photos in gallery format on the home page and sidebar on the left. Lightroom is available in two styles basic and advanced, lets take a look at some of the features.

In the basic version only one image of 740x740 appears on the home page while in the advanced style the entire photo gallery loads. The theme has a switchable background which is easy to change via template designer (in old Blogger interface) or 'Customize' (in new Blogger interface) then locate the 'background' tab. Select a background from blogger's default list or upload your own.

Change blog font colours etc. from Template Designer, although the theme comes with an attractive font - Times New Roman - which enhances the overall look of the blog. In order to insert your own blog logo in the header, go to Layout or Page Elements, click on edit 'Header' and upload your file.

The menu bar appears below the logo in the left sidebar along with blogger widgets like Popular Posts, Archives, Categories. Currently, the blog is aligned to the left, you can center align it by adding the below code after #outer-wrapper { from Edit Html.

Margin:0 auto;

The post pages include social bookmarking buttons and a neat comment form.

Download the Lightroom Photo Blogger template Read More or Download this Blogger Template

Gears, an Auto Listing Blogger Theme

Posted by Bhavika On Wednesday, November 23, 2011 0 comments

Gears is a 2 column auto listing template designed by Web2Feel and ported to blogger by Best Theme. The theme features include a slider, dropdown labels/categories bar/

Once you've uploaded the blogger template, edit the slider images from Design--Edit Html and find this code -

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='pslider'>
<div class='spanel'>
<img alt='' class='slideimg' src='http://3.bp.blogspot.com/-MM04qAN48Ro/TsSZX30JE9I/AAAAAAAAGSs/K42XSHuVIgU/s1600/wallpaper-16004-1024x640.jpg' title=''/>
</div>

<div class='spanel'>
<img alt='' class='slideimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNfi-EFM1ZnmxQn6vGUKKLcx8sSjQ1uMY5JUlOTNdum1XnF3-Ly0UzlqLBhRRTbjCf4RxhPiULZsNZRMPn7H38EYAufg4ylR3b7FS_Zh6tAoY84a4MjrpaDwDIIu2QVvQ0EzR-5A4qJOO/s1600/2010_porsche_boxster-1024x640.jpg' title=''/>
</div>

Replace the image urls (ideally image size should be 1024x640), add alt text and insert the title, follow the same steps for subsequent slides and save the changes. Below the slider is a select category bar where you display model year, maker, body type, price range etc., in dropdown format. To edit the text go to Edit Html and search for this code -

<div id='filter'>
<div class='clearfix' id='browselist'>
<p class='listin'>
<span>Car Condition</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#condition-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='condition-dropdown' name='condition-dropdown'><option value='#'> - Select - </option>

<option value='#Link'>New</option>
<option value='#Link'>Used</option>
</select>
</p>

<p class='listin'>
<span>Model Year</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#model_year-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='model_year-dropdown' name='model_year-dropdown'><option value='#'> - Select - </option>

<option value='#Post Label Link'>2008</option>
<option value='#Post Label Link'>2009</option>
<option value='#Post Label Link'>2010</option>
<option value='#Post Label Link'>2011</option>
</select>
</p>

<p class='listin'>
<span>Maker</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#make-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='make-dropdown' name='make-dropdown'><option value='#'> - Select - </option>

<option value='#Post Label Link'>Aston Martin</option>
<option value='#Post Label Link'>Audi</option>
<option value='#Post Label Link'>BMW</option>
<option value='#Post Label Link'>Dodge</option>
<option value='#Post Label Link'>Ferrari</option>
<option value='#Post Label Link'>Porsche</option>
</select>
</p>

<p class='listin'>
<span>Body type</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#body-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script><select id='body-dropdown' name='body-dropdown'><option value='#'> - Select - </option>

<option value='#Post Label Link'>Convertible</option>
<option value='#Post Label Link'>Coupe</option>
<option value='#Post Label Link'>Roadster</option>
</select>
</p>

<p class='listin'>
<span>Price range</span><br/>
<script type='text/javascript'>
jQuery(document).ready(function($){
$("select#car_price-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script><select id='car_price-dropdown' name='car_price-dropdown'><option value='#'> - Select - </option>

<option value='#Post Label Link'>120k - 130k</option>
<option value='#Post Label Link'>150k - 160k</option>
<option value='#Post Label Link'>160k - 170k</option>
<option value='#Post Label Link'>40k - 50k</option>
<option value='#Post Label Link'>50k - 60k</option>
<option value='#Post Label Link'>60k - 70k</option>
<option value='#Post Label Link'>80k - 90k</option>
</select></p>
</div></div>

Now replace #Post Label Link with your created post label url, and you can change the category options as well. Please note - All the options are labels, so make sure to include the right labels in your post. Although the user can only select one option at a time, there is no multiple selection of labels.

On entering a post there is a snippet giving complete information of the car, so whenever you create a new post you have to paste the below code, under New Post-Edit Html tab and insert the image link, alt text and fill in all the details or modify it if you like -

<img class="singimg" src="http://3.bp.blogspot.com/-MM04qAN48Ro/TsSZX30JE9I/AAAAAAAAGSs/K42XSHuVIgU/s1600/wallpaper-16004-1024x640.jpg" alt="" />

<div class="cardetails clearfix">
<span><strong>Year :</strong> <a href="#Link" rel="tag">2010</a></span>
<span><strong>Body type :</strong> <a href="#Link" rel="tag">Coupe</a></span>
<span><strong>Make :</strong> <a href="#Link" rel="tag">Porsche</a></span>
<span><strong>Model :</strong> 911 GT3</span>
<span><strong>Color : </strong>Yellow</span>
<span><strong>Transmission : </strong>Automatic</span>
<span><strong>Fuel type :</strong> Gasoline</span>
<span><strong>Price :</strong> $130000</span>
</div>

Below the code you can post your entry or add a description. On the top right corner of the slider is the contact bar to include your name, email, phone number etc. To modify the details go to Design--Edit Html, find this code and insert your details -

<div id='contactlist'>
<ul>
<li>Name : <span>Thecarguy</span></li>
<li>Email :<span>carguy@xample.com</span></li>
<li>Phone : <span>1800-GETURCAR</span></li>
<li>Twitter : <span>cartweet</span></li>
</ul>
</div>

The template also includes a single sidebar and 4 column footer to display additional information, put up ads etc.

Download the Gears, an Auto Listing Blogger Theme Read More or Download this Blogger Template

Blogger Store, Shopping Template

Posted by Bhavika On Friday, November 04, 2011 4 comments

If you are looking to start an e-commerce or shopping site then this is the theme for you. Blogger Store is a better version of the shopping cart template designed by Java Templates and Zoom Template. The template includes dual dropdown menu bar, slider, grid and list style post view, animated shopping cart and more.

blogger store shopping template grid view

Once you have uploaded the theme, you can start with customising the template settings. In order to change the Shopping Cart code, go to Edit Html and search for this -

<script type='text/javascript'>
//<![CDATA[
/* SIMPLE CART SETTING
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = 'rifkiblogger@gmail.com';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
//]]>
</script>

Replace the email id marked in bold, and change the default currency 'USD' to your currency, please check the list of available currency in the download folder and save the changes. To proceed with the navigation bar, edit the links in the top menu from Edit Html and add your links here '#' and related text -

<ul id='top-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Category</a>
<ul class='sub-menu'>
<li><a href='#'>Category 1</a></li>
<li><a href='#'>Category 2</a></li>
<li><a href='#'>Category 3</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul>

Similarly for the second menu bar, modify the links and categories in the below code -

<ul class='nav'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='#'>Product Category</a>
<ul>
<li><a href='#'>Camera</a></li>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Electronic</a></li>
<li><a href='#'>Phone</a></li>
</ul>
</li>
<li><a href='/p/sample-page.html'>Sample Page</a></li>
<li><a href='#'>How To Use ?</a></li>
<li><a href='#'>Get it !</a></li>
</ul>

Coming to the slider that can be used to display your featured products, the default setting will show your latest posts. If you want to show posts by specific label/category, go to Edit Html and search for this line of code -

<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/>

Replace it with this one, and add the label/category -

<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&alt=json-in-script&callback=featured_product"></script>

Before you start creating new posts you need to insert a code in Settings--Formatting--Post Template (this would be in the old blogger interface) in the new one its Settings--Posts.

<div class="item_image">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>

<div class="item_Description">
Descriptions...
</div>

Now you create a post, put in a product title which will also be the product name on ShoppingCart, add an image (preferred size is 140x140), copy the image URL and paste it in the below code, add the product price, description and you are set to publish.

<div class="item_image">
<img border="0" class="item_thumb" src="http://example.com/product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Product description.
</div>

There is an animated shopping cart button in the second menu bar that shows the total items and price, on clicking on it detailed view of the products purchased pops up.

Download the Blogger Store, Shopping Template
Read More or Download this Blogger Template

Super Clean Blog Template

Posted by Bhavika On Friday, September 23, 2011 15 comments

Super Clean Template is a 2 column theme designed by Templates Novo Blogger. It includes some interesting features like the slider, auto display of posts summary on home page, nice hover effects for images and author box.

To modify the horizontal menu bar, go to Edit Html and look for this code -

<a href='Link 01'>Home</a></li>
<li><a href='Link 02'>Tutoriais</a></li>
<li><a href='Link 03'>Portfolio</a></li>
<li><a href='Link 04'>Contato</a></li>

Change 'Link' to relevant page links with the respective text. Moving on to the slider, you can activate it from Edit Html, search for this code -

<div id='galeria'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='POST_URL' rel='1'><img alt='' src='IMAGE_URL'/></a>

<a href='POST_URL' rel='2'><img alt='' src='IMAGE_URL'/></a>

<a href='POST_URL' rel='3'><img alt='' src='IMAGE_URL'/></a>

</div></div>

<div class='paging'>
<a href='POST_URL' rel='1'>1</a>
<a href='POST_URL' rel='2'>2</a>
<a href='POST_URL' rel='3'>3</a>

</div></div>

Simply insert the post urls and image links as mentioned in the above code, images should be 800px × 289px. In the main column summary of posts with thumbnails appear automatically, and a replacement image appears when there is no picture in the post.

The post pages have Twitter and Facebook share button already integrated under the headline and at the end of the post is the author box with your avatar. To edit it, click Edit Html--Expand Widget Template and look for this code -

<div class='post-autor'>
<span class='autor-avatar'><img src='Avatar_url'/></span>

<span class='autor-descriÃ§Ã£o'>

<h4>Title</h4>

<p>Author description.......................</p>

</span>

</div>

Add the title and author description in the above code, save the changes. The sidebar includes the popular posts widget, archives, search, categories etc., you can modify that as per your choice. Overall its a nice template to use to display varied content.

Download the Super Clean Template
Read More or Download this Blogger Template

Hosting Review Blogger Theme

Posted by Bhavika On Saturday, September 10, 2011 0 comments

Hosting Review is an original blogger theme created by Deluxe Templates. This 3-column blogger layout has a featured slider, dual menu bar, widget ready sidebars and social bookmarking icons, and is suited for a technology theme.

The header section includes the search box, 468x60 banner ad and social media icons. In order to change the twitter and facebook links, go to Design--Edit Html, search for this code and replace deluxetemplates with your id -

http://www.twitter.com/deluxetemplates

http://www.facebook.com/deluxetemplates

To activate the slider, go to Design--Page Elements, click on 'Edit' Featured posts section, add this code -

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="IMAGE_URL" />
<span><strong><a href="POST_LINK">POST_HEADLINE</a></strong>

<p>POST_DESCRIPTION...</p>
</span>
</li>

<li class="s3sliderImage">
<img src="IMAGE_URL" />
<span><strong><a href="POST_LINK">POST_HEADLINE</a></strong>

<p>POST_DESCRIPTION...</p>
</span>
</li>

<li class="s3sliderImage">

<img src="IMAGE_URL" />
<span><strong><a href="POST_LINK">POST_HEADLINE</a></strong>

<p>POST_DESCRIPTION...</p>
</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

Add the relevant links as mentioned in the code and save the changes. The two sidebars on either side of the main column include various widgets - About us, archive, Popular Posts widget etc., modify them as per your need from Design--Page Elements.

Download the Hosting Review Blogger Theme Read More or Download this Blogger Template

Sonya Blogger Template

Posted by Bhavika On Tuesday, September 06, 2011 4 comments

Sonya is a 3 column blogger theme created by Dzignine. It has a nice sliding effect for featured posts and a neat popular posts widget adjacent to it.

The dual navigation bar are completely customisable from Design--Page Elements, locate the 'navigation' section, click the edit link and add your links in the new pop up window that opens.

You can place a banner ad in the header section. Now moving on the slider, go to Edit Html and look for this code -

<li><a href='#'><img src='#'/></a></li>

Replace the first '#' with your post link and the second '#' with your image url, save the changes. The theme has two sidebars on either side of the main column, the right column comes with the Popular Posts widget, sponsor ads, blog archive etc. While the left sidebar can be used for other blogger widgets.

The theme has two versions - Personal (withour slider and auto read more) and business (with slider and auto read more). You can download both from the link below

Download the Sonya Blogger Template Read More or Download this Blogger Template

Vasiliki Blog Theme

Posted by Bhavika On Sunday, August 28, 2011 0 comments

Vasiliki is a 3 column blogger template originally created by Web2feel and ported to blogger by Best Theme. The template is unique in a way since the posts in the main column are arranged in grids in a brick fashion.

As you can see in the screenshot above, the header section includes the blog title, menu bar and search box. To edit the menu bar, go to Design--Layout and click on add new widget at the top of posting named linklist/ Top Menu/Menu etc, insert link widget to it, and save the changes.

Now for the important part - the main post area - use images which are 600px, in case they larger than that it will be resized automatically. Each grid displays post summaries with the 'Read More' link and number of comments.

The sidebar is widgetized so you can add different content including archive, recent posts, categories, sponsor ads etc.

Download the Vasiliki Blog Theme 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

Lightroom Photo Blog Template

Gears, an Auto Listing Blogger Theme

Blogger Store, Shopping Template

Super Clean Blog Template

Hosting Review Blogger Theme

Sonya Blogger Template

Vasiliki Blog Theme

Archive

Recent Templates

Recent Comments

Video Guides