Blogger Bits

Add "About Author" box below every blog posts in Blogger | How to

Posted on June 27, 2010 by admin

This is a tutorial on adding a simple and clean About Author below every posts in Blogger that only appears on post pages. I am sure that all of us would have seen this feature mostly in WordPress blogs. But now, Blogger users can have this feature too. You may have a look at my latest Blogger template, Charisma where I’ve implemented this feature. Follow easy steps below to add it.

1. Go to Edit HTML page in Blogger and tick the “Expand Widget Templates” checkbox above the top right corner of the template code box.

2. Now find for the ]]></b:skin> code using CTRL+F and replace it with the code below.

/***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

]]></b:skin>

3. Then, search for <div class=’post-footer-line post-footer-line-1′>. Immediately after that, paste the code below.

<b:if cond=’data:blog.pageType == "item"’>
<div class=’author-box’>
<p><img alt=” class=’avatar avatar-70 photo’ height=’70′ src=’http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNHNhq1KSI/AAAAAAAABME/W9v1xQsqxZc/avatar.png‘ width=’70′/><b>About Author</b><br/>
Write anything about you here!<br/></p>
</div>
</b:if>

4. Click “Save” and done.

<b:if cond=’data:blog.pageType == "item"’>….</b:if> is to make sure that the box is only visible in post pages and won’t appear in Home Page. If you want to show your own image, just replace the default image source shown in green colour text in the code with your IMAGE URL.

Posted in Blogger Hacks | 8 Comments

Blogger Template | Charisma

Posted on June 25, 2010 by admin

Charisma is a wordpress theme designed by Cozmoslabs. Attracted to it’s elegance and simplicity, I decided to convert this theme into Blogger. Previously, I’ve converted another theme by Cozmoslabs, { Early Morning }.

The home page has a beautiful slider, where you can display featured blog posts. Charisma theme comes with a unique feature where only post titles are shown in the home page of the blog. This feature for sure will help to increase your blog’s page views and average time on your site.

As mentioned by original author of the theme, Cristian Antohe, it is a well structure theme which highlights the content and gives the user a pleasurable reading experience.

Here are instructions on customizing/editing the Charisma blogger template.

1. Navigation menu

<div id=’nav’>
<div class=’wrap’>
<ul class=’nav’ style=’margin-left:130px;’>
<li class=’home current_page_item’><a expr:href=’data:blog.homepageUrl’ rel=’nofollow’ title=’Home’><span>Home</span></a></li>
<li class=’page_item page-item-3′><a href=’#’ title=’Contact’><span>Contact</span></a></li>
<li class=’page_item page-item-5′><a href=’#’ title=’Services’><span>Services</span></a>
<ul class=’children’>
<li class=’page_item page-item-7′><a href=’#’ title=’Subpage 1′><span>Subpage 1</span></a></li>
<li class=’page_item page-item-12′><a href=’#’ title=’Subpage 2′><span>Subpage 2</span></a></li>
</ul>
</li>
<li class=’page_item page-item-16′><a href=’#’ title=’About’><span>About</span></a></li>
<li class=’page_item page-item-18′><a href=’#’ title=’Page Templates’><span>Page Templates</span></a>
<ul class=’children’>
<li class=’page_item page-item-20′><a href=’#’ title=’One Column’><span>One Column</span></a></li>
<li class=’page_item page-item-21′><a href=’#’ title=’Html Elements’><span>Html Elements</span></a>
<ul class=’children’>
<li class=’page_item page-item-23′><a href=’#’ title=’Sub Menu’><span>Sub Menu</span></a></li>
<li class=’page_item page-item-24′><a href=’#’ title=’Interestingness’><span>Interestingness</span></a></li>
<li class=’page_item page-item-25′><a href=’#’ title=’Birds’><span>Birds</span></a></li>
</ul>
</li>
<li class=’page_item page-item-22′><a href=’#’ title=’Archive Template’><span>Archive Template</span></a></li>
</ul>
</li>
<li class=’page_item page-item-19 current_page_parent’><a href=’#’ title=’Notes’><span>Notes</span></a></li>
</ul>
</div>
</div>

2. Blog title and description.

<div id=’title-area’>
<h1 id=’title’><a expr:href=’data:blog.homepageUrl’ title=’Your Blog Title Here’>Charisma</a></h1>
<p id=’description’>Just another Test Blogs weblog</p>
</div><!– end #title-area –>

3. Featured Content Slider

<div class=’anythingSlider’>
<div class=’wrapper’>
<ul>
<li>
<a class=’alignleft’ href=’#’ title=’Hello world!’><img alt=’rose’ class=’attachment-home-charisma-featured’ height=’205′ src=’http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNOZY32LbI/AAAAAAAABNs/CjgFsk-iXms/s1600/rose.jpg’ title=’rose’ width=’165′/></a><h2><a href=’#’ title=’Hello world!’>Hello world!</a></h2><p>Vel cu causae torquatos concludaturque, quo laudem dolorum et. No duo suats alia omnium, ne debet omnes vim. Has quodsi vituperata eu, nam no ferri nostrud mentitum? An nulla dicant nec, eum possit vivendo alienum ad! Animal scripserit ne mea, ex vel vocibus eloquentiam. Sea aperiam commune te.</p>
</li>

<li>
<a class=’alignleft’ href=’#’ title=’Birds migrate in the winter’><img alt=’DSC_0208′ class=’attachment-home-charisma-featured’ height=’205′ src=’http://4.bp.blogspot.com/_b8IA1ajBJG8/TCNOaLL2EfI/AAAAAAAABN0/k8l7AQz6pFw/s1600/DSC_02081-165×205.jpg’ title=’DSC_0208′ width=’165′/></a><h2><a href=’#’ title=’Birds migrate in the winter’>Birds migrate in the winter</a></h2><p>Nulla vel dolor ac diam dictum rutrum. Praesent feugiat nisl et quam lacinia bibendum. Pellentesque enim augue, mollis in cursus quis, blandit ut eros. Nam metus arcu, adipiscing imperdiet facilisis eu, dictum quis augue. Suspendisse potenti. Mauris odio nulla, euismod fermentum tempus et, mattis et nisi. Nam lorem ipsum, lobortis at ultricies vel, molestie quis [...]</p>
</li>

<li>
<a class=’alignleft’ href=’#'><img alt=’image name’ height=’205′ src=’Image URL’ width=’165′/></a>
<h2><a href=’Post URL’ title=’Post Title ‘>Post Title </a></h2>
<p>Post Description</p>
</li>

</ul>
</div>

</div> <!– END AnythingSlider –>

4. About author box below every blog posts

Go to EDIT HTML and check/tick “Expand Widget Templates”. Then, search for the following bunch of codes. You may replace the default gravatar image with your own image.

<div class=”author-box”>
<img alt=”" class=”avatar avatar-70 photo” height=”70″ src=”http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNHNhq1KSI/AAAAAAAABME/W9v1xQsqxZc/avatar.png” width=”70″ /><b>About Author</b>

Write anything about you here!</div>

Posted in Templates | 10 Comments

Releasing F01.01| Free Premium Girly Blogger Template

Posted on June 21, 2010 by admin

F01.01 is a premium girly WordPress theme by Woothemes specially made for ladies which I decided to convert into Blogger . Unlike any other themes, this theme comes with a full illustrated figure of a female on the left side of the blog making it a perfect theme for girls.

F01.01 comes packed with some other great features too such as twitter integration, custom widgets, multi-level drop-down menu, three-column footer and more!

Customizing the theme

1. Navigation Menu

<div id=’navigation’>
<ul id=’nav’>
<li class=’page_item’><a expr:href=’data:blog.homepageUrl’ title=’Home’>Home<br/><div class=’small’>What do you think?</div></a></li>
<li class=’page_item page-item-51′><a href=’#’ title=”>About<br/><div class=’small’>A bio about you</div></a>
<ul>
<li class=’cat-item cat-item-3′><a href=’#’ title=”>Page 1</a></li>
<li class=’cat-item cat-item-4′><a href=’#’ title=”>Page 2</a>
<ul class=’children’>
<li class=’cat-item cat-item-8′><a href=’#’ title=”>Sub page 1</a></li>
<li class=’cat-item cat-item-8′><a href=’#’ title=”>Sub Page 2</a></li>
</ul>
</li>
<li class=’cat-item cat-item-5′><a href=’#’ title=”>Page 3</a>
<ul class=’children’>
<li class=’cat-item cat-item-7′><a href=’#’ title=”>Sub Page 4</a></li>
<li class=’cat-item cat-item-9′><a href=’#’ title=”>Sub page 5</a></li>
</ul>
</li>
</ul>
</li>
<li class=’page_item’><a href=’#’ title=’Contact’>Contact<br/><div class=’small’>Write anything here!</div></a></li>
<li class=’page_item’><a expr:href=’data:blog.homepageUrl + "feeds/posts/default"’ title=’Subscribe’><img class=’headrss’ src=’http://2.bp.blogspot.com/_b8IA1ajBJG8/TBoCmcgoINI/AAAAAAAABHc/8zHrxkbrdXE/rss.png’/>Subscribe<br/><div class=’small’>Write anything here!</div></a></li>
</ul>
</div>

2. Twitter status- Change the text highlighted below in the codebox with your Twitter username.

</div><!– /.bottom –>

<div class=’profilelink’>
<a href=’http://www.twitter.com/rethnaraj‘ title=’Follow me on Twitter’>Follow me on Twitter</a>
</div><!– /.profilelink –>

</div>

Posted in Templates | 2 Comments

Releasing Urban Elements | A "WordPress to Blogger" theme

Posted on June 18, 2010 by admin

Today I’m releasing another great theme, Urban Elements. It was originally designed by Press75.com for WordPress users. I’ve converted it into Blogger. Blogger version of the theme comes with a customized Post Title font. It was possible to use fonts other than default Blogger fonts with the help of Google Font API. You can read further about it in my previous post, add new fonts to Blogger Blogs with Google Web Fonts.

Some other unique features of this theme are multi-level drop-down menu and four 125 X 125 ads slots.

Customizing the theme

1. Navigation bar

<div id=’navigation’>
<ul id=’nav’>
<li class=’page_item’><a expr:href=’data:blog.homepageUrl’ title=’Home’>Home</a></li>
<li class=’page_item page-item-51′><a href=’#’ title=”>About</a></li>
<li class=’page_item’><a href=’#’ title=’Categories’>Categories</a>
<ul>
<li class=’cat-item cat-item-3′><a href=’#’ title=”>Category 1</a></li>
<li class=’cat-item cat-item-4′><a href=’#’ title=”>Category 2</a>
<ul class=’children’>
<li class=’cat-item cat-item-8′><a href=’#’ title=”>Sub Category 1</a></li>
<li class=’cat-item cat-item-8′><a href=’#’ title=”>Sub Category 2</a></li>
</ul>
</li>
<li class=’cat-item cat-item-5′><a href=’#’ title=”>Category 3</a></li>
<li class=’cat-item cat-item-1′><a href=’#’ title=”>Category 4</a></li>
<li class=’cat-item cat-item-6′><a href=’#’ title=”>Category 5</a>
<ul class=’children’>
<li class=’cat-item cat-item-7′><a href=’#’ title=”>Sub Category 1</a></li>
<li class=’cat-item cat-item-9′><a href=’#’ title=”>Sub Category 2</a></li>
</ul>
</li>
</ul>
</li>
<li class=’page_item’><a expr:href=’data:blog.homepageUrl + "feeds/posts/default"’ title=’Subscribe’><img class=’headrss’ src=’http://2.bp.blogspot.com/_b8IA1ajBJG8/TBoCmcgoINI/AAAAAAAABHc/8zHrxkbrdXE/rss.png’/>Subscribe</a></li>
<li class=’page_item page-item-51′><a href=’#’ title=”>Contact</a></li>
</ul>
</div>

2. Ads slots

Posted in Templates | 10 Comments

Add new fonts to Blogger Blogs with Google Web Fonts

Posted on June 15, 2010 by admin

Adding new fonts to Blogger blogs is made possible with Google Font API. You don’t have to know any programming skills to do this; just get a simple HTML code from Google Web Fonts and add it to your Blogger Template. Then refer to the font in a CSS style. Here is an example:-

I Love Blogger

There are 18 new fonts which can be embedded into any web pages. Here is a screen shot of the list of fonts available in the Google Fonts Directory. Thanks to Browsershots for the shot.

So, follow these easy steps to embed those fonts to your blog.

1. Go to Google Fonts Directory.

2. Click on the font that you are interested.

3. Click on the “Get the code” tab.

4. Tick the checkboxes for the variant of the font that you want to use. Copy the code in the box.

5. Now log into Blogger > Design > Edit HTML. And search for </head> tag.

6. Paste code in the clipboard before the </head> tag.

7. So, whenever you want to use that font in your blog, just wrap your text with these tags. If you use other fonts other than Cantarell, just replace the red colored text below with the name of your font.

If you are good at editing CSS, then you can simply use the font in your CSS font stack like any other fonts.

CSS selector {
font-family: ‘Font Name‘, arial, serif;
}

Browser compalitibity

The Google Font API is compatible with the following browsers:

* Google Chrome: version 4.249.4+
* Mozilla Firefox: version: 3.5+
* Apple Safari: version 3.1+
* Opera: version 10.5+
* Microsoft Internet Explorer: version 6+

For further informations about this Google Font API, visit their FAQ .

Posted in Blogger Hacks | Leave a comment

How to display Feedburner Subcribers count in plain text without chicklet in Blogger?

Posted on May 1, 2010 by admin

I am sure that most of us have a common opinion about the default Feedburner Subcribers count chicklet that it is ugly,out-of-trend, not flexible with theme and etc. No matter what colour you change them, they never look nice. Out there in net, there are bunch of wordpress plugins which enable WordPress users to show the count in plain text. But, its really hard to find one for Blogger. So, here I’m going to provide you a simple javascript code which enables us to show the Feedburner Subscribers/Readers count in plain text without the chicklet.

All you have to do is just copy and paste the code shown below in a HTML/Javascript widget in Blogger. Or, if you are okay with editing blogger templates, add the code wherever you want to show the count.

But, remember to change the “your_feedburner_name” with your feed name. The script will only show the subscribers number alone.

The code below is a modified version of the code with the word “subscribers” and a link to your feed.

<a href=’http://feeds.feedburner.com/your_feedburner_name‘ target=’_blank’><script language=’javascript’ type=’text/javascript’ src=’http://www.codigosblog.net/servidor/contadorfeed.php?uri=your_feedburner_name‘></script> Subscribers</a>

And this is another modified version of the code with RSS image, words “Subcribers” and “Subcribe to our feed”.

<div style=”float:left; margin: 2px 5px 2px 2px; padding: 0; width: 46px;height:46px;background:url(http://4.bp.blogspot.com/_b8IA1ajBJG8/S9xBUyP6abI/AAAAAAAABEQ/UsV1s1oABaQ/feed-icon.png) no-repeat scroll 0pt 0pt transparent;” ></div>
<div style=”padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;”><a href=”http://feeds.feedburner.com/your_feedburner_name” target=”_blank”><script language=’javascript’ type=’text/javascript’ src=’http://www.codigosblog.net/servidor/contadorfeed.php?uri=your_feedburner_name‘></script> Subcribers</a></div>
<div><p style=”padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;”> Subscribe to our feed </p><div></div></div>

And thanks to Codigosblog for the fantastic code.

Be sure to subscribe to Introblogger to be notified of updates!

Posted in Blogger Hacks | 8 Comments

Releasing Lunax | Another free premium blogger theme by Introblogger

Posted on April 20, 2010 by admin

I’m releasing another free premium blogger theme, Lunax. This blogger theme is compatible with all web browsers (eg: Firefox, IE, Google Chrome, and also IE).

Here are some features of this theme:-dark, glassy, 2 columns, rounded corners(only visible in Firefox and Google Chrome), right sidebar, 3-column footer, menu/navigation bar, tabbed sidebar.

Here’s a preview (click to enlarge):

Live Demo

Click here to view a live demo of the theme.

Download Now

Lunax.rar
Lunax.zip

Customizing the theme

1. Menu bar

<div id=’catmenucontainer’>
<div class=’catmenu’ id=’catmenu’>
<ul>
<li><a class=’home’ expr:href=’data:blog.homepageUrl’>Home</a></li>
<li><a expr:href=’data:blog.homepageUrl + "feeds/posts/default"’ title=’Posts RSS’>Posts RSS</a></li>
<li><a expr:href=’data:blog.homepageUrl + "feeds/comments/default"’ title=’Comments RSS’>Comments RSS</a></li>
<li><a href=’http://introblogger.blogspot.com/’ title=’Free Blogging Guide’>Blogger Tutorials</a></li>
<li><a href=’http://introblogger.blogspot.com/2009/12/contact.html’ title=’Free Blogging Guide’>Contact</a></li>
</ul>
</div>
</div>

2. Mini menu bar above header

<div id=’minilink’>
<p>
<a class=’home’ expr:href=’data:blog.homepageUrl’>Home</a>|
<a href=’#'>About Us</a>|
<a expr:href=’data:blog.homepageUrl + "feeds/posts/default"’ title=’Subscribe to RSS Feed’>RSS Feed</a>|
<a href=’#’ title=’Free Blogging Guide’>Contact</a>|
</p>
</div>

3. Tabbed sidebar

The first three widgets in sidebar will be shown in the tabbed sidebar.

Be sure to subscribe to Introblogger to be notified of updates!

Posted in Templates | 38 Comments

You can become a Blogger Template Designer too

Posted on April 8, 2010 by admin

I know that many of the Blogger™ users out there are bored with default Blogger Templates which are pretty old and outdated. Most of the bloggers are using custom Blogger templates which look more professional and attractive. But now, we may have to change our decision and view on Blogger Templates because recently Blogger has announced the launch of Blogger Template Designer to Blogger in Draft, a big first step ever in improving Blogger template designs.

In this post I’m going to tell what Blogger Template Designer is and how it helps you to become a better Blogger designer even though you have no background knowledge about editing XML codes. Before that, may be some of you don’t know what really Blogger in Draft is.

Blogger in Draft is actually an experimental playground of Blogger™ where users can try out Blogger’s latest features. Recently, Blogger™ has launched Blogger Template Designer in Blogger in Draft which brings a new level of customization and design to your blog.

Features

Here, I’ve listed out some of the main features of Blogger Template Designer.

1. 17 new, customizable templates which are divided into 4 major groups, Simple, Picture Window, Awesome Inc, and Watermark.

2. Amazing hundreds of backgrounds images from istockphoto.

3. Modifiable color themes which matches your background images.

4. Layout options which are categorized into Body layout and Footer layout with one, two, three columns and adjustable width.

5. Advanced options which enable you to customize fonts, font colors, sizes and more.

Start using it now

To try it, go to http://draft.blogger.com and log into it using your Blogger/Google account. Then, go to Layout > Template Designer.

You will see a page where you can edit and customize the blogger template according to your taste. And here comes another best feature of it. In normal Blogger Layout option, we have to click preview button once we’ve edited the code, and wait until it loads, then if it contains some errors we have to bang our head to wall and search for the wrong code. But, in Blogger Template Designer, we can simply use a preview tool which automatically refreshes every time we make changes.

All the templates in Blogger Template Designer are preset with tab designs. You can make navigation bars/ menu bars in your templates by using Blogger Pages feature.

All the gadgets which can be previewed in the Blogger Template Designer page can be only moved. To add new gadget or delete a gadget you still have to go to Layout > Page Elements as in normal Blogger.

The new blogger templates also come with Attribution gadget (added to the footer by all new templates) where copyrights are shown and credits for the background images and to designer are given.

Sadly, the Blogger Templates Designer has some of it’s own disadvantages too. Blogger Template Designer is that it is not supported on IE 6. Rounded corners and drop shadows used in some of the templates may not be visible in older versions of some browsers.

Here, I’ve attached a Youtube video about Blogger Template Designer which was released by Blogger.

So, visit http://draft.blogger.com now and become a blogger template designer too. Happy trying.

And if you liked this post, don’t forget to share it with your peers and subscribe to Introblogger Feed.

Posted in Blogging | 6 Comments

How to add comment bubble beside post title(heading) in Blogger/blogspot blog?

Posted on April 6, 2010 by admin

Today, I am going to teach how to add comment bubble beside each post title in Blogger blogs. Usually in default Blogger templates or in the theme that I’m using for my blog, you can see the number of comments shown below the post title is in this form: 3 comments. But, to make it look more professional we can use comment bubble where the comment number is shown inside a “Bubble” like shown in the image below.

I’ve used this comment bubble in my latest template, Pro Indexer. Before start editing your template save a backup of it first. After that, follow these easy steps below.

1. Go to Layout > Edit HTML > Click on “Expand Widget Templates”

2. Search for this code in your CSS. It is usually found at the end of the CSS section.

]]></b:skin>

3. Replace that code with the code below.

/*——Commment Bubble Start——*/

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://2.bp.blogspot.com/_b8IA1ajBJG8/S5tPt3thJoI/AAAAAAAAAy4/GMCCicK-kaw/comments-1.gif) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:0px 0px 0px 0px;
}

