Blogger Widgets And Gadgets

Webpage Content Toolbar Widget

Written By Unknown on Thursday, 8 December 2011 | 07:11

Webpage Content Toolbar Widget

Let your readers easily share, email, print, and bookmark your web pages with these buttons. This widget works really well in your blog's sidebar, where your readers can easily see it. As you can see the demo above, the buttons are spread out, on your site they will be closer together.

+- Get this Widget

Copy and Paste the code below into your site

Customizing this Widget

If you would like to rearrange the order of the buttons search for this line of code below. Rearrange the the names according to your liking or remove any that do not suit your needs.

print,email,bookmark,share

You can also make these button display themselves horizontally instead of vertically. Search for the line of code below.

stenium_layout = '1';

Replace it with this line of code.

stenium_layout = '0';

"Review My Blog" Widget

User reviews are one of the most valuable interactive features your site can deploy. By building trust and confidence, reviews improve conversion rates, time on site and overall site experience. Users can add their own reviews, rate reviews submitted by others and engage in threaded conversations.

Please take note that when you make a review, you are reviewing that specific url. Below you can click to see the demo and please give this widget or my site a review.
+- Get this Widget

The HTML code:

For google powered blogs:

Youtube Videos Search Widget

http://imgcash6.imageshack.us/img397/4715/youtubelogokr3.png

Add a mini Youtube Videos search engine in the sidebar of your blog. The search module displays it's results on youtube.com, which will let you and your users quickly find the videos you are looking for.

For google powered blogs:

The html code:

For google powered blogs:

The html code:

Buy Me a Beer / Buy me a coffee for blogger

I got some requests about implementing the Buy me a beer / Buy me a coffee widget after each of your blog post..So i decided to write this out for you..

Goto your Blogger Template> Edit HTML and expand the widget templates..Now find

and immediately after that place the text from this file after properly editing it with your paypal email address(replace youremailaddress with the email address using which you registered at paypal)..

If you have any doubts leave a comment.. and if you like the trick then why not buy me a coffee from that link below!!??

U Comment I Follow Blogger Widget/Plugin

As you guys know the comment field of my blog is do follow..If you too have a blogger blog whose comment field is Do Follow,then let others know of this by adding the Do follow widget to your blog.If you don't know of the Do Follow movement read about it here.. If you are already having a Do Follow comment field for your blog then add the following plugin / widget to your blog

Note: Dofollow Widget is no longer available as i am not a part of it now.
Update: This blog is no longer a part of the DO FOLLOW movement.. I am shutting it down due to excessive comment spam..

My Blog Post widget for your Blog

I have created a widget that will list my blog's recent posts on your blog.
If you are using blogger you can add this widget to your blog.
This widget will list my blog's latest 5 posts on your blog.To add this widget you can use the button below
.Thanks to Beautiful Beta for helping me in making the widgets..
Once you install this widget on your blog your blogs's sidebar will show the latest posts on my blog.
So grab the widget and get a backlink from my blog.

Note: If you are reading this in a Feed Reader the widget installer wont be displayed.So visit the actual article on the site to install the widget.

Drop Down Subscription Box or Widget

Drop Down Subscription Box or Widget

Everybody knows the imprtance of Rss feeds.So its better to give the readers an option to subscribe to your feeds in their favourite Rss Reader..

Here in this blog you can see a Drop Down Subscription box on the left.Here is how i implemented it..

Goto your Blogger Template>Edit Html and find

body {

and place the following code just above it..

/* http://www.bloggerplugins.org--- Dropdown Subscription Box
*/
.img0 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em;background: url("http://simpletricksblog.googlepages.com/rss.jpg"); cursor:hand;cursor:pointer;}
.img1 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addgoogle.gif"); cursor:hand;cursor:pointer;}
.img2 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif"); cursor:hand;cursor:pointer;}
.img3 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://www.netvibes.com/img/add2netvibes.gif "); }
.img4 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/rss-bloglines.gif "); cursor:hand;cursor:pointer;}
.img5 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://www.newsgator.com/images/ngsub1.gif ");cursor:hand;cursor:pointer; }
.img6 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addmymsn.gif ");cursor:hand;cursor:pointer; }
.img7 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addrojo.gif "); cursor:hand;cursor:pointer;}
.img8 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addmyaol.gif "); cursor:hand;cursor:pointer;}
.img9 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addfeedlounge.gif "); cursor:hand;cursor:pointer;}
.img10 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addnewsburst.gif ");cursor:hand;cursor:pointer; }
/* End Simple Tricks Coding */

(it not necessary to put it exactly above body { but i mentioned it to avoid confusion.)

Now add the following widget to your blog.(The widget will work only if you have done the template edit mentioned above)

Note: If you are reading this in a Feed Reader the widget installer wont be displayed.So visit the actual article on the site to install the widget.

Rate your Blogger Posts with 5 Star Ratings

Blogger Officially has a Star Ratings Widget, but the Rating Stars provided by Blogger are too small and not so beautiful. Outbrain has come up with an alternate Rating system which can be easily added to any platforms including Blogger.
You can see a Demo of this Ratings Widget at the Bottom of this post.

How to Install Outbrain Star Ratings?

Method 1

Register at the Outbrain Website and Activate your account(check your email after registering)
Select the Recommendation Type (Text / Thumbnail) and Choose Blogger as your Platfrom. Type your blog URL , agree to the Outbrain Terms and Click the Install Button.
You will be prompted to add a Widget to your Blog. Add the Widget and Get back to the Outbrain Website and navigate to My Account > Manage Blogs
If your blog Claim is pending, Click on the Check Now Link
Once you have Claimed your Blog, Go to Settings
These are the Settings that i used

I have disabled the Recommendations and Disabled the “Most Popular” Gadget.

Method 2
You wont be able to configure the Widget and you wont be able to hide th Recommendations if you follow this Method.So Follow Method 1 :) This method with some mods can be used to position the ratings gadget and for selectively displaying it.
1. Login to your Blogger Dashboard and go to the Edit HTML page under the DesignTab , Check the “Expand Widget Templates” Option and locate

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

