Blogger Widgets

Blogger Launches a new Template Designer

2010-03-11T13:49:04-08:00

Blogger has now launched a new Template Designer along with 15 new default templates. All of these templates are highly customizable Each of them comes with different layouts and you can modify and redesign your template without much knowledge of CSS and HTML

How To switch to a new Template and use the Template Designer

1.Login to Http://Draft.Blogger.Com

2. Click on the Layout Tab and you will find a new Template Designer Tab there

3. Click that and you will be taken to the new Template Designer.

4. There you will find 15 new templates to choose from . You can see the Live Preview there.

5. The Template designer comes with a cool set of customizers.There are plenty of images to choose from. You can change the layout(1 column, 2 column etc) and you can change almost everything on the template.

You can adjust the Width of the Columns by using simple Sliders and adjust the colours fonts etc.

So just try it out. you are gonna love it..

Hope to see more and more templates being coded in such a way that they can be edited using the designer..

Add Google Buzz Buttons To Blogger Blog

2010-03-08T10:43:50-08:00

Google Buzz is a social tool from blogger and it is much similar to twitter and facebook :). Google Buzz is a new way to start conversations about the things you find interesting. You can read more about Google Buzz at the official Google Blog . You might have seen the Google Buzz buttons on Mashable. This one is similar but doesn’t produce any share count.

You can see a demo of this button in this post page. :) .

To get the Buzz button on your blog, posts follow these steps.

1. Login to your Blogger Account and navigate to Layout > Edit HTML and Expand your widget templates.

2. This is the Google Buzz it Code. Copy it. If you want to use some other Google buzz button image , then you can do that by changing the image link in the code [http://i48.tinypic.com/idyc04.png]

<div style="float:right;padding:4px;">
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
</div>

3.Now find this piece of code in your template

and immediately after that place our Google Buzz it Code and you are done :)

If you were unable to find this code in your template,then look for the first occurrence of

<data:post.body/>

and immediately before that, place our Google Buzz it Code.

4.Save your template and see the results.

Google Buzz Button with Share Count

Njuice.Com has come up with a set if cute buzz buttons with the share count. To install it use the following code[This code should be placed using the same method specified in step 3 :)]

<div style="float:right;padding:4px;">
<script type='text/javascript'>
njuice_buzz_url = '<data:post.title/>';
njuice_buzz_title = '<data:post.url/>';
njuice_buzz_share = 'reader';
</script>
<script type='text/javascript' src='http://button.njuice.com/buzz.js'/>
</div>

For alternate styles you can add njuice_buzz_size = 'small'; or njuice_buzz_size = 'simple'; just below njuice_buzz_share = 'reader'; You can see the different Styles and customizations at the Njuice Webiste .

Add Signature to Blogger Blog

2010-02-28T20:13:03-08:00

You might want to add a custom automatic signature below each of your blog posts. This would be more useful if you are running a Team Blog with multiple authors. You can use unique signatures for each author.The same can be done on a single author blog also :)

Adding Signature to Single Author / Multi Author Blogger Blogs

1. Create a Signature using Photoshop or some online Generators like My Live Signature

2. Upload this signature image to blogger.Once its uploaded hit preview and copy the image location(Note down the URL of the image).

3.Now Go to Layout > Edit HTML and Expand your Widget Templates

4.Now Find

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

If you cant find it then try finding this one

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

or this one

<data:post.body/>

a) If you are using a Single author blog, paste the following code below the code you found

Code should be edited with your signature image URL

b) If you are on a Team Blog, paste the following code just below the code you found

<b:if cond='data:post.author == "Author1Name"'>
<img src='url_of_author1_signature_image' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == "Author2Name"'>
<img src='url_of_author2_signature_image' style='border:0px;'/>
</b:if>

If you have more number of authors, you can repeat the blocks accordingly(here i have mentioned 2 blocks[blue and brown] one for each of the two authors).Codes should be edited with the author names and the signature image urls.

5.Save your template and you should see the signature in action :)

Blogger FTP to Custom Domain Migration

2010-02-28T20:17:18-08:00

Blogger has officially announced that it would be shutting down the FTP publishing feature on March 26 2010. So the existing FTP publishers are advised to move onto Blogger Custom Domains.If you are not currently using the FTP publishing option, you can just skip this tutorial :)

Blogger has already posted about the advantages of custom domains.

Where do you currently publish your FTP blogger blog ?

1.If you are publishing at a root level domain or sub-domain, then the things are pretty easy. (eg. www.yourblog.com or blog.yourdomain.com).

2.If you are publishing your blog at some subfolder within your domain or subdomain(www.yourdomain.com/blog), then you can no longer host your blog at that address, because Custom Domains can be setup at root domain or sub-domains only.Blogger will soon release a migration tool which will help you in properly redirecting such blogs.

Can i get rid of my web-host?

If you are hosting your blog at a root level domain or sub-domain and not inside a directory and if you are have not published any images via FTP(images are hosted on other sites like flickr), then you no longer need a web-host.

Migrating www.yourblog.com (FTP) to www.yourblog.com (Custom Domain)

Note:- The following steps can also be used to migrate a sub-domain from FTP to Custom domain(ie blog.yourdomain.com from FTP to Custom Domain). This method cant be used for migration of a blog located at www.yourdomain.com/blog or subdomain.yourdomain.com/blog

1. When you move your blog to a custom domain, you will have to move all the images to a different sub-domain on your server

2.Create a new sub-domain like files.yourblog.com and move all your images to this sub-domain (For example www.yourblog.com/uploaded_images/image1.jpg should now be accessible at files.yourblog.com/uploaded_images/image2.jpg)

3.If you are using a shared hosting service, ask your host to create a Canonical Name(CNAME) record for www with value ghs.google.com

