Add Google Buzz Buttons To Blogger Blog | Best-Blogger-Templates

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.

• . 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]

Show Comment Bubble at the top of each post | Free Blogger Widgets

Blogger Tips and Tricks

how To Make Comment Bubble At Top Of Blogger Posts,as you have seen it using in many blogs and i am sure you would not be knowing how to make and show that comment bubble count and link at top of the blogger post.So that's why i am here to make you learn it,and add it to your blogs.As its not as difficult as you might be thinking of.

As you would have checked my last blogger template-The latest Blogger template for sure and must have liked it.I have made 3-4 more proffesional templates for you,but unluckily today i got my exams schedule and will not be able to post these templates for you till 30 of july,so you have to wait for them ,as they need little finishng touch and testing with an installation guide,so will post these templates in beggining of august.

So we just continue with out tutorial on how adding comment bubble to top of each blogger posts.Some tutorials like these which you would like to read for sure are show labels as tags like woork and show post date as calender widget. For demo of comment bubble you can check the my blog as i have comment bubble or check the demo blog too.

Now To make comment bubble,Just
Login to blogger > Then go to Layout > Edit/Html > Expand Widgets > Press Ctrl+F

And Search For tag

]]></b:skin>

and place the below codes before it.

comment-bubble {<br /> float : right;<br /> width : 48px;<br /> height : 48px;<br /> background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;<br /> font-size : 18px;<br /> margin-top : -15px;<br /> margin-right : 2px;<br /> text-align : center;<br /> position:absolute;<br /> }

the image link of bubble,you can use yours and don't forget to change its width and height also of the image you use.To adjust the bubble position you can edit the distance from margin-right and margin-top properties of css.

Search this code ....in your html code of template...

<b:includable id="'post'" var="'post'"><br /> <div class="'post"><br /> <a name="'data:post.id'/"><br /> <b:if cond="'data:post.title'"><br /> <h3 class="'post-title"><br /> <b:if cond="'data:post.link'"><br /> <a href="'data:post.link'"><data:post.title/></a><br /> <b:else/><br /> <b:if cond="'data:post.url'"><br /> <a href="'data:post.url'"><data:post.title/></a><br /> <b:else/><br /> <data:post.title/><br /> </b:if><br /> </b:if><br /> </h3><br /> </b:if>

Select all the above code and replace with the code given below....its simple and easy ...

<b:if cond="'data:post.allowComments'"><br /> <a class="'comment-bubble'" href="'data:post.addCommentUrl'" onclick="'data:post.addCommentOnclick'"><data:post.numcomments/></a><br /> </b:if>

just save your template and you are done.Now you have added an comment bubble to bog in an very easy way you wouldn't have thought of.Enjoy this hack and let me know you liked it or not.

Best Blogger Templates

Show Comment Bubble at the top of each post | Free Blogger Widgets

Best Blogger Templates

How To Make Comment Bubble At Top Of Blogger Posts,as you have seen it using in many blogs and i am sure you would not be knowing how to make and show that comment bubble count and link at top of the blogger post.So that's why i am here to make you learn it,and add it to your blogs.As its not as difficult as you might be thinking of.

(Use the above Links for More Details I any given)

As you would have checked my last blogger template-The latest Blogger template for sure and must have liked it.I have made 3-4 more proffesional templates for you,but unluckily today i got my exams schedule and will not be able to post these templates for you till 30 of july,so you have to wait for them ,as they need little finishng touch and testing with an installation guide,so will post these templates in beggining of august.

So we just continue with out tutorial on how adding comment bubble to top of each blogger posts.Some tutorials like these which you would like to read for sure are show labels as tags like work and show post date as calender widget.

Now To make comment bubble,Just
Login to blogger > Then go to Layout > Edit/Html > Expand Widgets > Press Ctrl+F

And Search For ]]> tag and place the below codes before it.

float : right;<br /> width : 48px;<br /> height : 48px;<br /> background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;<br /> font-size : 18px;<br /> margin-top : -15px;<br /> margin-right : 2px;<br /> text-align : center;<br /> position:absolute;<br /> }

In red above is the image link of bubble,you can use yours and don't forget to change its width and height also of the image you use.To adjust the bubble position you can edit the distance from margin-right and margin-top properties of css.

Now after adding above css just find the below codes and add the red codes in between them as i have shown below.

<b:includable id="'post'" var="'post'"><br /> <div class="'post"><br /> <a name="'data:post.id'/"><br /> <b:if cond="'data:post.title'"><br /> <h3 class="'post-title"><b:if cond="'data:post.allowComments'"><br /> <a class="'comment-bubble'" href="'data:post.addCommentUrl'" onclick="'data:post.addCommentOnclick'"><data:post.numcomments/></a><br /> </b:if><br /> <b:if cond="'data:post.link'"><br /> <a href="'data:post.link'"><data:post.title/></a><br /> <b:else/><br /> <b:if cond="'data:post.url'"><br /> <a href="'data:post.url'"><data:post.title/></a><br /> <b:else/><br /> <data:post.title/><br /> </b:if><br /> </b:if><br /> </h3><br /> </b:if>

Afer adding red codes in between them just preview your template,if comment bubble is ok,just save your template and you are done.Now you have added an comment bubble to bog in an very easy way you wouldn't have thought of.Enjoy this hack and let me know you liked it or not.
And Friends i will try to schedule one or two posts for you,but that for sure will be small blogger tutorials which also will be very useful for you to learn a lot.

