Adding Light Box To Blogger Images Fixed and working.

What’s New About This Widget

* First of all we add the widget code to our template,
* You’ll be able to (Link) this widget to your single images in blogger.
* You can use it to make photo gallery.
* You can make Slide show with it.
* You can add it to your (links).

How Is It Work

First of all we add the widget code to our template,
Then when we add an image to a new post we have to {Link} it to the widget by adding a tiny code to it by changing the post writing mode from compose to html don’t worry it’s easy, continue reading to figure it out  
Step 1

</head>

 
And Before it add the following code.

<!--Code-By-AllBlogTools-->

<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>

<!--Code-By-AllBlogTools-->

Now we’ve add all require codes to the template, lets know how to use it.

Step 2 – How To Use

The way to make this widget works in your blog is very easy but you have to know what you do,
What you have to do is : add a small code to the images code. and you can find the images code in post writing area when you change the mode from compose to edit html.

Step 2.1 – Add It To Single Image

Go to blogger account, start writing your post in normal mode (compose)
And once you add an image to your post, please change your mode to edit html, see previous imsge
You’ll find the image code looks like the following.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

What we’ll need to add for this code is the next part

rel="lytebox" 

Example Code For Single Image : 

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> 

 And you are done.

Step 2.2 – How To Make Photo Group Gallery

We’ll do the same as the previous step, but instead of adding Only

rel="lytebox"

we’ll have to add a name for this code so it’ll be

rel="lytebox[groub1]"

when you add this code for more than one image, all the images will open as a group.
Example Code For Images Album : 

rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_oddjpg">

rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_oddjpg">

Step 2.2 – How To Make A Slide Show

Instead Of adding

rel="lytebox[groub1]"

We’ll add

rel="lyteshow[groub1]"

 
For links we use rel="lyteframe" before href of the link
thanks if you have any problem email me or comment here.
demo:Saab Pakistani 2000

SEO Optimization for blog and websites

Changing your site's title and description in search results

Google's creation of sites' titles and descriptions (or "snippets") is completely automated and takes into account both the content of a page as well as references to it that appear on the web.
We use a number of different sources for this information, including descriptive information in the META tag for each page. Where this information isn't available, we may use publicly available information from DMOZ. While accurate meta descriptions can improve clickthrough, they won't impact your ranking within search results. We frequently prefer to display meta descriptions of pages (when available) because it gives users a clear idea of the URL's content. This directs them to good results faster and reduces the click-and-backtrack behavior that frustrates visitors and inflates web traffic metrics.

While we're unable to manually change titles or snippets for individual sites, we're always working to make them as relevant as possible. You can help improve the quality of the snippets displayed for your pages by providing informative meta descriptions for each page.

Create good meta descriptions

Prevent search engines from displaying DMOZ data in search results for your site

Create good meta descriptions

* Differentiate the descriptions for different pages : Using identical or similar descriptions on every page of a site isn't very helpful when individual pages appear in the web results. In these cases we're less likely to display the boilerplate text. Wherever possible, create descriptions that accurately describe the specific page. Use site-level descriptions on the main home page or other aggregation pages, and use page-level descriptions everywhere else. If you don't have time to create a description for every single page, try to prioritize your content: At the very least, create a description for the critical URLs like your home page and popular pages.
* Include clearly tagged facts in the description : The meta description doesn't just have to be in sentence format; it's also a great place to include structured data about the page. For example, news or blog postings can list the author, date of publication, or byline information. This can give potential visitors very relevant information that might not be displayed in the snippet otherwise. Similarly, product pages might have the key bits of information - price, age, manufacturer - scattered throughout a page. A good meta description can bring all this data together. For example, the following meta description provides detailed information about a book.

* In this example, information is clearly tagged and separated.

* Programmatically generate descriptions : For some sites, like news media sources, generating an accurate and unique description for each page is easy: since each article is hand-written, it takes minimal effort to also add a one-sentence description. For larger database-driven sites, like product aggregators, hand-written descriptions can be impossible. In the latter case, however, programmatic generation of the descriptions can be appropriate and are encouraged. Good descriptions are human-readable and diverse, as we talked about in the first point above. The page-specific data we mentioned in the second point is a good candidate for programmatic generation. Keep in mind that meta descriptions comprised of long strings of keywords don't give users a clear idea of the page's content, and are less likely to be displayed in place of a regular snippet.
* Use quality descriptions : Finally, make sure your descriptions are truly descriptive. Because the meta descriptions aren't displayed in the pages the user sees, it's easy to let this content slide. But high-quality descriptions can be displayed in Google's search results, and can go a long way to improving the quality and quantity of your search traffic.