(DNS changes are cached at many levels and your ISPs may take time to get in sync with the 13 root level domain name servers. So the changes may take time :)

4.Once your host is done with it, Log in at your Blogger Dashboard and navigate to Settings > Publishing

5.Opt For Switch to: Custom Domain (Point your own registered domain name to your blog) and switch to advanced settings

6.Type your new domain/subdomain there and in the missing file host option type in files

type the captcha and save the settings. If everything goes right, your blog has now been successfully moved to the custom domain.

What does the Missing files host do?

When blogger is not able to find a file like www.bloggerplugins.org/uploaded_images/image1.jpg , it will try to find it at files.bloggerplugins.org/uploaded_images/image1.jpg [Click on the link to see it in action]

If you are hosting your blogger blog on a sub-directory, then wait for the Blogger FTP migration tool(it will be out in a couple of weeks). Once you are done with the migration tool, just follow the steps 4-6.You wouldn't need to use a missing files host in that case.

If you have any questions about the migration, leave your questions in the comments section.

Blogger Pages are finally out

2010-02-28T20:25:36-08:00

Blogger has now released the pages feature just like in Wordpress blogs. You can use these pages for about me, contact me etc. The blogger pages are more or less like the blogger posts. But these pages wont appear in the blog archives and the blog feeds.

How to create a Blogger Page?

1. Login to your Blogger Account

2. In the posting Tab you will find an Edit Pages option

3.Click on the New Page button and you will get a new page editor(same as the post editor that you normally use)

4.You can make the page, in the same way as you create a post.If you want to enable commenting on the page, then you can do so from the post options

5. When you hit the Save And Publish Page button, you will be asked if you would like to add the Page Gadgets onto your blog

You can add the page gadget on the sidebar or as Top navigation Tabs.These widgets may not properly sync with your blog template.So i would advise you to choose the No Gadget option and add the links manually to your blogger template. You can obtain the links to the newly created pages from the Edit Pages Tab.

If you opt to add any of Pages gadget, then you will get an easy interface to add the page links to your blog. (now available on draft.blogger.com only) Here is what the Gadget options will look like

Limitations

1. You can only create a maximum of 10 pages.

2. Separate templating for pages would be a little too difficult(but not impossible :) )

3. The Static Pages are not included in the Post Exports till now.(at the time when this post is made)

Advanced options.

If you are familiar with the usage of blogger’s conditional tags and want to do something special with the pages, then you can use the following conditional tag for that

<b:if cond='data:blog.pageType == "static_page"'>
When condition is true this will be done
</b:if >

eg: If you want to hide the sidebar on the Static Pages, then you can use these conditional tags properly to implement that

Here is the incomplete sample code for the same

<b:if cond='data:blog.pageType == "static_page"'>
<style type="text/css">
.sidebar-wrapper{display:none;}
</style>
</b:if >

This code should be placed above </head> in your template.

you will have to add some more CSS definitions to make it complete(you should increase the width of the post area.. ) these will be different from template to template. So you will have to figure it out :)

So are some of my Blogger Pages. – Subscribe , Contact Me

Misbehaviour

1. If you are using the automatic post summaries hack, then your pages might not be properly displayed. I have updated the Automatic Post Summaries Trick so that it does not conflict with the static pages. So if you are using an older version of this trick, then do update

2. If you are using some trick to hide the post contents on non-post pages,then also you might end up with problems on your new Static Blogger Page. You can either undo the trick or update the codes properly to avoid conflicts :)

Facebook Share Count Buttons For Blogger

2009-10-29T10:43:34-07:00

Facebook has now officially introduced the Retweet like buttons for your blogs or sites. These buttons look much similar to the Retweet buttons by Tweetmeme. Facebook has 5 styles of Sharing buttons. Here we will see two of them.

Adding a Facebook share count button will show a neat count of how many times your blog post has been shared on Facebook.

Facebook Share Button Style 1

Code for Facebook Share Button Style 1

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Style 2

Code for Facebook Share Button Style 2

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Compact Style 1

Code for Facebook Share Compact Button Style 1

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Compact Style 2

Code for Facebook Share Compact Button Style 2

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

How to install Facebook Share Count Button on your Blogger Blog?

1.Select one of the Share Button Styles and copy the Corresponding Code.

2.Now login to your Blogger Dashboard and navigate to Layout > Edit Html and expand the widget templates

3.Find this piece of code

and immediately after that place our Facebook share button code(that you copied)

If you were unable to find this code in your template,then look for the first occurance of

<data:post.body/>

and immediately before that paste our Facebook Share button code(that you copied).

5.Save the template and you should get a facebook share count button near each of your blog posts.

If you liked this post and if it helped you in implementing the facebook buttons, then please consider sharing this post on Facebook using the button on the top-right of the post :)

Link: Additional Share Button Styles on the Facebook Developers Wiki

Permalink :Facebook Share Count Buttons for Blogger

Create a Facebook Fan Page for your Blog

2010-02-11T05:33:53-08:00

Facebook is a great Social Networking Site to promote your blog or brand. Most of the major brands do have a Facebook Fan Page. Here are some examples of Facebook Fan pages – Coca Cola FB Fan Page , Mashable FB Fan Page. Are you impressed and wanna create one for your blog? I too wanted to create one and i finally made it. Here is the link of my Facebook Fan Page . So lets start making our own Facebook Fan Page for our blog.

1.Go to the Create Fan Page Link on Fabebook

Select Brand, Product, or Organization > Website . Type the Name of your Fan Page and agree to make it public. Now just hit the Create Button and your Fan page would be created :)

2.On the Next Page, select the options Change picture and Edit Information and you what is to be done there :)

3.Now the most important thing that you might want is to automatically import your blog posts to the Fan Page .From the Tabs, Click on the + and Opt for Notes.

