First, why you need Google Buzz Button?

If you are a social media user and want to promote and grow your blog then this is a must need widget for you. Google Buzz button will help you and your readers to share your blog posts to the buzz stream of Google. With just a click, you can share your posts and this will help you start conversations, go with comments and make the social media engagement more interesting. Who wouldn’t like to spread his/her blog?

SO you interested in having the button for your blog ? Follow the steps below to add the google Buzz widget in your blogger blog.

1. Go to Layout >Edit HTML in your Blogger Dashboard of your blog.

2. Remember to backup your blogger Template before making any changes.
3. Make sure to check the “Expand Widget Templates” box.

4. Search for this line of code (or similar) in your template:

<div class='post-header-line-1'/>

5. Place the below code of Google Buzz just after the above line.

<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>

6. See if it works. Didn’t work for you? Don’t Worry, Try this. Search for the Below line of code.

<data:post.body/>

7. Place the above Google Buzz code under the code you have searched for above.

8. Save your Template and That’s it.

The above code will just add the simple Google Widget Button. If you want to have the widget that includes the share count button, then you need to go through the steps below.
1. Find the below code in your template.

<div class='post-header-line-1'/>

or

<data:post.body/>

2. After the code, add the below code of Google Buzz in your template.

<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>

Customization

You can change the style of the widget by making changes to the following code.

njuice_buzz_size = 'small';

or

njuice_buzz_size = 'simple';

just after

njuice_buzz_share = 'reader';

These codes will help you get your desired Google Buzz widget (as you see in the above pic) for your blog. I am sure you going to like them for your blog.

Have you got this buttons in your blog ? or are you just enjoying the default way of sharing posts through navbar? Which one is a cool idea ? Let us know in the comments below.

Related posts:

1. Use Google Buzz to Share your Blogger Blog posts
2. Facebook Like / Recommend button for Blogger Blog
3. Related Posts Widget with thumbnails for Blogger

  </head> 

and ABOVE the code; copy the following code.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Now find the below Code in your template. Remember easy way to locate codes if by using the Find option (ctrl+F) and copy pasting the code.

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

or

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

6. After you have located those codes, copy the following code and add it AFTER the code.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Widget Configuration

To change the widget’s default configuration, you need to edit the following lines for respective settings.
1. To change the total no of posts displayed in your blog posts, Edit the following line of code.

var maxresults=5;

2. To Edit the title of the widget, change the following line of code.

var relatedpoststitle="Related Posts";

3. To edit the default thumbnail (the image which is displayed when no image is there in your post), edit the following line of code.

var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

4.To Change the Colour of the Splitter Line , edit the following code.

var splittercolor="#d4eaf2";

You can make additional changes according to your need. This plugin was developed by Aneesh from Blogger plugins. Thanks for him for developing a really useful widget.
Are you using this widget or did you run into any problems with the widget ? Let us know in the comments below.

Related posts:

1. Related Posts Widget for Blogger / Blogspot
2. Related Posts by Categories; Blogger Widget
3. Recent posts Widget with images for Blogger

In this post we will learn how to add the Login box in your blogger/blogspot blog. Blogger Users here we go with the steps.
I hope you know how to add widgets to your blog.
1. Log in to your dashboard–> layout

2. Click on “Add a Gadget” where you need to place the login box or form.

3. A Pop-up window will open and select the Click on “Add a Gadget” and select “HTML/Java Script”.

4. Copy the code below and Paste Inside the box. Note : (Make Sure you copy only the content from form to /form)

[/html]
<form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>
1

5. Save the Html/Javascript and go on to your page to see how it looks.
6. If you have some idea on html, play with the variables used above to make the login box/ login form suitable for your blog.
If you have done everything correct, you should have the followng box in your blog as below.

Enter your username and password to enter your Blogger Dasboard

Username:

Password: (?)

I hope you like this. Do you use this form in your blog? Let us Know in comments below.

Related posts:

1. Recent posts Widget for Blogger / Blogspot
2. Related Posts Widget for Blogger / Blogspot
3. Recent posts Widget with images for Blogger

Widget Adding Instructions:

Follow these simple steps to get this widget on your blog.

1. Login to your Blogger Dashboard

2. Click on the blog’s Layout on which you want to add this widget.

3. click Add a Page Element on spot you want to add this widget

4. Add Html/ Javascript (click “add to blog” under the page element Feed)

5. Just copy and paste this code.

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://bloggeruser.blogspot.com/";

</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

6. Save the Widget.

Widget Customization

Customize Blogger Widget Edit the values under the following headings in the above html code to make the widget suitable for your blog.
(Edit the values to fit your blog)

boxwidth – Width of the widget
cellspacing – Space between cells (default one is good)
borderColor – Border color (add the background color of your template to perfectly blend it in the template)
thumbwidth & thumbheight – Width and Height of the thumbnail (default are good)
fntsize – Font size of the title
acolor – Color of the title
aBold – you want bold titles? (true or false)
numposts – How many posts you want to show?
home_page : http://yourblogurl.com/ (change this to your blog url)
Please download this script ( http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js )and upload to your server or some free pages.

