Banner on top of post area

Let's suppose you want to feature a sticky post at the top of your Blogger posts, or perhaps you'd like to insert an AdSense box or site search facility. At present, there is no facility to do this in the default Blogger layouts system. But there are two ways around this problem. Change the post date to a future time: This is the easiest method, and is most useful for those who need a sticky post, perhaps about a future event after which time the post need not be at the top of other posts. To do this, simply click on "Post Options" beneath the type box when you are editing your post and change the date to somewhere in the future. Blogger doesn't have the facility to publish posts on a future date, so your "sticky post" will remain at the top of your main column until this date has passed.
Add a new page element:
This is a more permanant, neater and convenient way to add a "sticky post" to the top of your main column. Uses for this may include a search box, a message about your blog, or Adsense/banner ads. You'll notice in the default Blogger layout for your template that there is no "Add a page elenent" in the posts box. You can change this by following these steps:

1. Go to Page Elements>Edit HTML in your blogger dashboard. You don't need to expand the widget templates for this hack.
2. Find the following section of code:    

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section> </div>

2. This section relates to the "Posts" section in your layout.
3. Notice the part which says: You need to change this to "yes" to allow other elements to be added to the posts section.
4. Save your template and take a look at your "Page Elements". You should now see an "Add Page Element" link in the posts section (click image for an enlargement):

You can choose to add different page elements depending on your requirements:

• To write an introduction to your blog, choose "Text"To add code for Adsense/banner ads, choose "HTML/Javascript"
• To add a search function, copy your code into an "HTML/Javascript" element.
• To add an image, choose "Picture".

Another Artical from blogger buster

Add a "Top of Page" Icon Link

The icon is styled to appear in the bottom right-hand corner of the page (no matter what screen resolution a visitor uses to access your blog), and is linked to target the top of the page using the "#" symbol.
The icon link used in this blog is small and unobtrusive; to help new visitors understand how this can be used, I added title text to the image so the "Back to Top" prompt will appear when the visitor hovers their mouse over the link.
The code used to add a "Top of Page" icon link is constructed as follows (I have forced line breaks for clarity):

<a href="#"> <-- This link targets the top of the page



<img src="url-of-image" <-- The URL of your icon



alt="alternative text" <-- Alt text for accessibility



title="Back to Top" <-- This will produce the hover text



style="display: scroll; <-- This allows the image to scroll



position: fixed;<-- This fixes the image in place



bottom: 5px; <-- Makes the image appear 5px from the bottom



right: 5px;" /></a> <-- Makes the image appear 5px from the right, 

 
then closes all tags

How to install the "Top of Page" Icon Link

To use an icon link like the one used here at Blogger Buster, simply copy all of the code below and paste this into an HTML/JavaScript widget in your layout:

If you use a Classic Blogger template (with no drag and drop widgets), you can paste this code into your blog's HTML code, somewhere between the and tags instead.

Customizing the Icon Link

If you would prefer to use a different image than the one used here, simply replace the URL of the image with the URL of your preferred image instead.
You can also reposition the icon to suit your design needs. For example, if you wanted the icon to be flush with the bottom right corner (no space), change the code explained above to read this instead:

position: fixed;
bottom: 0px;
right: 0px;

To position the icon further away from the right or bottom sides, simply increase the pixel value to reflect this distance.

Some Examples of "Top of Page" Icon Links

You needn't be restricted to using an arrow for your top of page link! Some of the designs I showcased in this recent post used ingenious methods of linking to the top of the page:

Left: La Blogueria uses paperclips to link to the top (and other parts) of the blog.
Center: In Tuneando el Blog, the icon link is animated when the mouse hovers over it!
Right: This page curl at the bottom right of Mi-Microsmos is a cleverly disguised (and very stylish) link which features a prompt on mouseover.
source:bloggerbuster

Install the Christmas Banner widget

The Christmas banner is available in two formats for you to install as a widget in your blog:

• PNG format: this is the style you can see in my own blog. PNG is a better format for images with transparency, but you will need to ensure you have also installed the PNG fix for IE6 and below, otherwise you will see a grey background to the image!
• GIF format: this is suitable for all blogs and browsers, though the image quality isn't quite as good.

Use the appropriate button below to install your own Christmas banner with just one click! After Christmas, you can easily delete your widget, or replace it with a New Year banner instead (which I will be uploading shortly).

Install the New Year Banner widget

This New Year banner is available in two formats for you to install as a widget in your blog:

• PNG format: this is the style you can see in my own blog. PNG is a better format for images with transparency, but you will need to ensure you have also installed the PNG fix for IE6 and below, otherwise you will see a grey background to the image!
• GIF format: this is suitable for all blogs and browsers, though the image quality isn't quite as good.

Use the appropriate button below to install your own New Year banner with just one click! You can easily remove the widget whenever you like by simply opening up the widget and clicking on the "remove page element" button in the pop-up window.

Wishing you all a happy and prosperous New Year!

Linkwithin related post widget

Displaying links to "related posts" beneath individual entries on our blogs is a tried and trusted method of providing useful and interesting reading material for our readers.

I've written about several different methods which Blogger users can choose to display related posts - all of which perform their function well enough. But after seeing several of my favourite sites displaying links to related items with thumbnails using LinkWithin's free service, I was intrigued to discover how well this may be adapted for use with Blogger.

About LinkWithin