On the next screen Opt to Write a New Note

4.You will see an Editor and some icons at the Top . Click on the Notes Icon at the top.

5.On the Next Page, opt for Import a blog

6.On the next screen, type in your blog URL, and agree to the agreement and Click Start Importing

If this gives some error try using the url http://yourblog.blogspot.com/feeds/posts/default

7.On the Next page, Confirm the Blog import

8.After confirming, all your blog posts will be imported to the fan page. Now click on your Fan Page Link and get back to the fan page..

9. Now we have successfully created the Fan Page.If you want to remove some of the unwanted tabs like Discussions, Photos, Boxes etc, then you can go to that Tab and remove it.

Now you can add a Fan box to your blog so that your blog readers can join you on Facebook. To do this, goto the Page Badges Link .Select Fanbox from the Left menu

Now Select your page and the Options that you want and then opt to to add the fan box to blogger using the Blogger Button

Now you should have the Fan box added on to your blog :)

Your Fan Page URL will look something like http://www.facebook.com/pages/Blogger-Widgets/252379165362 .Now if you have a pretty good number of fans(i think the minimum requirement is 25 fans) , then you can have a pretty facebook URL like http://www.facebook.com/bloggerplugins instead of a long one like http://www.facebook.com/pages/Blogger-Widgets/252379165362 .

To claim such small usernames for your facebook page, go to http://www.facebook.com/username/ and Click on Set a username for your Pages. There you can select the small pretty user name for your fan page.Once you opt for a user name you can’t change it back again. So be careful when choosing your Facebook Fan Page Username.

10. This is the most important Step of all ;)

Be my fan on Facebook ;) and you will get all my blog updates on my Facebook Fan Page.

Permalink: Create a Facebook Fan Page for your Blog

Setting up Blogger Custom Domain on Name.Com

2010-02-22T14:53:15-08:00

If you are not sure what a custom domain is, then first read this article about Blogger Custom Domains and come back .

How to buy the Domain Name?

Name.Com will allow you to buy domains with different extensions like .COM, .NET, .ORG etc .

1. First of all Goto Name.Com and you will find a Search Box there. This search box can be used to check if the domain name is available or not. For example if i need the domain mynewcustomdomain.com , then i will search for mynewcustomdomain

2.Name will show the available domain name extensions.Select the one you want.

3.Click the Checkout Button and on the next screen opt to create an account(if you don’t have one. if you have one , then login with that account)

4.Now finish the payment process(using credit card or paypal) and you will be having the domain under your name.com account

How to Setup the Blogger Custom Domain?

1.If you are logged in at your name.com account, then click the Account Icon V

2. Now you will be taken to a page listing all your domains. Click on the domain name which you want to use for your blogger blog.

3. On the next screen Click DNS Management form the Right Sidebar

4.In the DNS Management, add a new CNAME record with the following values CNAME, www, ghs.google.com,1800 and submit

5.Now again add another DNS record with the following values A, (leave next field blank),216.239.32.21 and 1800 and click submit

Create 3 More A records with following set of values

A , (leave the second field blank), 216.239.34.21 ,1800
A , (leave the second field blank), 216.239.36.21 ,1800
A, (leave the second field blank) , 216.239.38.21 ,1800

6. Now we are done setting up the CNAMES and A Records

Adding the Custom domain at Blogger.com

1.Login to your Blogger Dashboard and Navigate to Settings > Publishing.

2.Opt For Switch to: Custom Domain (Point your own registered domain name to your blog) and switch to advanced settings

3.Type your new domain there ,fill in the Captcha and save the settings.

4.Now select the redirection Option and save the settings Once again

5. Now your blog should be visible at your new domain. The changes can take up to 3 days to take effect (This is because your ISP’s DNS Server has to get the new updated information about the domain records.)

Setting Up Google APPs

1.Login to you Name.Com account once again

2.Click the Account Icon and then Click the domain name that we just used.

3.Now Click on the Enable link next to Google APPS

4. On the next Screen fill out the required details and click Continue with setup

5.Now you will be able to access your version of Gmail at http://mail.yourcustomdomain.com and similarly you will have the other Google apps running on your sub domains.

Try it out guys. and let me know if this tutorial helped you in any way :)

Permalink: Setting up Blogger Custom Domain on Name.Com

Google Ajax Search With Your Adsense Ads

2009-11-01T05:20:47-08:00

All of you might have seen the New Ajax Search Gadget on your Layout > Add Gadget Page. This Ajax search gadget doesn't support adsense ads.But you can now have a Google ad supported Google Ajax search widget on your blog.The speciality of the Ajax Search is that it can search your blog, without actually leaving your blog.(no need to go to a new page.. it acts like an inline search)

The Ad supported Ajax search Code is available at Google Web Elements .You can see 3 options there.

Automatically Search My Site
Search my Site and use Adsense for Search
Use an existing Custom Search Engine

For showing adsense ads you have to opt for option 2 or 3 .If you choose to use the second option,then you will have to provide you Adsense publisher id(which looks like pub-xxxxxxxx).If you opt for the option 3, you will have to provide the Custom search ID, which will be present in your Google Custom search Code.[Code is generated inline when you enter any of these ids.]

After grabbing this code, just go to your Blogger > Layout page and add a new HTML/JavaScript Gadget and paste the Google Web Element Custom Search code there and save the gadget. The Gadget will look better if you drag it to above the Blog Posts Widget and save it.[that area has got enough space to display the ads :)]

Here is a preview of what you should see.

Custom Search Control

Web

Web

If you want to change the colours and styling of the search results, you will have to add additional CSS Classes.

Update: – Now Google CSE has added all these things. and much more(themes and other customization stuff) So it would be easier for you guys.. :)