Prevent search engines from displaying DMOZ data in search results for your site
One source we use to generate snippets is the Open Directory Project. You can direct us not to use this as a source by adding a meta tag to your pages.
To prevent all search engines (that support the meta tag) from using this information for the page's description, use the following:

To specifically prevent Google from using this information for a page's description, use the following:

If you use the robots meta tag for other directives, you can combine those. For instance:

Note that once you add this meta tag to your pages, it may take some time for changes to your snippets to appear in the index.
If you're concerned about content in your title or snippet, you may want to double-check that this content doesn't appear on your site. If it does, changing it may affect your Google snippet after we next crawl your site. If it doesn't, try searching Google.com for the title or snippet enclosed in quotation marks. This will display pages on the web that refer to your site using this text. If you contact these webmasters to request that they change their information about your site, any changes to their sites will be recognized by our crawler after we next crawl their pages.

Simple Way to Make Tabbed Sidebars on Blogger

Tabs are well know for being very useful to everyone, specially for those who have a lot of content on their blogs and spend much time thinking where to place new stuff.

I know there are quite a few tutorials around about making tabs for blogger, but they all have one thing in common, are kind of difficult to implement, and may confuse some users.
The method I developed is inspired in a tutorial from Webitect, I just found it very useful and decided to adapt that technique to Blogger platform. This tutorial will bring you a very easy to implement way to make tabs out of your sidebar widgets, here are some features of my method:

• Easy to install.
• No need edit html in Sidebar part.
• Automatically place your handpicked widgets inside tabs.
• Freedom to set what widgets stay out of the tabs.
• After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Step 1 - Placing the styles on your CSS

The style of the tabs can be easily changed anytime just using CSS, but this is not the main reason for this tutorial, It’s up to you to change or not, use your own CSS skills. We’ve made a general layout for it, to install it just place the following code right before the ]]> line:

/* Tabbed Sidebar Widgets

--------------------------------- */

.widget-wrapper2{

    border:1px solid #494e52;

    background-color:#636d76;

    padding:8px;

}



.widget-tab {

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-moz-border-radius-topright:5px;

-webkit-border-radius-bottomleft:5px;

-webkit-border-radius-bottomright:5px;

-webkit-border-radius-topright:5px;

background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;

border:1px solid #CFCFCF;

font-family:Arial,Helvetica,sans-serif;

padding:15px !important;

}



.widget-tab  ul {

    margin:0px;

    padding:0px 20px 0px 20px;

}

.widget-tab  ul li {

    list-style:none;

    border-bottom:1px solid #d6dde0;

    padding-top:10px;

    padding-bottom:10px;

    font-size:13px;

}

.widget-tab  ul li:last-child {

    border-bottom:none;

}

.widget-tab  ul li a {

    text-decoration:none;

    color:#3e4346;

}

.widget-tab  ul li a small {

    color:#8b959c;

    font-size:9px;

    text-transform:uppercase;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    position:relative;

    left:4px;

    top:0px;

}

.tab-content  ul li a:hover {

    color:#a59c83;

}

.tab-content  ul li a:hover small {

    color:#baae8e;

}



.active-tab{

background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;

border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;

border-style:solid !important;

border-width:1px 1px 2px !important;

color:#282E32 !important;        



}



ul.tab-wrapper {

    margin:0px; padding:0px;

    margin-top:5px;

    margin-bottom:6px;

}

ul.tab-wrapper li {

-webkit-border-radius-topleft:5px;

-webkit-border-radius-topright:5px;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;

border:1px solid #464C54;

color:#FFFFFF;

cursor:pointer;

display:inline;

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:9px;

font-weight:bold;

line-height:2em;

list-style-image:none !important;

list-style-position:outside !important;

list-style-type:none !important;

margin-right:1px;

padding:8px 14px;

text-align:center;

text-decoration:none;

text-transform:uppercase;

}

Step 2 - Installing jQuery Library

This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you don’t just paste the code below right before your line:

<!-- jQuery Call -->



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>



<!-- End of jQuery Call -->

Step 3 - Installing the Script

Ok now that you’ve made sure that you have jQuery installed, you need to install the script that will do all the magic for us, just place the following code right before your line:

