Blogger Store

Created for bloggers who want to start an e-commerce or shopping site, Blogger Store is a professional looking template compatible with Paypal or Google Checkout

  • Animated shopping cart
  • Dual dropdown menu bar
  • Automatic featured content carousel
  • Grid and list style post view
Blogger store shopping blogger template

Lightroom Photo Blog Template

A beautiful photo blog template that displays photos in gallery format and is available in two styles basic and advanced

  • Switchable background
  • Attractive theme font
  • Integrated social media icons
  • Left sidebar and navigation menu
Lightroom Photo Blog Template

Magpress

Magazine style theme adapted from wordpress

  • Featured slider section
  • Dual menu bar
  • Tabbed widget
  • 4 column footer
Magpress Magazine style Blog Template

Sens

A simple theme with a clean layout

  • Full width featured slider
  • 4 column footer
  • Social widgets integrated
Sens Blogger template

Pop Out Social Bookmarking Widget

A nice-looking pop out social bookmarking widget that allows readers to share their favorite post easily

  • Neat display
  • Easy to install
Add pop out social bookmarking widget for blogger

Light Space Blogger Template edit post

Posted by Bhavika On Thursday, October 21, 2010 5 comments
Light Space is a 3 column magazine-style template designed by Template Mo and converted to blogger by Best Theme.
lightspace corporate business blog template


The social bookmarking icons have been included right on top in the header space, you can modify the links from Edit Html. Simply look for this code -

<ul class='social_network'>
<li><a href='http://www.facebook.com/Your User Name'

Insert your facebook username and save the template, similarly, add your link for Twitter and Linkedin. The space below the horizontal menu bar is divided into two sections, one side you can include the company profile or about us and the other side is the vertical menu bar to display your services, support and so on.

This theme also features a middle bar to showcase additional categories or sections. In order to modify the default text, go to Edit Html and search for this code -

<div class='section_w940'>
<div class='box margin_r30 box_border'>
<h2>Web Design</h2>
<div class='box_image_wrapper'>
<img alt='product 1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPu5X0ekO2Z4Uwg1TjnpaFgTETkvkRrvoXntaZZYpHjPUWakybuAvyodcRh747M0HAO47_P5rx1r21esc61nEPGRBqyqI_Kny4FezD7iWin0YLQsLf80Tx6E1O7hwuJIsuKj9EXegylLs/s1600/folder.png'/>
</div>

Change the text at relevant spots and save the template. Follow the same steps to edit other 2 sections. Below this are customisable banner ads of different sizes.
lightspace blogspot business theme
While in the main column, each post appears in a summarised manner with thumbnails and Read More links. A good feature of this blogger template is the inbuilt related post widget, along with the author box, where you get to display information about the author/writer.

The sidebar includes the Subscribe to email option and social media sites. You can utilise the remaining space to add blogger widgets, videos etc.

Download the Light Space Blogger Template
Read More or Download this Blogger Template

Page Navigation Hack for Blogger edit post

Posted by Clyde On Thursday, October 07, 2010 8 comments
page navigation for bloggerBlogger has had this boring, older post, newer post and home links at the bottom of the page since ages. Many of us have already replaced it with a cool numbering system at the bottom of the page known as page navigation. Please back up your template before proceeding with this hack!

This hack has been given to us by Abu Farhan, not only has he taken the time to give us a hack, he has given us six different designs that we can have to use this hack.

Page Navigation Design 1
Page Navigation Design 1
Page Navigation Design 2
Page Navigation Design 2
Page Navigation Design 3
Page Navigation Design 3
Page Navigation Design 4
Page Navigation Design 4
Page Navigation Design 5
Page Navigation Design 5
Page Navigation Design 6
Page Navigation Design 6

Once you have chosen the design, click on the design number and download the zip file. In the zip file you will find a text file with code. Copy that code, go to your blogger dashboard, design, edit html and look for

]]></b:skin>


Paste the design code before this. You can save your template, your not done yet after that there are a few more steps to do.

Now look for
<b:section class='main' id='main' showaddelement='yes' >
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>