Permalink :Google Ajax Search With Your Adsense Ads

Some Friend Connect Gadgets that you might not know

2009-10-28T01:19:17-07:00

Most of you might be aware of the Google Followers gadget.Its just one of the different friend connect gadgets.

Where Can i get a Friend Connect Gadget?

1. Goto Google Friend Connect and on the left pane you will see a list of your blogs.

2.Expand your blog name(just click on it) and Opt for the “Social Gadgets” From the expanded list.

3.Now you can see a list of gadgets.You can customize the colours and the Generate the Code.

4.Copy this Code . Now in your blogger layout page(of the same blog), add a new HTML/JavaScript Gadget and paste this code there and save.

5.Now you should have that gadget running on your blog.

Here is a list of some of the Popular Gadgets[Some of them which can be demoed here :)]

1.Members Gadget – This is the same thing as what you see in a normal Followers Blogger Gadget

2.Cloud Gadget

Shows your followers as an animated Cloud

3.Sign in Gadget – This is also a followers gadget with a sign button like style

There are so many other friend connect gadgets like Recommendation Gadget, Comments Gadget, Ratings and Reviews Gadget and Lots More.The Recommendation gadget can be used as a popular posts gadget.so you guys better check out the big list of friend connect gadgets, available for you. And one most important thing. Don't forget to follow me using any of the Friend connect preview gadgets listed here ;)

Permalink: Some Friend Connect Gadgets that you might not know

A New Make over

2009-10-15T10:09:18-07:00

Hi guys, today i have tried to improve the look of this blog. We now have a new template specially designed and coded for this blog. First of all i would like to thank my friend Klodian of Deluxe Templates for helping me in coding this template.He is just awesome. Thanks a lot buddy for your valuable help and support.. What do you think of this new make over? Give me your feedback guys :)

Show avatars on Blogger Comments

2009-10-28T01:22:23-07:00

Blogger is now introducing features every day as part of its 10th birthday celebrations.Now it has formally announced the Blogger Comment avatars. To know what it means take a look at the comments here on this blog and you will see the profiles pictures of the commentators near to the comments.If you are using some default blogger template things would be much easy.Here is a little screenshot of the new feature.

Implementation of Comment Avatars

1.First of all Go to Blogger > Settings >Comments and enable “Show profile images on comment”

2.Now if you have a normal un customized template you will see the avatars on the comments on your blog.

3.If you have a customized template you will have to add some codes and play around with your template.For that first go to Blogger Layout >Edit HTML and backup your template.

4.Expand the widget templates and check if you can find this line there

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

If you can’t then that means we have something to do..

If you couldn’t find this,then do the following steps.

a)Find

<dl id='comments-block'>

and replace it with

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

b)Now Find all occurrences of

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

and replace each of it with

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

If you are using the author comment highlighting trick and if doesn’t work out with that trick,then leave a comment and i will try to help you out..

Further Styling.

If you want to add a default avatar for the ones with no profile pics,then place the CSS code just above

]]></b:skin>

CSS Code

.avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
.avatar-image-container  img { border:none;}

You can customize the CSS according to what you need.

If you need bigger avatars instead of smaller ones,then use the following CSS instead of the one above.

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(http://3.bp.blogspot.com/_u4gySN2ZgqE/SrSUS1YpxwI/AAAAAAAAAv4/DihiWlWRxQs/s400/grav.png);width:50px;height:50px;}

This will give you a bigger avatar and also a default gravatar image but it has a little drawback.It will also resize the small blogger favicons to a big size.(blooger favicon is displayed when a blogger user doesn’t have a profile avatar.Similarly OpenId also has a similar small icon.. ).

BTW to set you avatar pic you can use two methods.You can choose the edit profile link on your blogger profile and upload an image there,The second method is to enter a blogger comment somewhere in any blogger comment form and then click the Preview button instead of the Post Comment button.Now you will see an option to upload your avatar.

In case anything bad happens restore the template backup.. and comment here..:)

Permalink: Show avatars on Blogger Comments

Numbered Page Navigation For Blogger

2010-02-06T10:23:49-08:00

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about.

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find

]]></b:skin>

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

</body>

and replace it with

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.

Permalink: Numbered Page Navigation For Blogger

Post Summaries on Blogger With Read More

2009-10-28T01:24:10-07:00

Blogger is fulfilling some of our expectations. Now blogger officially supports Post Summaries With Read more.This means that you wont need any JavaScript and CSS based tricks to display post summaries on Non-Post Pages.The static pages would be out soon. A screenshot on the official blogger buzz blog has made it more clear.

How Does This Work

Blogger has introduced something called jump breaks. This will help you in creating the summary.

What is a jump break? - Jump break is a special tag which can be inserted anywhere in a post using the post editor.When you have inserted a jump break into a post, the portion of the post above(or before) the jump break will serve as the summary of the post. This means that only this smaller portion will be displayed on Non-post pages.

How to insert a jump break?

If you are using the New Advanced Post Editor, then you can insert the jump break easily from the post editor.

If you are not using the New Post editor,then you will have to manually type the jump break tag . To do that just place  [Note that there is a space before and after more.] at the position where you want the break to occur. Now try going to your home page,and only the summary would be displayed on the home page.You might get problems if you are using a modified and highly customized template. In that case try the following adjustments. Go to your Blogger Layout > Edit HTML and expand the Widget templates. Now check if the following code is already present in your template

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>  
      </div>
    </b:if>

If this code is not present in your template,then add this code before

<div class='post-footer'>

Now it should work properly.. If it doesn't,then leave a comment here and i will try to help you out..

Changing the Read More Text

By default the read more link text is Read more » . You can change this to whatever you like. To do that, Go to Blogger Layout and click on the Edit link on the Blog Posts Widget.