<script type="text/javascript"> 

var starttab=0; 

var endtab=2; 

var sidebarname="sidebar1"; 

</script> 

<script type="text/javascript" src="http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>

Customizing

As you have noted you’ll get a few lines that can be customized, those are:
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
Very quickly: starttab is the starting number for your chosen widgets, it starts counting from 0. endtab is the number for your last included widget. sidebarname is your sidebar’s id, it is generally just “sidebar”, but just in case you have a different id, we’ll help you finding the right one to place here.

How to find your sidebar’s ID

Ok if you have installed the script and it is not working, you may have a different sidebar ID that is not only “sidebar”, use the following methods to find he right id of your sidebar.

Method 1 - Getting from the HTML

This one may be the fastest one, if you use Minima template, or any template derived from it, just go to Layout > Edit HTML > Search for “sidebar-wrapper” and you may get something like this:

<div id='sidebar-wrapper'>



<b:section class='sidebar' id='sidebar' preferred='yes'>

Just take a closer look and you will find it id='sidebar'.

Method 2 - Using Firebug

Firebug is the most wonderful Firefox extension for web developers, If you dont have it, just download it from here.

Method 3 - Using Web developer Firefox Plugin

This is another great extension, if you don't have it, get it here.

Ok now that you have installed the script on your blog, you should be able to normally edit your widgets on your page elements section.

What are the Gadget Numbers

Here is a simple explanation for those who haven’t understand the numbers yet. Let’s say that you want make tabs out of your first 3 widgets, so your starting number will be 0 and your finishing number will be 2:
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
Check images below for better understanding:


In this case, Widget 3 and 4 will not get any tabs, because your finishing number was 2. Very easy huh?

Advices

• This script works for only one sidebar per blog.
• We have included a general styles for your tabs, however, you can use your CSS skills to customize them, but be aware that CSS related errors will not be supported here, make sure you do the right thing.
• All the tabbed widgets need to have a title.

Three colum footer for blogger blogs

Creating the new columns

Here are the four steps needed to transform the footer section of your blog template:

1. Back up your existing blog template!
   
   Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.
   
   To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.
2. Move all existing widgets from the existing footer section
   
   In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.
3. Add extra code to your footer section.
   
   Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).
   
   Now you need to find this section in your template:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in red.

Replace the entire line highlighted in red with the code below: 

<div id='footer-column-container'>



        <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>



            <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

        </div>



        <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

            <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

        </div>



        <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>



            <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

        </div>



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

<p>

<hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>



<b:section class='footer' id='col-bottom' preferred='yes'>

<b:widget id='Text2' locked='false' title='' type='Text'/>

</b:section>



</div>

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



</div>

• is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.
• Adding style for the new footer section
  
  Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "" tag, which is where the style section of your template ends.
  Immediately before this line, add the following lines of code: 

• #footer-column-container {
  
  clear:both;
  
  }
  
  
  
  .footer-column {
  
  padding: 10px;
  
  
  
  }

  
  

• And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.
• Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!
• I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:

• <hr align='center' color='#5d5d54' width='90%'/>

  
  

Height Fixer For Blogger

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.

<script type='text/javascript'>
<!--
onload=function() {

var mh = document.getElementById('main-wrapper').offsetHeight;
var sh = document.getElementById('sidebar-wrapper').offsetHeight;
if(sh>mh) mh=sh;
document.getElementById('main-wrapper').style.height = document.getElementById('sidebar-wrapper').style.height = mh+ 'px'
 }
//-->
</script>

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.

 

blogger with name.com domain.

Some days ago i bought a domain from name.com for a friend.

but the redirection is hard part.After search of 2 hours i got this tutorial

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

6. Now we are done setting up the CNAMES
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 aboutthe 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.

 that's all but this tutorial is very rear in the web so copy :)

Highlight Author Comment in Blogspot

This trick is to give a Highlight Author Comment . This will make the blog's owner comments looks different from the visitors comments. It's very usefull and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.

1. Login to blogger, then choose "Layout --> Edit HTML". Don't forget to backup your template first.
2. Check the "Expand Widget Templates" box.
3. Copy this script and put it before

]]></b:skin>

 
or copy to your CSS area.

.comment-body-author {

background: #E6E6E6; /* Background color*/

color: #000; /* Text color*/

border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;

margin:0;

padding:0 0 0 20px; /* Posotion*/

}