Once you find that, add this script below it. The script is in the text file in a zip folder, there are only two lines that you can edit.

Namely,

var pageCount=10;
var displayPageNum=6;

Where 10 is the number of posts on each page you would like to show and 6 is the number of pages you would like to show.

Once thats done, save your template and proceed to the final step.

If you do not have a label gadget on your blog add a label gadget by

Layout –> Page Elements –> Add Gadget –> Select Labels

Then go back to your Edit HTML and look for the code below

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>


Once you find that code replace it with the code given here.

Save your changes and take a look at your blog with page navigation enabled!
Read More or Download this Blogger Template

Chinese Drop Blog Template edit post

Posted by Bhavika On Thursday, October 07, 2010 11 comments
Chinese Drop is a 2 column skin ported to blogger by Blogger Template Place. Its got a cool design with a simple layout.
Chinese Drop free blog template
The header includes the menu bar with the categories displayed vertically, a twitter icon besides it and subscribe to RSS button is placed below it. In the main column the posts appear in a summarized 'Read More' format and has the default blogger social bookmarking widget integrated in the theme, whereas the post details - date stamp, labels, comments - are at the end of the post.

The single sidebar features a set of social bookmarking icons so your readers could follow your blog and share content on different sites. In order to modify the links, go to Edit Html and look for the following code -

<div id='sidebar'>
<div class='addthis_toolbox'>
<div class='custom_images'>

Below this you can add your facebook, twitter, delicious etc. links or even change the icons if you like. Then you can choose the blogger widgets to be displayed in the sidebar.

Download the Chinese Drop Blog Template
Read More or Download this Blogger Template

Hide Ads on a Particular Post or Page edit post

Posted by Clyde On Monday, September 27, 2010 3 comments
Hide ads on blogger postThis was a hack that I always wanted for a long time, especially since most of us have our ads under the headlines of the post which is a very very hot spot :) It does look ugly to an extent and sometimes you would like a particular post or page to look neat, like a contact page or a page displaying some particular art work you would like to sell.

No one had a hack on blogger until recently Geek Blogger came up with one on his best how to blogger.

First, your gonna have to back up your template prior to making any changes. Then the next step is to locate your ad code. Once you have your ad codes you need to put a div code as shown below.

<div id="MyAds1">
Your Ad Code is Here
</div>


Once that is done you can save your template and then go to the post where you would like to hide the ads, at the end of the post paste the code below.

<script type="text/javascript">

var Ads1 = document.getElementById('MyAds1');

Ads1.parentNode.removeChild(Ads1);

</script>


If you have more than one ad on your page then you can hide the one on top as this method does not work to hide two ads. I do hope you liked our second hack from Blogger Blog Templates. Subscribe to get the next hack delivered to your email!
Read More or Download this Blogger Template

Evander Blogspot Template edit post

Posted by Bhavika On Wednesday, September 22, 2010 4 comments
Evander is a 2 column blogspot theme designed by Web2Feel and the blogger version is brought to us by BestTheme.
Evander Blogspot Template
The highlights of this template are a nice slider,
social bookmarking icons and recent post thumbnail widget.
The slider images appear on a MAC screen with the headline and a brief post summary. You can activate the slider from Design-Edit Html and look for the below code -

<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<a href='#Post url'>
<img alt='' class='slimg' src='http://3.bp.blogspot.com/_MkGBVwDEF84/TJQk-8RNHEI/AAAAAAAAFWU/keGA9OoAyS8/s1600/1.jpg'/>
</a>
</li>

Add your post and image url at relevant spots and save the changes. Below the slider is the horizontal menu bar, you can edit that from Design--Page Elements, edit Link list and post the relevant menu links. The main column is on the right where each post appears in a summarised format with 'Read More' link to the post at the bottom.

This theme comes with social bookmarking icons installed at the top of the right sidebar and below it is the recent posts with thumbnails widget. Change the link from Edit Html, find the below code and replace it with your blog link -

home_page =

&quot;http://www.besttheme.net/&quot;;
</script>

You can also edit the number of post shown there by changing numposts. While for Recent Comments, follow the same steps from Edit Html find the below code and change the url to your blog link -