Change the Post Page Link Text and Save the Settings..

Drawbacks of the New Feature

For the post summaries to work effectively, you have to edit each of your posts and add the jump link in each of them. Blogger wont generate summaries automatically.:(

A mistake that you might make.

When you insert a jump break in the post,the part of the post after the jump break gets truncated. In your posts,there are some opening div tags before the jump break and some of these are closed after the jump break. So when blogger truncates the part of the post after the jump break,the closing div gets missing. That's why the sidebar shifts to the bottom.

So in order to solve this you should take some care in inserting the jump break.The jump break shouldn't be inserted into open tags..

For example something like this shouldn't happen.(You can see these things if you switch to Edit HTML instead of Compose)

<div>
This is the short summary

This is the rest of the post
</div>

As it is clear from this code, the jump break is inserted into an open div tag and the div is closed after the jump break.This should not happen.You should insert jump breaks after closing the div tag..

So this should look like

<div>
This is the short summary
</div>

This is the rest of the post

I hope that the blogger post editor will soon show warnings when the jump break is inserted into open tags.

Permalink:Post Summaries on Blogger With Read More

The Best Blogger Resources

2009-10-17T08:13:10-07:00

There are many many sites about blogger. Here i would like to share with you all blogger related sites which i love. All of these are my personal favourites.So i thought of sharing them with you guys! All of these sites provide tutorials,gadgets and templates which can be used on Blogger.

Blogger Tutorials and Gadgets

Amanda Fazani

She writes at Blogger Buster and Gadgets For Blogger . Blogger Buster is the Best Blog on Blogger Tutorials. Gadgets For Blogger is a directory which list all useful gadgets that can be used on blogger. Amanda also designs templates which can be found at Blogger Buster Designs and she also has made some premium templates at Theme Forest

Some Other Sites on Blogger Tutorials

Blogger Templates

Klodian

He is the person behind Deluxe Templates. He is now a good friend of mine and he has got a good collection of Blogger Templates.Some of these were inspired from Wordpress and other templates.All of these templates are perfectly coded and you can get them from his blog.

Dante

Dante has some truly original Blogger Templates at his blog.(Dante Araujo) . I really love his templates because they are so original. and elegant .He has got some really elegant templates that serve as image galleries. I haven't even seen any wordpress template to match those gallery templates. All of these blogs are powered by blogger.

Other Template Resources

Another great resource for Blogger Templates is Btemplates . Its actually the biggest collection of Blogger Templates which are organized well into categories and tagged properly so that you can find the best one out of them.

You can also check out my bigger list of Blogger Template Resources .

There are many other good resources for blogger. These are just my personal favourites.

New Advanced Post Editor For Blogger

2009-10-17T08:16:01-07:00

Blogger has released an updated version of the Post Editor.This one has more features than the old post editor.Here is a screen shot of the new Post Editor,so that you can get an overview of what is new in this advanced post editor.

Some of the added Features in this new Editor are:

Improved Image Handling
Improved Raw HTML
Geotagging
Resize the Post Editor Vertically
Easy Link Editing in Compose Mode
Better Previews
Draggable Placeholders
A New Advanced ToolBar

How to Enable the New Post Editor

Go to the Settings Page, and under the global Settings, Opt for the Updated Editor and save the settings.

Blogger Releases the new version of the Label Widget

2009-10-17T08:21:45-07:00

Blogger,as a part of its 10th Birthday celebrations, has now released a new version of the label gadget.This one is much better that the old version

What is new?

It comes with a Label Cloud.
It lets you choose which labels are to be displayed.
You can customize it further using CSS.

Drawbacks

The cloud just has 5 variations.All labels will be divided into 5 classes depending on the usage of these labels.
It would have been better if there was a bigger number of classes.

How to Customize?

You can customize the looks further by using CSS..As i said it has 5 classes of clouds..You can add CSS styles to each of them.

Here is a sample Style which will give a bluish look for the cloud..Here i have applied styles for all 5 label classes and their hover styles (so 10 style definitions in total).

.label-size-5 a {color: #2789ce; /*color of a label of class 5*/
font-size: 3em;
text-decoration: none;
   }
.label-size-5 a:hover {color: #2789ce; /*color of a label of class 5 on hover*/
text-decoration: underline;
   }
.label-size-4 a {color: #2789ce;/*color of a label of class 4*/
font-size: 2.5em;
text-decoration: none;
   }
.label-size-4 a:hover {color: #2789ce;/*color of a label of class 4 on hover*/
text-decoration: underline;
   }
.label-size-3 a {color: #2789ce;/*color of a label of class 3*/
font-size: 2em;
text-decoration: none;
   }
.label-size-3 a:hover {color: #2789ce; /*color of a label of class 3 on hover*/
text-decoration: underline;
   }
.label-size-2 a {color: #2789ce;/*color of a label of class 2*/
font-size: 1.5em;
text-decoration: none;
   }
.label-size-2 a:hover {color: #2789ce; /*color of a label of class 2 on hover*/
text-decoration: underline;
   }
.label-size-1 a {color: #2789ce;/*color of a label of class 1*/
font-size: 1em;
text-decoration: none;
   }
.label-size-1 a:hover {color: #2789ce; /*color of a label of class 1 on hover*/
text-decoration: underline;
   }

Here all of these CSS styles are customizable.You can change the colours and font sizes of each of the 5 classes.

color: #2789ce; is responsible for the colouring of each of the classes.You can change it appropriately with some other hex colour code or something like color:red;

You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class.. (em is a unit of font size just like px)

I have commented the css codes(10 comments)..You can remove those comments if you want(eg: /*color of a label of class 2 on hover*/ is a comment)

These CSS style definitions should be placed above

]]></b:skin>