/*——Commment Bubble End Introblogger——*/

]]></b:skin>

4. Now search for

and you’ll eventually see the whole bunch of the codes below.

<b:includable id=’post’ var=’post’><div class=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<h2><a expr:href=’data:post.link’><data:post.title/></a></h2>
<b:else/>
<b:if cond=’data:post.url’>
<h2><a expr:href=’data:post.url’><data:post.title/></a></h2>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

5. Immediately next to the <h3 class=’post-title entry-title’>, paste the piece of code below.

<b:if cond=’data:post.allowComments’>
<a class=’comment-bubble’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:post.numComments/></a>
</b:if>

And now the edited code will look like this.

<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’><b:if cond=’data:post.allowComments’>

</b:if>

<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

And you are done. Click save template.

If you don’t like the default bubble that I’ve provided, you can use your own. All you’ve to do is just replacing the source link of the image( red colour in CSS ) and adjusting the width and height (Blue colour in CSS) of the bubble accordingly. If you don’t know to do it, you can leave a comment below this post or send me an email. I will reply to your question in 24 hours time.

Here, I’ve attached a link where you can download a collection of other bubble images, so that you don’t have to waste your time search for bubble images. You can upload those images to Blogger, read about it here.

Download Comment Bubble.zip
Download Comment Bubble.rar

Posted in Blogger Hacks | 18 Comments

Best collection of Girly Style Blogger/Blogspot Templates

Posted on March 20, 2010 by admin

If content is the king, then design is the queen. Normally, female bloggers are very concerned about their blog design or template. They want their blog to be attractive and eye-catching. So, I’ve decided to post a list of Girly-style blogger templates especially for female readers of my blog ( this doesn’t mean guys cannot use those themes, use them if they fit your blog niche . Here you can see my compilation of 28 girly-style blogger templates.