Shopping Cart Free Blogger Theme

Finally a shopping cart e-commerce theme for blogger. Designed by BloggerMint, its a 4 column free template that comes with 'Add to Cart' and 'PayPal Checkout' function for Blogger.

Live Demo

Download Now

Once the template is uploaded, go to Settings--Formatting, set the desired number of posts to be shown on the blog, and then insert this code in Post Template and save the changes -

<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUp-ipzD_U5xIQmcVjjNYMmIDobTsfowppasw8XGzS7UbJ-VwCXQtaNjyqu8H3Pe2cTP152YM_B4IIe3t4a_V3V1F5ifFBqD5QM6IGGxFCPRrCWMOpU2N_sJQZIREzF9UBfErEnPG_nXs/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUp-ipzD_U5xIQmcVjjNYMmIDobTsfowppasw8XGzS7UbJ-VwCXQtaNjyqu8H3Pe2cTP152YM_B4IIe3t4a_V3V1F5ifFBqD5QM6IGGxFCPRrCWMOpU2N_sJQZIREzF9UBfErEnPG_nXs/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><input class="item_add" type="button" value="Add to Cart" /></td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$99.99</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">Your product description here!</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>Stock count here!</td>
</tr>
<tr>
<th><b>Misc</b></th>
<td>Place extra thumbs/images of product here</td>
</tr>
</tbody>
</table>

This code will add the table in each 'New Post', now you have to fill in other information in the table like Item Name, Price and Description, which will be used as values during Paypal checkout. Also remove the default image from the code and add you own (keep the image sizes medium for it to fit properly).

Please not that you would have to remove the 'div class' and 'a href' from the image code, which should look something like this -

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxaQNt1kOGRE8L4cjrFCpCmfsKmpONq8XsPUhdTJgDoOit0JpzCJ5Gi2qxnyO4A3qVXjL0uVXKcZs6yDZTHlM-1HnVhSOKpRPaXFHmEkZ-CFPJ7tvKKmcRldNy0JlluvochafCWDsJndoL/s1600/P1020156.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="240" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxaQNt1kOGRE8L4cjrFCpCmfsKmpONq8XsPUhdTJgDoOit0JpzCJ5Gi2qxnyO4A3qVXjL0uVXKcZs6yDZTHlM-1HnVhSOKpRPaXFHmEkZ-CFPJ7tvKKmcRldNy0JlluvochafCWDsJndoL/s320/P1020156.jpg" /></a></div>

And keep only this code in the table, those are the only changes you need to make and publish your post -

<img border="0" height="240" width="320" src="YOUR_IMAGE.jpg" />

Now moving on to Paypal Email set-up, go to Design--Edit Html and search for this code -

<script type='text/javascript'>
simpleCart.email = &quot;bloggermint@gmail.com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;

Replace the text in bold, which is the Paypal email id, with your own and save the changes.

For those who don't have a Paypal account or credit card, can still purchase the product by filling the contact form. In order to integrate the form, you need to follow the steps below -

1) Sign up for Kontactr, once that is done scroll down the page until you find “Ajax Embed Widget” or “Buttons Code” and get your Kontactr ID, it will look something like this - id=39662, copy it.

2) Access Design--Edit HTML and insert this code right before the closing </head> tag.

<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>

3)Now replace this code in Edit Html, it will appear in the top part of the CSS -