If you are not impressed by the customizability of this blogger label cloud,try this advanced version of the cloud which is highly customizable Label Cloud Widget For Blogger

<data:post.body/>

and immediately before that, place our retweet code(from our text file)

5.Save the template.

Now you should have a retweet button near each of your blog posts.

Retweet Button for Blogger classic Templates

This is not for the blogger XML templates that we normally use.If you are using a blogger classic template,these four code styles can't be directly used in your template.You will have to modify any of these four code styles for it to work on the classic template.In any of these four code styles change <data:post.url/> to <$BlogItemPermalinkUrl$>

Now you have got the code for the classic template!

Where to place the code for classic blogger template?

Place the code just above <$BlogItemBody$> and save the template.Now you should have the retweet buttons on your classic blog.

If you liked this post, why not help me by retweeting it.. :)

Additional Note: How to check the retweet count of any url?

To check the retweet count of any url,just go to this url in your browser. http://api.tweetmeme.com/imagebutton.gif?url=http://twitter.com .Make sure to replace http://twitter.com with the url whose retweet count you would like to know.

Alternate Comment Forms For Blogger

2009-10-15T05:38:05-07:00

Have you ever felt that the blogger comment form (even the embedded inline one) doesn’t look pretty.Don’t worry you can convert the default comment form of blogger to an stylish commenting system which enables threaded comments and author images.Here i am listing some of the most popular commenting alternatives,.

These are the three famous commenting systems!

1. Intense Debate –

To give you a better demo,i am using the intense debate commenting system on this post.This is now owned by Automattic, the makers of Wordpress.This is my personal favorite and i am now confused whether i should switch to this or if i should use the default blogger commenting system.

2.DISQUS -

This is another Commenting system – It is the same thing that Mashable.com uses for its comments.

3.JS-Kit (Echo)

This is also another JavaScript based commenting system.Echo offers both free and paid packages!The free package comes with threaded comments and an interface where the commenter can add videos,images,similes, etc.The commenter can also format his comments using a simple WYSIWYG comment editor.

When you try to go for any of these commenting systems,make sure that you backup your template and keep a copy,so that you can revert back if it didn’t work out well.

These are the three most popular commenting systems.They come with threaded commenting with Gravatar based profile images,which can make you commenting system look more professional.I personally prefer Intense Debate over the others.

So if you want to remove the default blogger commenting system and get a better commenting interface,then you can opt for any of these commenting systems.

Note: These comment forms come with an option to show the comment form on new posts only(means posts with 0 blogger comments)!That means your old comments will stay intact and will use the old blogger comment form.(This is optional.. you can also revert all posts to use the new commenting system.But in that case, you cant display the existing comments easily..)

What can you expect from blogger in the future?

2009-09-24T00:29:51-07:00

If my guesses are correct,blogger will soon come up with post summaries(+ read more link) and static pages.

Some of you might have noticed the changes to your blogger templates.I have seen some new codes which give me the feeling that something better is coming!

Blogger May Soon have Static Pages like in Wordpress

This code gives me the feeling that blogger too will soon have Pages like in Wordpress

~~Blogger May soon have the Read more link and Post Summaries.~~ - Blogger has now added this Functionality.

This thing has been around for a while.

This code should probably give the indication that we will soon see post summaries and read more links on blogger..

When will these become a reality.. :)

Link to me widget for blogger

2010-03-04T04:31:15-08:00

This is a nice little widget which can find its place in your blog’s sidebar.You might want to let your readers link back to you in an easy way.We will now make a new Link To Me Widget which will display the code needed for a reader to link back to your blog.We will also provide a Add link using Blogger Button.

This button will work like a widget installer,which makes it easier for your readers to add your link.They can link back to you easily by adding your link to me widget.

How to make the Link to me Widget?

1.First of all Make a Small Logo of your blog,which can easily fit into any blog sidebars.It should be small and pretty :P

2.Now upload this image somewhere.[You can use blogger to upload the logo if you want or you can opt for some service like tinypic.com]

3.Now note the url of this uploaded image

4.Ok now you Copy the following Code into a Text File

<p>If you like this blog,then link back to me.<br/>
This is what you will see.</p>
<div style="text-align: center;">
<a style="border:0px;text-decoration:none;" href="Your_Blog_URL" title="Your_Blog_Title">
<img alt="Your_Blog_Title" style="border: 0px;" src="Url_of_a_Small_logo_of_your_blog"/>
</a>
</div>
<textarea rows="3" cols="30">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea><br/>
<br/>

Optionally use this Widget installer to add this link to your blogger blog.

<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input style="display: none;" value="My Favourite Site" name="widget.title"/>
<textarea style="display: none;" name="widget.content">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea>
<br/>
<input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/>
</form>

5.In this code replace all occurrences of Your_Blog_Title with the Title of your blog

6.Replace all occurrences of Your_Blog_URL with the url of your blog.

7.Replace all occurrences of Url_of_a_Small_logo_of_your_blog with the url of the logo that you uploaded.

8.Now your code is Ready!!

9.Copy out the modified code from your text editor.

10.Now Goto Blogger > Layout page

11.Choose to add a gadget and Opt for HTML/Javascript

12.In that widget paste the modified Code and Save.

Now you should have a link to me widget on your blog.If you want to test the Add Link With Blogger Button,Then try adding the widget to your blog itself.[You can remove it after testing!]

With Slight Modifications to the code,you can change this to a text link instead of an image link.

If you need some help in Customizing this widget, then drop in a comment or better contact me via a topic at the Blogger Forum

Height Fixer For Blogger

2009-09-24T00:31:51-07:00

Making the Sidebar and the Post Area to be of Same Height