script src='http://www.besttheme.net/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments'/>

Download the Evander Blogspot Theme
Read More or Download this Blogger Template

Novinture Blogspot Theme edit post

Posted by Bhavika On Wednesday, September 15, 2010 2 comments
Novinture is a magazine style 2 column blogspot theme created by CamelGraph and converted to blogger by Blogger Tricks.
Novinture Blogspot Theme

The template has a clean layout and includes several blogger features, lets go through some of them. Below the header image is the slideshow that displays featured posts along with the thumbnails at the side, the headline and description. Initially make post images of the size 490px X 298px and smaller size ones of 67 x 67, upload them on image-hosting site and go to Edit Html. Search for the following code -

<!-- Featured Area -->
<div id='featured-area'>
<div class='pics' id='s1'>

<!-- FIRST SLIDE START -->

<div>
<img height='298' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6W-9g9fZAJzJaYFDAd9tSaDD1Ycm1UsD2u5r42DAdA9H4-79SzjNT2nKFHh0X4YKC5BmTpvBbQcMydMinTwVv4V2-_El5USs25O2UyqT-cz8C-jPMqUBbHJx4hy0_70kw0mGp6JU8Jk-O/s1600/slide1.jpg' width='490'/>
<div class='excerpt'>
<p><a href='http://www.bloggertricks.com'>This is First Slide Title</a></p>
<p class='excerpt-text'>Description of first Slide goes here.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae...</p>
</div>
<a href='http://www.bloggertricks.com'><span class='feat-overlay'/></a>
</div>

<!-- FIRST SLIDE END -->

<!-- SECOND SLIDE START -->

<div>
<img height='298' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrHkf5ORvZ07G_HDGqjlZdLxfwHMHhGyHYnWOdVlMl06eqPabWt62QwNM2HQPLHEmtKwSD0g-lXomvE-gxRMJK3KHupIGIesk0aVl7dy7Zr2geY3F5g7IzXaODvJAZaWTYWKaJD32rBG2/s1600/slide+2.jpg' width='490'/>
<div class='excerpt'>
<p><a href='http://www.bloggertricks.com'>This is Second Slide Title</a></p>
<p class='excerpt-text'>Description of second Slide goes here.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae...</p>
</div>
<a href='http://www.bloggertricks.com'><span class='feat-overlay'/></a>
</div>

<!-- SECOND SLIDE END -->


<!-- THIRD SLIDE START -->

<div>
<img height='298' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYqd-5NwhekET2qy7E18I56Kcevq2xZlFnitPNfVhDmtacOE1Cys0ksUsaTiMnJi3AXguiQdNBI-dPryvWsWjImbXrAOhH4Lz2aPeAknkpTLe06uhLa0qqPq0Q-pvrPV-J495ZaM0RNdQV/s1600/slide+3.jpg' width='490'/>
<div class='excerpt'>
<p><a href='http://www.bloggertricks.com'>This is Third Slide Title</a></p>
<p class='excerpt-text'>Description of thrid Slide goes here.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae...</p>
</div>
<a href='http://www.bloggertricks.com'><span class='feat-overlay'/></a>
</div>

<!-- THIRD SLIDE END -->

</div>

<div id='slider-control'>
<div class='featitem active'>

<!-- Enter the FIRST thumbnail image URL (67 x 67 px) below -->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtvVtUA1bJaZS1Jd1xZLdfFmFlQHizo041L2bn3JCZV2z_pALfWxdKLu_xKvq3LnJvuIR8oa43JfQAAvlVEJmr4ep_OZiJx6HYSPv9ejhDNNLAdmmxodRlSJU7xjsRzXNkDgao-2c-OCy/s400/slide+1+t.jpg'/>
<span class='order'>1</span></div>


<div class='featitem '>

<!-- Enter the SECOND thumbnail image URL (67 x 67 px) below -->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0KUNf8Wr-gNwp9nqwrDqWFpuqhvO7JwWLR7-pdmFiFxMA4gS-dk7vctsjI6vgReBNK2xkmqc3iez01tApQ5gOiKtcYpfpuVYRTcVcAajEPCGZf1dro2bZz1CLSf0WCtYY9rGTG7eofxQF/s400/slide+2+t.jpg'/>
<span class='order'>2</span></div>