4. Then find this code:

<dl id='comments-block'>



<b:loop values='data:post.comments' var='comment'>



<dt class='comment-author' expr:id='"comment-" + data:comment.id'>



<a expr:name='"comment-" + data:comment.id'/>



<b:if cond='data:comment.authorUrl'>



<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>



<b:else/>



<data:comment.author/>



</b:if>



said...



</dt>







<b:if cond='data:comment.author == data:post.author'>


<dd class='comment-body-author'>


<p><data:comment.body/></p>


</dd>


<b:else/>







<dd class='comment-body'>



<b:if cond='data:comment.isDeleted'>



<span class='deleted-comment'><data:comment.body/></span>



<b:else/>



<p><data:comment.body/></p>



</b:if>



</dd>







</b:if>







<dd class='comment-footer'>



<span class='comment-timestamp'>



<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>



<data:comment.timestamp/>



</a>



<b:include data='comment' name='commentDeleteIcon'/>



</span>



</dd>



</b:loop>



</dl> 

5. The red color text is the code that you have to add to your script. The position must be right.
6. And then save your template.

* You have to login into your blogger account before to give comments. 

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

Add a Customized Twitter Widget to your Blogger Blog

Twitter has become one of the most useful social applications for bloggers. Many bloggers choose to feature their latest updates in a widget visible in their blogs. Here at Blogger Buster, for example, you can see a Twitter widget in the header section which features my latest "tweet".
Many readers have emailed me to ask how I customized this widget, so in this post I'll explain some methods you could use to create and customize your own Twitter updates widget, including a simple widget installer for you to add a widget similar to the one used here.
Twitter does offer a "Blogger" widget which can be installed using a one-click installer. This widget does not have any styling associated with it, ensuring your updates will appear in the same fonts and colors as other widgets in your blog.
If you have already added a Twitter widget to your blog, you can easily customize the appearance of this widget using some simple CSS techniques.
The widget code for your Twitter badge will most likely appear like this:

• <--Add Style Here --> id="twitter_div">

• follow me on Twitter

As you can see from the comments I added in red, you can add inline CSS styling to your widget code, in order to add borders, background color or even an easily recognizable icon.
Here are some examples of the code you can add in this section:

style="border: 3px solid #cccccc; padding: 5px;" <--This will add a wide grey border around the widget with some padding to ensure the text doesn't get too close to the edges.

style="background: #ffcc00;" <-- This will add a bright yellow background to the widget, ensuring this contrasts with other elements in the page.

style="background: url(http://imagehost.com/youricon.jpg) top left no-repeat; padding-left: 50px;" <--This will add an icon as a background image to your widget. The padding declaration ensures the text does not overlap the icon (this is the solution I use to feature the blue bird in my Twitter icon in the header section).

To add these style declarations into your Twitter widget, simply go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for your Twitter widget. Then locate the section of code which begins like this:

and add your styling code to this section.Here is an example of the Twitter widget code with style declarations added in red:

• style="background: url(http://bloggerbuster.com/images/twitter-icon.gif) top left no-repeat; padding-left: 50px;" id="twitter_div">

• follow me on Twitter

• view source click here
  

RSS Comments-update in discutions

Using comments subscription is easy way to update yourself about comments.in specific topic.According to
 Karl L. Gechlik other way is 

Replace your commenting system with Intense Debate for more control over comments with a social flare. It is really easy to do, check out this information from their web site:

Interested in the comments your friends make? What if there was a way to follow your friends and be notified when, where, and also what they comment? Intense Debate provides this functionality through RSS feeds for each user. Subscribers will be notified in their RSS readers with a direct link to view the context surrounding the comment as well. Give it a try!
Also, don’t waste anymore time checking back in on a blog to see if anyone responded to your comment. Now you can get email notifications of replies to your comments, letting you know when the conversation continues while you’re gone.

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

Removing The Blogger Bar

I hated the blogger bar across the top of my Web site because it didn’t really go with my template and I already had a Google search bar integrated. So I went on a mission to remove it and de-bloggerify my blog. I searched far and wide and for some reason kept hitting a dead end. It turns out that the code used to change the old blogger templates no longer works! So after tracking down the CSS changes here is how I did it:

All you need to do is add the following CSS to your template under edit HTML. You need to put in anywhere in your template between the tags.

#navbar-iframe { height:0px; visibility:hidden; display:none; }

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