(Use the above Links for More Details I any given)

If You Like this Post Please comment ..

Blogger Tips and Tricks

Display your Post Dates as a Calendar Page | best blogger widgets

Best Blogger Templates

This customization allows you to use a calendar page instead of your regular post date, like this:

This is quite a simple customization to install using JavaScript and some minor changes to your template.

Download

Blogger Tips and Tricks

Tab View Widget | free blogger widgets

Blogger Tips and Tricks

This widget allows you to display your recent posts/comments or posts from specified categories using a “tab-view” widget, like this:

This widget will allow you to save space in your sidebar by adding these important elements in one place and is now becoming a popular feature of Wordpress powered blog designs.

You will need to edit your Blogger template to install this widget, but it’s certainly a useful and functional addition for your Blogger blog. Hoctro offers full instructions for installation and customization in hos explanatory posts.

Download

Best Blogger Templates

Blogger Tag Cloud Widget by Categories / Labels

Best Blogger Templates

This widget is perfect for blogspot users who desire a simple tag cloud for their Categories. The Labels Cloud can easily be implemented within the sidebar of your blog and will match your template wonderfully.



Steps for Implementation

Step 1: Back it Up
Always make sure to back up your Template before doing anything else!

Step 2: The Labels Gadget
Make sure that you have the Labels Page Element installed. If you haven't already...

1. Go to Layout >Page Elements .
2. Click "Add a Gadget" and then add the "Labels" gadget.

Step 3: Locating the "Old Code"

1. Now go to Layout >Edit HTML
2. Make sure that the "Expand Widgets Template" box is unchecked.
3. Now we need to search for the code that looks like this.

<b:widget id="'Label1'" locked="'false'" title="'Tags'" type="'Label'/">

Your code may look a little different. So try using your browser's search tool to find type='Label'.

/*<br /> Distributed by John Smith at WidgetsForFree.blogspot.com<br /> */ <b:widget id="'Label1'" locked="'false'" title="'Tags'" type="'Label'"><br /> <b:includable id="'main'"><br /> <b:if cond="'data:title'"><br /> <h2><data:title/></h2><br /> </b:if><br /> <div class="'widget-content'" style="'text-align:"><br /> <script type="'text/javascript'"> /* Simple Blogger Tag Cloud Widget by Raymond May Jr. http://www.compender.com Released to the Public Domain */ //Settings / Variables var max = 150; //max css size (in percent) var min = 70; //min css size (in percent) var showCount = false; // show counts? true for yes, false for no var minCount = 1; // what is the minimum count for a tag to be shown? 1 for all //Begin code: var range = max - min; //Build label Array var labels = new Array(); <b:loop values="'data:labels'" var="'label'"> labels.push("<data:label.name/>"); </b:loop> //URLs var urls = new Array(); <b:loop values="'data:labels'" var="'label'"> urls.push("<data:label.url/>"); </b:loop> //Counts var counts = new Array(); <b:loop values="'data:labels'" var="'label'"> counts.push("<data:label.count/>"); </b:loop> //Number sort funtion (high to low) function sortNumber(a, b) { return b - a; } //Make an independant copy of counts for sorting var sorted = counts.slice(); //Find the largest tag count var most = sorted.sort(sortNumber)[0]; //Begin HTML output for (x in labels) { if(x != "peek" && x != "forEach" && counts[x] >= minCount) { //Calculate textSize var textSize = min + Math.floor((counts[x]/most) * range); //Show counts? if(showCount) { var count = "(" + counts[x] + ")"; }else{ var count = ""; } //Output document.write("<span style="'font-size:"><a href="'" style="'text-decoration:none;'">" + labels[x] + count + "</a></span> " ); } } </script><br /> <br /> <br /> <span style="font-size:80%;">Powered by <a href="http://www.widgetsforfree.blogspot.com">WidgetsForFree</a></span><br /> </div><br /> </b:includable><br /> </b:widget>

Step 5: Previewing the New Tag Cloud
Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you've completed all the steps correctly.

Blogger Tips and Tricks

Recent Posts Widget for Blogger with Thumbnails, Summaries, Comments, etc

Blogger Tips and Tricks

Display beautifully crafted links to Recent Posts on your blog with this widget. You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles.


Features and Customization:

1. The Recent Post Titles
2. Display Post Thumbnails
3. Choose which blog posts to display (choose URL).
   
4. Display Post Summaries
5. Length of Summaries
6. Display Post Date
7. Display Number of Comments on each post
8. Display Read More Link
9. Display separator between posts
10. Number of Posts do Display
11. Determine height

Install the Recent Post Widget on Your Blog:

This widget is very simple to install. Just simply click the button below to choose which blog you would like to implement it on.

Best Blogger Templates

Add Digg Vote Button Counter Widget to Blogger

Best Blogger Templates

This tutorial explains how to integrate a Digg Button into your blogger template, which will be displayed in each of your blogger posts. The button displays the amount of times each post has been dugg and lets users digg directly from your blog.


Here are the Steps:

• Make sure to Backup your Template!
• Open your blogger template, click Expand Widget Templates, and search for the code below:

<data:post.body/>

• Add this code below directly above the searched code above:
  
  

<!-- DIGG --><div style="'float:right;"><script type="'text/javascript'">digg_url = '<data:post.url/>';</script><script src="'http://digg.com/tools/diggthis.js'" type="'text/javascript'/"></div> </div>

• Now Preview and Save your Template!

Blogger Tips and Tricks