Blogger Blog Templates

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

Prof Owl Blogger Template

Posted by Bhavika On Tuesday, August 23, 2011 1 comments

Prof Owl is a 2 column blogger template designed by WP Themes Expert and coded for blogger by Falcon Hive.

It has a simple layout and colour scheme. The header section is cute with an owl image on the side and the navigation bar below it where the links appear automatically on creating blog pages.

The columns are designed in a notebook format and it has the date stamp pinned on the side. It also includes a custom search box embedded in the sidebar, followed by blogger widgets that look like papers clipped together.

Its a nice theme to use if you have a personal diary blog or on random thoughts etc.

Download the Prof Owl Blogger Template Read More or Download this Blogger Template

Template Pin-Up 2 Blogspot Skin

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

Template Pin-Up 2 is a 2 column blogger skin designed by Templates Novo Blogger. Its an interesting theme with a nice look and feel, and can be used for a celebrity, lifestyle or a beauty blog.

Pin-Up 2 has a dual menu bar each one is placed above and below the header space. To edit the top right menu bar, just create a list of links and add it above the header from Design--Page Elements. For the second bar, access Edit Html and look for this code to modify -

<div id='subscribe'>
<ul>
<li class='link1'><a href=''>Categorias</a></li>
<li class='link2'><a href=''>Fotos</a></li>
<li class='link3'><a href=''>Arquivos</a></li>
<li class='link4'><a href=''>Sites</a></li>
</ul>
</div>


</div>

Place your link between a href='', change the titles - Fotos, Sites etc., and save the changes. The main column area is pretty impressive with the nice Read More icons after each post, and the icons also appear in the sidebar.

This theme includes the related posts widget that appears in the form of a slider, and 3 column footer space.

Download the Template Pin-Up 2 Blogspot Skin Read More or Download this Blogger Template

Add Author Box Below Blogger Posts

Posted by Bhavika On Wednesday, August 03, 2011 3 comments

add author information box below blogger posts

Ever thought of adding a author box at the end of a post giving information about you to your readers? Its a common feature on many wordpress blogs, and now its possible to add it on blogger blogs as well.

Here is a step-by-step instruction to display an author box. Go to Design--Edit HTML, click on expand widgets and search for this code -

]]></b:skin>

Add the following code just above that -

.author_info {
float: right;
width: 573px;
padding: 10px;
border: 1px solid #e0e0e0;
margin-bottom: 15px;
margin-top: 15px;
background: #eee;
}
.author_info h3 {
margin-bottom: 10px;
}
.author_photo {
float: left;
margin: 0 0 0 10px;
}
.author_photo img {
margin-right: 10px;
border: 1px solid #e0e0e0;
}

Now look for this line of code -

<div class='post-footer-line post-footer-line-1'>

Insert the following below it and save the changes -

<b:if cond='data:blog.pageType == "item"'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://3.bp.blogspot.com/_tbHfaj1A058/TSGc3fOc-NI/AAAAAAAAL7A/GU6dmnqINik/s1600/images.jpeg'/></div>
<h3>About the Author</h3> This article is written by: <a href='YOUR_BLOGGER_PROFILE_LINK'><b>YourName</b></a> - who has already written <b>30</b> articles for <a href='BLOG_LINK'>BLOG_NAME</a> YourName is a professional web designer. Catch him on <a href='http://twitter.com/yourID'>Twitter</a>, <a href='Your Facebook URL'>Facebook</a> or <a href='your e mail ID'>email</a> him <br> </br> <br> </br>
YourName's <a href='your web url'>Website</a><br style='clear:both;'/>

</div>
</b:if>

Replace the text where ever mentioned in the above code, add your profile link, facebook, twitter ID and your contact details. You can also fiddle around with the font, spacing, alignment of the box etc in the first code. Read More or Download this Blogger Template

Display Comment Avatar or Profile Images

Posted by Bhavika On Friday, July 29, 2011 2 comments

Adding profile images or better known as 'avatar' to blogger comments is a useful feature already enabled for all the blogger blogs, but its available only if you are using the default Blogger themes.

Now to add avatars in your comment section for customised or 3rd party blogger templates, here's a quick look into this blogger hack.

If you are using the default blogger themes, go to Settings--Comments, scroll down and click on Yes in Show profile images on comments box, save the settings and its done!