Help and Comment

This widget is developed by Kranthi for her blog Blogger Tricks. Really thanks. If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !You can also comment if this widget has really helped you as i said.
You may also be interested in exploring the Rss method of adding recent posts widget.

Related posts:

1. Recent posts Widget for Blogger / Blogspot
2. Related Posts Widget for Blogger / Blogspot
3. Related Posts by Categories; Blogger Widget

Follow the below steps properly and in order to have the similar widget you see in the pic above.
Widget Adding Instructions / Steps:

1. Go to Blogger Dashboard – click Edit Layout – then click Edit HTML

Wait: Before Editing your Template, Save a copy of your current template by clicking ‘Download Full Template’ in ‘Edit HTML’ page of the Blogger ‘Layout’ Window and ‘Preview’ the changes before Saving.

2. Check the ‘expand Widgets Template Box” as shown in the figure below.

Check widgets Template Box

3.Then Search (Ctrl+F) the code given below in your template:

 <data:post.body/> 

4. Copy and Add the code given below just after the above code:

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’similiar’>

<div class=’widget-content’>
<h3>Related Posts by Categories</h3>
<div id=’data2007′/><br/><br/>
<script type=’text/javascript’>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values=’data:posts’ var=’post’>
<b:loop values=’data:post.labels’ var=’label’>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

5. Save your Template. That’s it.

Widget Customization
Customize Blogger WidgetYou can change the number of maximum related posts being displayed, search for the code below (within the code given in step 4) and change the number “3″ to any desired number. Its good to have related posts in accordance with the space available to display. Generally, two or three categories is enough. However, you may display the number of categories and posts as you wish.
maxNumberOfLabels = 3;

Widget Use and Summary
In conclusion, this widget is not only an important widget for making your blog look professional but also an important widget to help users to quickly navigate or move on to other important and related posts.
Help and Comment

Help and comment
If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !
Meanwhile, you can also visit “Related Posts Widget for Blogger / Blogspot” for a similar widget. You can also visit CELEBSIMAGE, one of the celebrity blogs which has this widget in action.
Also I want to know your view about this widget. So Comment !

Related posts:

1. Related Posts Widget for Blogger / Blogspot
2. Recent posts Widget for Blogger / Blogspot

Widget Adding Instructions:

Follow these simple steps to get this widget on your blog.

1. Login to your Blogger Dashboard

2. Click on the blog’s Layout on which you want to add this widget

3. click Add a Gadget on spot you want to add this widget

4. Add a Feed (click “add to blog” under the page element Feed)

5. After the pop up box appears follow the below steps to configure

a. Enter your blog’s feed URL in the box. Use the URL below.

Just replace the text “yourblogurl” with your own blog address. http://yourblogurl.blogspot.com/feeds/posts/default?alt=rss

or

http://www.yourblogurl.com/feeds/posts/default?alt=rss
(for self-hosted blogs)

b. Click Continue. Thats it.

Widget Customization

Customize Blogger Widget
Change the Title to “Recent Posts” or “Recent Entries” or whatever you prefer to call it. You can also choose to show the item dates and author. Also choose to display number of posts according to your choice.

Widget Use and Summary

This widget will certainly add an important feature to your blog. This also helps for one thing, it will increase your page view too because people will certainly explore your latest posts if they like the conent they are reading on the post pages.

Help and Comment

Help and comment BloggeruserIf you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !You can also leave a comment if this widget has really helped you as i said.

Related posts:

1. Related Posts Widget for Blogger / Blogspot

Follow the below steps properly and in order to have the similar widget you see in the pic above.
Widget Adding Instructions:

1. Go to Blogger Dashboard – click Edit Layout – then click Edit HTML

Wait: Before Editing your Template, Save a copy of your current template by clicking ‘Download Full Template’ in ‘Edit HTML’ page of the Blogger ‘Layout’ Window and ‘Preview’ the changes before Saving.

2. Check the ‘expand Widgets Template Box” as shown in the figure below.

3.Then Search (Ctrl+F) the code given below in your template:

</head>

4. Copy and Add the code given below just before the above line:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/a/bloggeruser.com/scripts/related-posts/Related_posts_hack.js' type='text/javascript'/>

5. Again Search(Ctrl+F) the code given below (or similar) in your template:

<div class='post-body>

or

<data:post.body/>

6. Add the code given below just after the above line

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

7. Save your Template. That’s it.

Widget Customization

Customize Blogger WidgetYou can change the number of maximum related posts being displayed, search for the code below (within the code given in step 6) and change the number “5″ to any desired number.

max-results=5

Its good to have related posts in accordance with the space available to display. Generally, five posts is enough. However, you may display the number of posts you like.
max-results=5

Widget Use and Summary

This widget is not only important widget for making your blog look professional but also an important widget to help your blog users to quickly navigate on another important and related post.
Help and Comment

Help and comment

If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !
Meanwhile, you can also visit “Related posts by category Blogger widget” for a similar widget.
Also I want to know your view about this widget. So Comment !

No related posts.