Or if that is not there then find

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

Or if that is not there then find

<data:post.body/>

and place the following code just below any of these lines[whichever is present in your template].

<script language='text/javascript'> 
 var OutbrainPermaLink="<data:post.url/>"; 
 var OB_demoMode = false; 
 var OB_Script = true; 
 </script> 
 <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

and Save your template.
2. Now you would be able to See the new Star Ratings Below each of your Blogger Posts

Optional Tweak

If you want to display the Star Ratings on the Post Page only, then Wrap the Ratings code within Conditional Tags like

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <script language='text/javascript'> 
    var OutbrainPermaLink="<data:post.url/>"; 
    var OB_demoMode = false; 
    var OB_Script = true; 
    </script> 
    <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
</b:if>

How to Install the Recent Comments Widget For Blogger

Before installing the Recent Comments Widget, take a look at the following Settings in the Widget Installer.

This should be the URL of a blogger Blog. If you are installing the Widget on the same blog then you can leave this field blank . This field is useful for those who have multiple blogs..
Number of comments – The number of comments to be displayed in the Widget
Show comment date – If you want to show the comment date, then tick this option
Show post title – If you want to show the title of the post on which comment has been made, then tick this option
Summary Size : If the comment is more than this size in length, then the rest of the comment will be chopped off

Now that you are clear with the settings, click on the below button to add the Widget to your Blog.

Or CLICK HERE

Credits : This is a slightly modified version of the Recent comment widget by Beautiful Beta

If you have any questions or suggestions regarding this widget, feel free to comment on.

Google Talk Widget For Blogger / BlogSpot

Google Talk is one of the most popular IM clients on the Web. The Google Talk Widget for Blogger will help you in adding an elegant Google Talk badge to your Blogger / BlogSpot Blog.

The Google Talk Widget comes in 2 varieties. You can add any of these two widgets.Both of them are different and work differently :)

1.Google Chat Back Gadget – This gadget allows your visitors to IM you without revealing your Gmail address.you can chat with your blog visitors like what you normally do with your IM buddies. The only difference here is that your identity wont be revealed.

How to Install the Google Chat Back Gadget?

1. Login with your Google Account at Google Talk Badges

2.Copy the HTML Code generated by Google

3.Now login to your Blogger Account and Navigate to Layout > Page Elements Page

4.Click the Add Gadget Link and Opt to add an HTML/JavaScript Gadget

5.Paste the HTML code(that we copied) into the Gadget and Save it.

6.Now you should see the Google Chat Back Widget on your Blog’s sidebar.

Here is a Screenshot of what the Google Chat Back Widget will look like

2. Google Talk Gadget – This Gadget is just like the Google Talk Interface within your Gmail. This will allow your blog visitors to login to Google Talk. It is better to say that, once you add this gadget, your blog can serve as a Google Talk IM Client. This Widget wont allow the visitors to chat with you. If the visitor logs into his Google Talk account(via this Google Talk Gadget), he will be able to chat with his Google Talk Buddies and not with you(the blog owner)unless you were already on his buddy list :)

You can add this Widget easily using this One Click Installer. It will Add the Widget to your Blog’s Sidebar.

Permalink : Google Talk Widget for Blogger

Technorati Rank Widget for Blogger / Blogspot

Technorati is an Internet search engine particularly for searching blogs.Technorati has a ranking system based on the number of references made to the blog.I have now made a widget which will display your technorati rank in a similar way as the feedburner count is displayed.The widget also comes with a Add to Technorati feature which allows your blog readers to favorite your blog at Technorati.Com

You can see a demo of the widget here on my test site.

To get this widget working you will have to get a Technorati API key from here.
Copy out the technorati api key and give the details in the widget installer below..
You should give the following details there..
1)Your Site Url
and
2)Technorati API Key..
If you like my widgets, why not favorite me at technorati using this link :)

I had lost all my technorati ranking and authority when i moved to the new domain..

Note: If you are reading this in a Feed Reader the widget installer wont be displayed.So visit the actual article on the site to install the widget.

Blogger Tag Cloud Widget by Categories / Labels

Written By Unknown on Wednesday, 7 December 2011 | 17:31

Blogger Tag Cloud Widget by Categories / Labels

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 UpAlways make sure to back up your Blogger 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...

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

Step 3: Locating the "Old Code"

Now go to Layout >Edit HTML
Make sure that the "Expand Widgets Template" box is unchecked.
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'.

Step 4: Replacing the "Old Code" with the "New Code"

Once you've located type='Label', remove the whole line of code that looks just like the code mentioned in part 3 of step 3.

Replace this code that you've just deleted with the code below:

/*
Distributed by John Smith at WidgetsForFree.blogspot.com
*/ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<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(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</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 != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}
</script>
<br/>
<span style="font-size:80%;float:right;">Powered by <a href="http://www.widgetsforfree.blogspot.com">Blogger Widgets</a></span>
</div>
</b:includable>
</b:widget>

Blogger Templates and WordPress Themes by ThemeForest

ThemeForest offers professional blog templates and themes at affordable prices. If you can't afford to hire that expensive designer then ThemeForest is the right place for you. They offer wonderfully designed WordPress Themes andBlogger Templates which will help make your blog stand out from the rest of the crowd.

More about ThemeForest

ThemeForest has a growing collection of hundreds of nicely designed templates. The prices range from about $10 to $35. In most cases the wordpress themes are a little more expensive and nicer looking than the templates for blogger.