Blogger Blog Templates

VideoTek Blogger Theme

Posted by Bhavika On Wednesday, December 21, 2011 1 comments

VideoTek is a 2 column template created by Theme Pix and ported to blogger by Deluxe templates. Its a movie-related theme with a featured content slider, social bookmarking icons, pages enabled and an internal search box.

The first menu bar on top is used to display pages, so once you create a page, the link automatically appears on top. The social bookmarking icons next to it can be changed from Edit Html, search for this line, and replace deluxetemplates with your user name -

twitter.com/deluxetemplates

Similarly for facebook, search for -

facebook.com/deluxetemplates

Replace the user name with your facebook id. Now moving on the slider, the code is inserted in Design--Page elements under Featured Posts, click on edit and replace the relevant details in the code, like the image url, link, post headline and description, follow the same steps for all the slides and save -

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaMpzXIVMcinuln6Vz-jhdPKY3x4DtU2lp6RysH1PCC0c2d6xf-zPL83JsfXC4zmcWu4-OWEKMNJnls1LjrhrOJiTrCbrHhiXpFN__FGxLv6x5YSzatCcGJCWOIuQnK-FBzv6VtBNq2ra/s1600/1.jpg" />
<span><strong><a href="POST_LINK#">Blockquote</a></strong>

<p>Sed dignissim mauris nec velit ultrices id euismod orci iaculis. Aliquam ut justo id massa consectetur pellentesque pharetra ullamcorper nisl...</p>
</span>
</li>

The second menu bar above the slider shows labels automatically. The right sidebar will show different blogger widgets - Archives, Popular Posts, categories etc., as per your choice.

Download the VideoTek Blogger Theme Read More or Download this Blogger Template

Creatica Blogger Template

Posted by Bhavika On Friday, December 09, 2011 2 comments

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/AVvXsEhhkZQSsbhUA9wRPfVlExStv2SIlancm5VWWCokFp6wg1n2WN7g0dEh455Fo8lItP_BbZWYyx0HUdm_dHwZoIIgt5cac3OZONJMJcl5sy0Bk9e0dmSzBV9eihXD6ZQQaccw2UGLckMV6fs/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/AVvXsEhhkZQSsbhUA9wRPfVlExStv2SIlancm5VWWCokFp6wg1n2WN7g0dEh455Fo8lItP_BbZWYyx0HUdm_dHwZoIIgt5cac3OZONJMJcl5sy0Bk9e0dmSzBV9eihXD6ZQQaccw2UGLckMV6fs/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 Read More or Download this Blogger Template

Adding Alt Text in Images for SEO

Posted by Bhavika On Thursday, December 08, 2011 1 comments

The newer versions of Blogger and for some the older versions as well, don't offer SEO features by default, you have to manually incorporate it. Like the image alt text that forms an important traffic generator for your blog. Search engines can't read images by itself, it depends on alt text or image description.

Here is how you can add alt text to your images. If this is the image code -

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsQa93gf0nIFYLCy36U6s70Zi8DZjs-SECEyV2l2cRiT3V63eFWnZ85LzwbnbqTaOciUCk71LLyYhGIJXxmqtqAsNXyvnRzgonOB4BtGEqpwKZgiybzTcu8BTQWLrxiVfmotCRgHb5W7Q/s1600/lightroom_advanced_photo_blogger_template.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="328" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsQa93gf0nIFYLCy36U6s70Zi8DZjs-SECEyV2l2cRiT3V63eFWnZ85LzwbnbqTaOciUCk71LLyYhGIJXxmqtqAsNXyvnRzgonOB4BtGEqpwKZgiybzTcu8BTQWLrxiVfmotCRgHb5W7Q/s400/lightroom_advanced_photo_blogger_template.png" alt="Lightroom advanced Photo Blog Template" /></a>

Insert alt at the end of the code and add your image description. This will also help to generate image traffic if you manage to include the right keywords in image alt and at the same time the reader should understand the image content. The text doesn't need to be very long or spammy.

Also while saving or uploading an image ensure that you have renamed the image with the keywords and not just saved it as 'IMG 45672.jpg', this is an effective SEO tip to attract Google image traffic.

In case you are linking the image to another site or content on your blog, then you can add title text after alt, title text would be a short description of the link or the image. Please note that Google uses title text only if the image includes a link. Read More or Download this Blogger Template

Magazine Blogger Template for Women

Posted by Bhavika On Tuesday, December 06, 2011 15 comments

Template Women is a magazine style theme created by Templates Novo Blogger. Its a 3 column template with a slider, summarised display of latest posts by categories on the home page and a 3 column footer.

To modify the slider, click on Design-Edit Html and look for the below code -

<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
<span>COLOQUE AQUI A LEGENDA<br/>
</span>
</li>

Add your post url here - 'COLOQUE AQUI O LINK DO POST'
image url here - 'COLOQUE AQUI O LINK DA IMAGEM' and post description in this line - 'COLOQUE AQUI A LEGENDA'. Similarly, follow the same steps for rest of the slides and save the changes. The image size should be 610px (width) and 310px (height).

In this template, the main column displays in a different style, latest posts from selected labels appear in a summarized format. To get this working, go to Design--Edit Html and search for this code -

imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 60; // numero de caracteres do resumo
summaryTitle = 25; //numero de caracteres do titulo
numposts = 3; // numero de resumos por categoria

var contarlabels = 0;
labelname = new Array("Desfiles","Gastronomia","Moda","Beleza");
labeltitle = new Array("Desfiles","Gastronomia","Moda","Beleza");

Add the image url in the link marked in italics, that will appear when there are no pictures in the post. While add the labels (marked in bold) of your choice which you want to show up on the home page.

Also search for this code in Edit Html and add your blog url (marked in bold).

salida + = '<div class="featured">';
salida + = '<h3>' + labeltitle [contarlabels] + '</ h3>';
salida salidainner + =;
salida + = '<b> <a href=" http://templatefeminina.blogspot.com /search/label/' labelname[contarlabels] + + More'?max-results=10">' + LabelName [contarlabels] + '</ a> </ b>';
salida + = '</ div>';
document.write (salida);
contarlabels + +;
}

Replace all the links which are marked in bold with your blog url and add the labels you've selected as well. It will appear in the same order on the home page as the code.

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Desfiles?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Gastronomia?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Moda?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Beleza?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'/>

You can change the number of posts per label as well, in the above code change - max-results=3. While the sidebar includes the normal features like archives, tag cloud, search box etc. This theme also has a 3 column footer space to add more blogger widgets.

Download the Women Magazine Blogger Template
Read More or Download this Blogger Template

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

Blogger Blog Templates

Free blogger templates for your blogspot blog...

Blogger Store

Lightroom Photo Blog Template

Magpress

Sens

Pop Out Social Bookmarking Widget

VideoTek Blogger Theme

Creatica Blogger Template

Adding Alt Text in Images for SEO

Magazine Blogger Template for Women

Lightroom Photo Blog Template

Gears, an Auto Listing Blogger Theme

Blogger Store, Shopping Template

Archive

Recent Templates

Recent Comments

Video Guides