LinkWithin is a free service offered by a small team based in New York. This free service enables us to display related posts with thumbnails below our blog posts (the thumbnail is taken from an image within the post it links to).

We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

The posts chosen to appear as related posts are based on several factors including:

• Relevance
• Popularity
• Recency

At present, LinkWithin is not ad-supported and is completely free to use.  As explained on the FAQ page:

We plan to introduce revenue-sharing features in the future, but they will be optional.

At present, there is little documentation for us to be certain of these factors, though after testing LinkWithin in a few different sites, I'm pretty impressed by the choices generated for each post!

Here is an example of how LinkWithin functions for WeLoveBlogger.com:

Why LinkWithin may be a more ideal solution than other related posts solutions for Blogger

The "related posts" solutions for Blogger which I've used until now have all relied on label feeds. That is, the recent posts generated by such scripts collect recent posts from the same label (category). This often means that posts deeper within our archives are generally ignored, even when they may be far more relevant than the more recent posts displayed.

LinkWithin parses all posts from our blogs, and chooses the posts to be displayed using more complex and relevant factors. This ensures far greater relevancy which is better for our readers and also ensures that older posts are included in the display.

How to add LinkWithin Related Posts to Your Blogger Blog

If you're using a standard, uncustomized Blogger template, the method for installing LinkWithin is fairly straightforward. Simply visit the LinkWithin website, fill in the form on the right-hand side (choosing Blogger as your platform) and follow the instructions provided.

This will install the related posts in your template as a gadget beneath the main posts section, though you'll find the "You may like these related stories" section will be displayed beneath each of your blog posts (before the post-footer section). It will also display on each and every page of your blog, including the main, archive and search pages.

Custom Installation of LinkWithin for Blogger templates

If you prefer to display your related posts only on item pages or have a customized, non-standard Blogger template, here is how you can install LinkWithin:

1. Visit the LinkWithin website and fill in the form on the right-hand side. For the "platform" be sure to choose "Other":
   
   
   
   
   
   
   
   
   
2. On the next page, you will find a script like this is generated. From this code, you need to write down your unique "site ID" for later use (or copy this to your favourite text editor):
   
   
   
   
   
   
   
   
   
3. Once you have a note of your Site ID, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.
4. Using your browser's search function, locate this tag (or similar) in your Blogger template code:
   
   
5. Immediately before this line, paste the following section of code, replacing "YOUR_SITE_ID" with the ID number you have noted down for your site:
   <b:if cond='data:blog.pageType == "item"'>
   
   <script>
   
   var linkwithin_site_id = YOUR_SITE_ID;
   
   (function () {
   
   var elem = document.createElement('script');
   
   elem.type = 'text/javascript';
   
   elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
   
   document.getElementsByTagName('head')[0].appendChild(elem);
   
   })();
   
   </script>
   
   <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a>
   
   </b:if>
   
   

   
   
   
   
   

   
   
6. Preview the changes you have made before saving your template. The LinkWithin gadget should not display in the preview; furthermore, if there are any errors in the installation you will be able to see before attempting to save.
7. If all is well, save your template and visit an item page in your blog: you should be able to see related posts showing up beneath your blog posts.

Support for LinkWithin's related posts

While I can help with installation for LinkWithin in Blogger templates, I'm not able to help with specific problems with the script.

Luckily, the LinkWithin team offer a good support service via email:

If your blog uses a non-standard custom template/theme, we will need to add support for your blog manually, and we can do this only if the widget remains installed on your blog. Please email us at support AT linkwithin DOT com, and we will fix the problem, usually within 1-2 days. Thank you for your patience!

At the moment, it appears we can only display three related posts. Hopefully LinkWithin will offer the option to display more (or less) items in a future version of the script.

Why I'm not using LinkWithin yet...

LinkWithin is a very useful solution for Blogger users wishing to display links to related posts in their blog. I recommend this service and will be using this in a future release of Blogger Buster.

My current template is highly complex and has served me well for many months. However, there are several new (and upcoming) customizations and new features for Blogger which may not work so well in this design. I'll explain more about this in a future post when the site changes are closer to completion.
source:bloggerbuster

Recent comments from blogger buster

Use this script to achieve a WordPress-esque Recent Comments module for your side bar! Start some riots among your readers! Let them know what others have to say. This site provides a widget creator that I used to make my recent comments module. I found that after adding this, it actually encouraged people to comment more frequently. I don’t know if they like seeing their name up in lights or if they read what others wrote and want to kick in their two cents… But either way it has increased commenting by about 70%!

Customize Recent Comments Widget

Widget title:
Blog address: http://
(eg: "yourblog.blogspot.com" or "www.yourblog.com")
Comments to display:
Show comment date:
Show post title:
Summary size: characters

           

This tool is copy from blogger buster without permission.sorry!!!!!
View Orignal Artical

Related Posts with Thumbnails for Blogger - New Version by BloggerWidgets

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.
This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed installation steps
1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "ExpandWidget Templates" check box
2.Now look for

</head>

and replace it with

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}



#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}



#related-posts  a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

</head>

3.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'>

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

To change the colors and all you will have to modify the CSS
If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.
If you need a demo just check the related post thumbnails below this post. If you liked this widget,please do retweet and spread the news. :). UPDATE: Fixed the chrome Issue.So if you installed the widget before seeing this,then please update the widget.. :)
source: BLOGGERPLUGINS