Some of the simple blogger templates use CSS to set the background color of the sidebar and the main post part.In this case,the heights of these two columns can be different making it look a little awkward.In many cases you may want to make both of these columns of the same height.

If you didn't understand what i am talking of,then i will show you some demos.

Check out the sidebars of both

Blog Without Height Fixing – Link

Blog After Height Fixing – Link

The height adjustment can be done using a very simple javascript code.Actually i had to make something like this for another site of mine.So i thought of sharing this with you guys,

Here is the height fixing script.

<!--Height Fixer Starts-->
&lt;script type=&#39;text/javascript&#39;&gt;
&lt;!--
onload=function() {

var mh = document.getElementById(&#39;main-wrapper&#39;).offsetHeight;
var sh = document.getElementById(&#39;sidebar-wrapper&#39;).offsetHeight;
if(sh&gt;mh) mh=sh;
document.getElementById(&#39;main-wrapper&#39;).style.height = document.getElementById(&#39;sidebar-wrapper&#39;).style.height = mh+ &#39;px&#39;
 }
//--&gt;
&lt;/script&gt;
<!--Height Fixer Ends-->

What does this height fixer do?

When the page is fully loaded,this javascript code will get executed(as we have used onload). Now the variable mh will get the value of the height of the div with id main-wrapper.The variable sh will get the value of the height of the div with id sidebar-wrapper,Next we make a check.We check if sh is greater than mh.The greater of these values will be assigned to the variable mh

Now we set the height of both the divs[div with id sidebar-wrapper and the div with id main-wrapper] as sh pixels. So what does this actually do?? This script checks which of these divs have a larger height and assigns that larger height to both of these divs thus making both of them of equal height.

Where to place this height Fixer Code?

The height fixer code can be placed anywhere in the head section of your template.If you are still confused about where to place the code,then place it just above

</head>

Where else Can i Use this Script?

This script can be used anywhere where you need to adjust the height of two divisions(divs) to be the same.In that case don’t forget to change main-wrapper and sidebar-wrapper in this script with the respective ids of those divs.That means you can use this script to adjust the height of any two columns and make them of same height.

Why is the script having so many complex characters like < > etc?.

This is a parsed javascript.Blogger has problems with normal javascript(you might know this if you have tried to add the adsense code into the template).

Does this work on All Browsers?

This is a a very simple javascript code and it will work on all browsers.

Your comments and suggestions are always welcome.

The Complete FeedBurner Guide with Some Cool Enhancements

2009-09-24T00:33:03-07:00

What is Feedburner?

Feedburner is a service(now owned by google) which helps you in publishing your feeds in a better way.It helps you analyze your feeds,keep track of your visitors,know the number of feed subscribers etc.

How to Use Feed Burner?

1.Login to Feedburner.com using your Google account

2.Copy your blog url,or your blog feed url and paste that url at feedburner.com

3.If you pasted your blog url(yourblog.blogspot.com) instead of your feed url (yourblog.blogspot.com/feeds/posts/default),then feedburner should be able to fetch your feed url automatically.[If you don't have a malformed template]

4.In the Next Step Give Title to your feed(Probably your site title itself) and also pickup a fancy slug(the final feed url will be http://feeds.feedburner.com/slug)

5.In the Next Stage,you should have finished Creating your feed

6.Now your feed should be live at http://feeds.feedburner.com/yourfeedslug

Branding Your Feedburner Feeds

You can Apply Domain Branding and Email Branding on Feed Burner

What is Domain Branding?

This is what we normally do-We burn our blog feeds using Feed Burner and ask our visitors to go to our feedburner Url to subscribe to our feed.

Wouldn't it be better if we were able to make the feed a part of our own domain rather than asking them go to a url like feeds.feedburner.com/yourfeedname .Now with feedburner you can do that too. For example look at my feed url http://feeds.bloggerplugins.org/BloggerPlugins . Doesn't it look better than http://feeds.feedburner.com/BloggerPlugins ?.Domain Branding can be done only if you have your own Custom Domain

What is Email Branding?

If you have activated the Email Subscriptions Option in feedburner,then users will be able to subscribe to your feeds by email.When someone subscribes via email,feedburner will sent feed updates to all the email subscribers.We can brand the emails being sent.We can decide on the email from which the feeds should be sent(I use feeds@bloggerplugins.org) .You can also Brand the email by including your logo in the emails.You can do This from the different Sub Options under Email Subscriptions in the Publicize Tab at Feedburner.

How Does Branding Help Me?

Branding helps you in giving a professional touch to your feeds.You will now feel like a better owner of the feeds as the feeds can be viewed from your own sub-domain.

Will i loose my existing Subscribers if i Opt for branding?

No, you are actually just making your original feed visible on your feed specific domain.And even your old feed url will continue to work..Ie if you have http://feeds.feedburner.com/FeedName , then after setting up branding, you will have the feed available at http://myfeedspecificdomain/FeedName also. These feeds are actually the same.So you wont loose any subscribers when you change the feed links on your blog with your new branded feed url

How To Setup Domain Branding?

Do you remember how you configured the Custom Domain For Blogger? You created a CNAME record for that.Its the same method for this one also.

Now From the Left Pane Opt for My Brand

you will see something like

feeds CNAME something.feedproxy.ghs.google.com on the right pane.

Now Create a CNAME record with the Name feeds and value something.feedproxy.ghs.google.com from your domain control panel(in the same way as you did for the custom domain)

Now add the new feed sub ddomain on the Right Pane(Feedburner) – I gave feeds.blogegrplugins.org as i have created a CNAME with name feeds

After doing this,my feed feeds.feedburner.com/BloggerPlugins became visible at feeds.bloggerplugins.org/BloggerPlugins.

How to Setup Email Branding?

Navigate to the Publicize Tab and Opt for Email Subscriptions.If it is not yet activates,then activate it.Now in Communication Preferences,you can provide your custom email[user@yourdomainname] .I used feeds@bloggerplugins.org .You can also format the email Properly in a custom way,and also add a logo to your email feeds by filling in the options in the Branding submenu.

Configuring Blogger To use our new FeedBurner Feed(Feed Redirection)

1.Login to your Blogger DashBoard

2.Goto Settings > Site Feed

3.Give Your new Feedburner Feed Url there and Save the Settings.

4.If you have used any links on your blog,pointing to your blogger feed,then change then replace them with the new FeedBurner Feed Url

5.Now anyone trying to access http://yourblog.blogspot.com/feeds/posts/default(and other blogger post feed urls) will be redirected to the Feedburner Feed that we Specified.

Adding Feedburner Email Subscription To Blogger

1.Login to Feedburner and Go to The Publicize Tab.

2.Look for the Email Subscriptions link in the left pane and click it

3.If you haven’t activated that service,Activate it.

4.Now Copy the Subscription Form Code from the right pane.

5.Make a New HTML/JavaScript Gadget in Blogger and Paste this code in that Gadget and save it.

6.Now you should have an email subscription form on your blog

Adding The Feedburner Feed Count to Blogger

1.At Feedburner Navigate to the Publicize Tab

2.Look for the Feed Count link in the left pane and click it

3.If you haven’t activated this service activate it

4.Choose the Proper Colors for the counter and click Save

5.Now Copy the Code from there and add it to any HTML/Javascript Gadget.If you have branded your feed URL,then make sure that you change the feedburner feed url in this code to your branded URL(i changed feeds.feedburner.com/BloggerPlugins to feeds.bloggerplugins.org/BloggerPlugins)

Adding The Feed Link to Blogger Instead of the Counter

<a href="my feed url" title="Subscribe To My Feed" rel="nofollow">Subscribe to My Feed</a>

You can modify the above Code with your feed url and paste into into an HTML/Javascript Gadget to have a Subscription Link on your Blog.If you need a better looking link,then

1.Navigate To the Publicize tab in Feedburner

2.Look For Chicklet Chooser in the Left Pane,and click it

3.Select the proper link that you need from the right pane and copy out the code

4.Paste this into an HTML/Javascript Gadget(If you used a branded domain make sure that you replaced the feedburner feed url with your branded feed url)

Preventing Search Engines From Indexing Your Feed

1.Login to your Feedburner Account and Navigate to the Publicize Tab

2.Now In the Left Pane,Look For the NoIndex Link

3.In The right pane,indicate that your feed shouldn't be indexed and activate that service

I have tried to explain all important aspects of using FeedBurner.Did i miss out anything important?If so Kindly let me know and i will update the post. Did you fall into trouble trying to use a branded feed url?? Then drop me a comment or contact me @ the Blogger Forums. I will be happy to help you out.

Blogger Widgets

Blogger Launches a new Template Designer

How To switch to a new Template and use the Template Designer

Add Google Buzz Buttons To Blogger Blog

Google Buzz Button with Share Count

Add Signature to Blogger Blog

Adding Signature to Single Author / Multi Author Blogger Blogs

Blogger FTP to Custom Domain Migration

Where do you currently publish your FTP blogger blog ?

Can i get rid of my web-host?

Migrating www.yourblog.com (FTP) to www.yourblog.com (Custom Domain)

What does the Missing files host do?

Blogger Pages are finally out

How to create a Blogger Page?

Advanced options.

Misbehaviour

Facebook Share Count Buttons For Blogger

Facebook Share Button Style 1

Code for Facebook Share Button Style 1

Facebook Share Button Style 2

Code for Facebook Share Button Style 2

Facebook Share Button Compact Style 1

Code for Facebook Share Compact Button Style 1

Facebook Share Button Compact Style 2

Code for Facebook Share Compact Button Style 2

How to install Facebook Share Count Button on your Blogger Blog?

Create a Facebook Fan Page for your Blog

Setting up Blogger Custom Domain on Name.Com

How to buy the Domain Name?

How to Setup the Blogger Custom Domain?

Setting Up Google APPs

Google Ajax Search With Your Adsense Ads

Some Friend Connect Gadgets that you might not know

Where Can i get a Friend Connect Gadget?

A New Make over

Show avatars on Blogger Comments

Implementation of Comment Avatars

Further Styling.

Numbered Page Navigation For Blogger

Implementation of Blogger Page Navigation

The Complex Method. :P

Label Fix

How to Edit the template to cut short the posts per page?

Post Summaries on Blogger With Read More

How Does This Work

How to insert a jump break?

Changing the Read More Text

Drawbacks of the New Feature

A mistake that you might make.

The Best Blogger Resources

Blogger Tutorials and Gadgets

Amanda Fazani

Some Other Sites on Blogger Tutorials

Blogger Templates

Klodian

Dante

Other Template Resources

New Advanced Post Editor For Blogger

How to Enable the New Post Editor

Blogger Releases the new version of the Label Widget

What is new?

Drawbacks

How to Customize?

Related Posts Widget for Blogger with Thumbnails

Related Posts with Thumbnails for Blogger

Related Posts Widget with Thumbnails for Blogger

How to display the related posts on every page and not only on the post pages?

How to add Retweet Button to Blogger

How to add retweet button to Blogger ?

Retweet Button Style 1

Retweet Button Style 2

Retweet button Compact Style 1

Retweet Button Compact Style 2

How to install the Retweet Button on your blog?

Retweet Button for Blogger classic Templates

Where to place the code for classic blogger template?

Alternate Comment Forms For Blogger

What can you expect from blogger in the future?

Link to me widget for blogger

How to make the Link to me Widget?