In case the profile images don't appear, then simply go to Design--Edit HTML and click the "Revert widget templates to default" link near the bottom of the page. This should do the trick! (This step is only meant for standard blogger templates)

For customised blogger templates, follow these simple steps. Go to Design--Edit Html, click on 'Expand widget templates' box and search for this line of code -

<dl id='comments-block'>

or if your template uses 'div' then replace 'dl' with div.

<div id='comments-block'>

Replace it with this code -

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

The next step will be to find this line of code -

<a expr:name='data:comment.anchorName'/>

And immediately before it, paste this code -

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Save the changes and the profile images or avatars will appear next to the comments. Please note, in case the author comments are highlighted in your template, then search for this code which will appear twice in the template -

<a expr:name='data:comment.anchorName'/>

and insert the above code again.

For anonymous comments

Comment avatars are only displayed if the commentator is using Google or Blogger profile. If the reader is commenting anonymously or using URL, no image will be displayed. To add an image just add a small piece of code to your template.

Search for this line in Edit Html -

]]></b:skin>

and right before it, insert this code, you can edit the width, height and image to be displayed -

/* Avatar */
.avatar-image-container img {
background:url(ADD_DEFAULT_IMAGE_URL);
width:35px;
height:35px;
}

The last step would be to style the profile images so its displayed properly next to the comments, as shown in the top image. Insert this code in addition to the one given above, you can adjust the margin settings as per your preference and save the changes.

.avatar-image-container {
width:35px;
height:35px;
float:left;
margin:0px 10px 5px 2px;
}

Hope you liked this tutorial, and post a comment in case you face any problem to get this working. Read More or Download this Blogger Template

Medusa Blog Template

Posted by Bhavika On Wednesday, July 27, 2011 2 comments

Medusa is a 2 column professional theme adapted from wordpress by and designed for blogger by Lasantha. The theme includes a slider gallery, dual menu bar and 4 column footer.

It has a neat slider with post text on the side of the image. In order to modify the slider, go to Design--Edit Html and find the below code -

<li>
<div class='mytext'>
<a href='FEATURED-ARTICLE-1-LINK HERE'>
<img class='slimg' src='IMAGE_URL'/>
</a>
<h2><a href='#'>SLIDE 1 TITLE HERE</a></h2>

<p>ADD POST DESCRIPTION</p>

<div class='slimeta'>
<a class='rmore' href='FEATURED-ARTICLE-1-LINK HERE'/>
</div>
</div>
</li>

Insert the relevant details as mentioned in the code, similarly edit the rest of the slides and save the changes. This template includes dual navigation bar, to customise the first one, search for this line of code in Edit Html -

<div id='catmenucontainer'>

Now below this you need to add the pages - Home, Contact, about etc.- you want to display and save the changes. While for the second menu bar which also has a drop-down, you need to find this code and in subsequent line of code add the links you want to display -

<div id='foxmenucontainer'>

There is an extra column between the menu bar and main column where you can add more details about your site, work, contact page, etc., in a snippet format. The single sidebar on the right has the internal search box, followed by other widgets. This template also includes a 4 column footer to display more content.

Download the Medusa Blog Template Read More or Download this Blogger Template

Glamour Neue, Photo Blog Template

Posted by Bhavika On Wednesday, July 20, 2011 8 comments

Glamour Neue is a 3 column photo blog template created by DZignine. Its a lovely theme to showcase your photos featuring a slider, thumbnails below it and 3 column footer.

To edit the slider, go to Edit Html and look for the below code -

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

Now replace the first '#' with image link or post link, 'img.jpg' with your image, repeat the same steps for subsequent code. Keep the image width 900 px. When you click on the image it becomes a single column theme, and details like author, date stamp and labels appear below the post headline.

You can tweak the background, text color, font, etc via 'Template Designer'. Also you can change the scrolling speed of the slider from Edit Html, look for 'speed' and change its value. While you can utilise the footer to add more blogger widgets.

Download the Glamour Neue, Photo Blog 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

Vasiliki Blog Theme

Prof Owl Blogger Template

Template Pin-Up 2 Blogspot Skin

Add Author Box Below Blogger Posts

Display Comment Avatar or Profile Images

Medusa Blog Template

Glamour Neue, Photo Blog Template

Archive

Recent Templates

Recent Comments

Video Guides