<div class='featitem '>

<!-- Enter the THRID thumbnail image URL (67 x 67 px) below -->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw7vbYIFnwiRmUmNDirHvZoDkdu00fem8bDGu_oi20ThRsKTf0SsY2r5q7SqfSoETFXZ1zwKq5LTVod9-l267jVWZr35oNsIZOD_dqMWGWaZKON2-mOcn4QaTijd9F87OMvmhXaCmDn041/s400/slide+3+t.jpg'/>
<span class='order'>3</span></div>

</div>
<!-- end slider-control div -->
<div class='clear'/>
</div>
<!-- end featured area -->

Replace the jpg links with your image urls, add the post titles, descriptions of each slide (wherever indicated) and save the changes. Your slideshow should be up and running!

Novinture displays automatic thumbnails on homepage and automatic post summaries. Making it easy for the readers to share the post on social networking sites, each post has the Facebook share button and Retweet button adjacent to the thumbnail.

Also enabled in this template is the page navigation feature, which many bloggers are opting for. The single sidebar on the right shows the RSS feed subscription box, an inbuilt search box and the default blogger widgets. That's not it there is also 4 column footer to allow you to put up various widgets.

Download the Novinture Blogspot Templates
Read More or Download this Blogger Template

Blogumus, the Flash Tag Cloud is Back edit post

Posted by Clyde On Tuesday, September 14, 2010 36 comments
blogumus the flash tag cloudOver two years ago Amanda from Blogger Buster ported the wordpress cumulus tag cloud to blogger, this flash based tag cloud was and perhaps still is the best tag looking tag cloud for blogger.

Unfortunately this tag cloud stopped functioning for over 6 months, after numerous comments and emails the tag cloud is still non functional.

But today Blogger Blog Templates is giving you a permanent solution for your blogspot flash tag cloud. If you would like to see how it looks take a look at the tag cloud in the sidebar.

Firstly you would require to download two files, right click on the links below and save target as.

swfobject.js

blogumus.swf

Now that you have these two files, upload it on your hosting account and then save the links.

Go to your blogger dashboard -> design -> edit html

Once your there first back up your template.

Now expand widgets and look for this line:

<b:section class='sidebar' id='sidebar' preferred='yes'>


Immediately after this line paste the code given below, though in some templates you may not be able to paste it immediately and will have to scout for a spot where you don't get an error.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='Your swfobject.js Link Comes Here' type='text/javascript'></script>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so = new SWFObject("Your blogumus.swf Link Comes Here", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>
</b:includable>
</b:widget>


Once you insert this code you need to replace the two links in the code with your own hosting links

Your swfobject.js Link Comes Here

Your blogumus.swf Link Comes Here

Once you change those links you can preview the template, the blogumus widget should appear in your sidebar.

This is very important, if you have an apostrophe or quote character (' or ") in your labels, the tag cloud appears blank.

Certain features of blogumus can be customized:

The width, height and background color can be change from the line below that you will find in the code

"tagcloud", "240", "300", "7", "#ffffff");


where 240 = width, 300 = height and ffffff = back ground color

but you can also have a transparent background where the labels float on your current blog background

look for
//so.addParam("wmode", "transparent");


and remove the
//
and your blogumus will be transparent

if you want to change the text color of the labels look for

so.addVariable("tcolor", "0x333333");


change the 333333 to a color of your choice

if you want to change the text size look for

values='data:labels' var='label'><a expr:href='data:label.url' style='12'>


and change the value 12 to a font size you prefer

if you want to change the speed of the tag cloud rotation, look for

so.addVariable("tspeed", "100");


change the value 100 to what you like

We do hope you can finally get your blogumus tag cloud working again, hope to see you soon! A special thanks to DualTranz for bringing back this widget to life!
Read More or Download this Blogger Template

    Recent Templates

    Recent Comments

    Video Guides