input.item_add{

with the one below -

span.item_add{

4) Similarly, search for this code -

input.item_add {

and change it to one below -

span.item_add {

The next step will be to go to Settings--Formatting, scroll down to the end of the page, you will find 'Post Template' where you have to insert the following code, change the Kontactr id=39662 with yours -

<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUp-ipzD_U5xIQmcVjjNYMmIDobTsfowppasw8XGzS7UbJ-VwCXQtaNjyqu8H3Pe2cTP152YM_B4IIe3t4a_V3V1F5ifFBqD5QM6IGGxFCPRrCWMOpU2N_sJQZIREzF9UBfErEnPG_nXs/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUp-ipzD_U5xIQmcVjjNYMmIDobTsfowppasw8XGzS7UbJ-VwCXQtaNjyqu8H3Pe2cTP152YM_B4IIe3t4a_V3V1F5ifFBqD5QM6IGGxFCPRrCWMOpU2N_sJQZIREzF9UBfErEnPG_nXs/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><span class="item_add"><script type="text/javascript"> id=39662; t=1; ctxt="Order Now"; </script>
<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script></span></td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$99.99</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">Your product description here!</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>Stock count here!</td>
</tr>
<tr>
<th><b>Misc</b></th>
<td>Place extra thumbs/images of product here</td>
</tr>
</tbody></table>

Shopping Cart template also has a 4 column footer and a single sidebar on the right to display other blogger widgets like Archive, Categories, etc. 

Creatica Blogger Template

Creatica is a nice-looking 3 column blogger template ported from wordpress by Lasantha and originally a creation of Ft Themes. The theme features a full width slider, dual navigation bar, tabbed widget, featured section and social bookmarking icons.

Lets configure the first menu bar, go to Design--Page Elements, click on edit this menu and create a link list like 'Home', 'About', 'Contact' etc., save the changes. For the second menu bar, go to Edit Html and find this code -

<div class='menu-secondary-container'>

<ul class='menus menu-secondary'>

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

Replace '#' with your links and change the category names, follow the same step for the next lines of code. You can also add sub-categories and save the changes. To display your own header logo, go to Page Elements and click on edit 'header', the size should be 329x60px.

Moving on to the featured content slider, make images of 930x300 px, access Edit Html and search for this code -

<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiq6ELYOFXQeekilTtcG1dxoTl0Vi5Kh-OqqeKj5jQbSVmwmGyXI4pbf6HiPDDajnf1YMFLcARer9Qneu6dXAiFvTfGgVKZAqzyTUiFo8UvF9Uzb0eW39PX4yHlXjOjsSsO4I7FhNBkBI/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>

Make these changes in the above code -
- Replace '#' with your post link
- Add image url here - img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiq6ELYOFXQeekilTtcG1dxoTl0Vi5Kh-OqqeKj5jQbSVmwmGyXI4pbf6HiPDDajnf1YMFLcARer9Qneu6dXAiFvTfGgVKZAqzyTUiFo8UvF9Uzb0eW39PX4yHlXjOjsSsO4I7FhNBkBI/s1600/1.jpg
- Add the slide title as mentioned above and put in a description below it.

The main column shows summarised posts with 'Read more' link and labels, comments, date stamp shows below the headline. The right sidebar has the search box and tabbed widget, which can be modified from Edit Html. You can change the name of the tabs if you like.

<a href='#widget-themater_tabs-844379150-id1'>Popular Posts</a></li>
<li><a href='#widget-themater_tabs-844379150-id2'>Archives</a></li>

The left sidebar can be utilised to show more blogger widgets - Recent Posts, Comments, About etc. The download link includes Creatica template with and without the slider.

Download Creatica Blogger Template

Capture Photo Template

Capture is a beautiful photo template created by Dzignine. The theme has minimalist white design and clean layout for a photography or portfolio blog.

The home page includes a photo gallery on the left, and on clicking an image it takes you the post page with more information related to the pictures. The blog title, tagline and the navigation bar is neatly placed next to the gallery.

Below it you can insert blogger widgets of your choice. The theme also has a 3-column footer to display your contact details, labels, popular posts etc.

Download the Capture Photo Template

SimplexMag Blog Template

Simplex Mag is a 3-column theme created for blogger by Simplex Design. Its a nice theme to use for a magazine or photo blog.

The template features dual navigation bar with a drop-down menu to display various categories and pages. The latest posts display in thumbnail format on the home page and the headline, label and date appears on hovering over the image.

The template includes the pagination script to set the number of posts on each page. Go to Settings->Formatting and insert the maximum number of posts you want to display on the home page to say 6, then go to Design->Edit Html, find this code -

<script type="text/javascript">
var pageNaviConf = {
perPage: 2,
numPages: 2,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>

Now change perPage value from 2 to 6 or whatever number you choose in the previous step and save the changes. The sidebar has the advertise option to show 125x125 ads from sponsors etc., that can be changed from Design->Page Elements. While the rest of the sidebar content can be customised as per your choice.

SimplexMag comes with a 3 column footer to show different widgets on your blog. Below that is the social bookmarking icons, you can change it from Design->Edit Html and add your account links (text marked in bold) -

<a class="i_rss" href="http://feeds.feedburner.com/Simplex"></a>
<a class="i_twitter" href="http://twitter.com/dinhquanghuy"></a>
<a class="i_facebook" href="http://www.facebook.com/simplexdesignblog"></a>
<a class="i_flicker" href="#"></a>
<a class="top_btn" href="#"></a>

Download the SimplexMag Blog Template

Drakon Blogger Theme

Drakon is a 2 column blogger theme originally created by Web2Feel and adapted to blogger by Blogger Tip and Trick. Its a magazine style free template featuring dual navigation bar with drop down menu and a neat slider.

To change the links in the first navigation bar, go to Design--Edit Html and find this code, below it you can add the category links and sub menu links.

<div id='catmenucontainer'>

While for the second menu bar follow the same steps, look for this code and below it you can insert the relevant categories and sub-categories -

<div id='foxmenucontainer'>

The template has a neat slider to showcase your top or featured content in a thumbnail format with post summary below it. To modify the 5 slides, access your Edit Html, and search for this code, this is the code for Slide 1 -

<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVxZU1Js4gL4a6xSZbH0T_6km9AyUJ0ZOxdj2NSm2ngFuYuHlPD0HGhKeBHcdnlCEyv20j8HX8L4F61qf9uqOusmqeIozeEe3DxcKK93pUhGSaI4rwVW3nISbYa9ayb7ooLRME0GzxABw/s1600/1.jpeg'/>
</a>
<div class='clear'/>
<h2><a href='SLIDE-1-LINK-HERE'>Slide 1 Title</a></h2>
<p>Go to Blogger edit html and replace these slide 1 description with your own words. ...</p>
</div>
</li>

Follow the instructions given in the code for slide 1 and similarly carry out the steps for remaining slides.

The sidebar on the right includes the internal search box, featured video and the default blogger widgets like Recent Posts etc. You will get more space to display your content as this theme also has a 4 column footer. At the bottom of the template after the footer column there are links to 'Subscribe to RSS' and 'Follow on Twitter', so from Edit Html add your twitter id in the code below and save the changes -

http://twitter.com/USERNAME

Download the Drakon Blogger Theme

Simple Box Blogger Theme

As the name goes, Simple Box is a simple white 2 column template designed by Subagya.
Clean layout would be the highlight of this template, which can be customised as per your needs. In the header below the title and blog description comes the search box on the left and the navigation bar is placed on the right, you can experiment with various fonts and colours, in case you don't like the plain look.

In the main column the you have the post headline and below it is the author, date stamp and comments. The post images gets automatically resized, which is a good feature and less hassle; some templates don't have this feature and it can look quite messy until you manually align the images. Simple Box also comes with 'Read more expandable post' feature. The sidebar too has plain white background, and a dotted line around each feature box. This template also comes with a 3 column footer section to add more cool features on your blog. You can use this template for a personal blog.

Download the Simple Box Blogger Theme

Download the Simple Box - without Read More - Blogger Theme

Revolution Church Blogger Skin

Revolution Church is a magazine style wordpress theme designed by Brian Gardner and ported to blogger by Bloganol.
This black and white, 3 column template has a professional layout consisting dual drop down menus both with sub-categories. So Revolution theme is perfect if you have many sections on your blog. The template has a day and date widget displayed on top left which changes automatically, and on its right is subscribe to posts and comments icon. Below that is the header with a banner ad integrated.

One of the menu bars have the inbuilt site-search engine, which can be customised to google search. The main column has a white background for the posts, and the author, labels, time and comments appear below the headline.

Revolution Church also comes with an ad spot between two posts and there are two more spots for advertising in the sidebar, this template is optimized for advertising. The two columns in the sidebar can be used for other widgets, where the header appears in a black box.

Revolution Church is a popular wordpress theme, and for blogger, although its modified, can be used if you write on varied topics.

Download the Revolution Church Blogger Skin

Awake Blogger Template

Here we have some original themes for Blogger users. Created by Pocket, Awake is a the original blogger template with nice geometric designs and neat layout.
The header of the 2 column template is quite simple, so you can easily customize it. The main column starts with wavy and geometric decoration, so your first post looks attractive, and after that each post appears in a simple manner.

The template would have probably looked better if the same design was repeated at the start of each post., because then it gets a bit plain due to the white background. The second column is nicely decorated to add the other widgets to your blog. That's not the end, Awake blogger template also has footer columns, each of the three columns are well spaced out, very few 2 column templates have footer space as well. Overall, its a nice theme to awaken your readers!

Download the Awake Blogger Template

Aerodrome Blogger Theme

WP Blogger Themes has converted a nice wordpress theme called Aerodrome to blogger. The original author of the theme was Joe Fischler of TheBuckmaker.
Aerodrome is a 3 column template that comes with modifiable and transparent background image, so you can choose an image that suits your blog theme. The template has two navigation bars - above and below the header - and nowadays many templates come with this feature.

The header comes with an ad space and RSS icon on the extreme right. The main post structure is designed in the form of separate boxes for each post, with the date stamp and comments appearing separately on the left.

While the second column also contains ad space, although the second and third columns are a bit narrow and have fixed width. The third sidebar is transparent, which gives a nice effect to the theme.

Download the Aerodrome Blogger Theme