Pro Bloggers : Blogger Widgets

Showing posts with label Blogger Widgets. Show all posts

Spinning Pages Or Links Widget For Blogger

Posted by Anonymous On 8:11 AM No comments

This cool jQuery Spinning Pages or Links Widget For Blogger. This widget is a mixture of jQuery And Css. This widget has a spinning effect. The pages or links mentioned spin and on hover go on slowing down and the stop. This widget is easy to put so have it in your blog.

Demo

Steps To Add Spinning Links Widget

Login to your Dashboard.
Go to Templates >>Edit Html.
Find for <head> tag.
Paste the below below the <head> tag.

Now, go to Layout.
Add a Gadget >> Html/Javascript.
Paste the below code there.

<div id="link">
<ul>
<li><a href="#">Ajax</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">Chrome</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Safari</a></li>
<li><a href="#">Web</a></li>
<li><a href="http://blog-toolz.blogspot.com/">Add This</a></li>

</ul>
</div>

Now, click on Save and Enjoy the widget.

It's Done.

Featured Post Widget For Blogger

Posted by Anonymous On 4:01 AM No comments

This is another widget to increase traffic and inbound links. This widget will make your readers surf more on your blog. This widget is placed at the bottom of your Blog. This can be customized by us.

Why To Use It ?

Easy To Use.
Eye Catchy.
Low CSS means High Loading Speed.
Easy To Customize.

Steps To Add This Featured Post Widget

Login to your Dashboard.
Go to Layout.
Add a Gadget >> Html/Javascript.
Paste the below code There.

Note: Change the Red,Green,Blue,Pink Link as per it is written.

Now, Click on Save.

Graphical Subscription Widget For Blogger

Posted by Anonymous On 7:08 AM No comments

This is awesome graphical widget made by me. This widget has a cool look. This widget looks as if the text area has come out through the blogger icon. I have provide you many subscription gadgets before. This widget can be placed any where. As we know that readers are more important then traffic. So to increase readers we need some subscription widgets. Having such a catchy widget will surely increase your readers.
So have it in your blog.

Steps To Add This Graphical Subscription Widget

Go to Blogger.
Go to Layout.
Add a Gadget >>Html/Javascript
Paste the below code there.

Note: Change the red text with your username.

Now, click on Save.

It's Done.

Netoopsblog Like Widget For Blogger.

Posted by Anonymous On 9:32 PM 2 comments

This is awesome looking follow me widget with subscription box.This widget is officially made by Netoopsblog. Thanks to netoopsblog to provide the tutorial of this such an awesome widget.This widgets icons look as if they are made of decomposing wood hanging on the wall of your blog.And below the follow me buttons there is a subscription box which is also very important in increasing traffic.

Steps to Add This Follow Me Buttons To Blogger

Login to your Dashboard.
Go to Layout.
Add a Gadget >>Html/javascript.
Paste the below code there.

Note: Change the above red text as per your requirement.

Now, click on Save.

It's done.

Top Commenters Widget With Rounded Avatars

Posted by Anonymous On 12:23 AM No comments

Yet another WordPress widget for blogger. This widget is Top commenters widget.This widget only made to increase your blog's comments. This widget shows the Top Five Commenters name with their thumbnail in a round shape. This widget showed be placed below every post so that is appreciates the readers to comment
on your blog.It also specify the number of comments that the Top Commenters have written.So to increase Blog's Comments have this widget in your blog.

Steps To Add Top Commenters Widget

Login to your Dashboard.
Go to Layout.
Add a Gadget >>Html/Javascript.
Paste the below code there.

Note: Change the red text number with your requirement.

Now, click on Save.

To Add This Widget Below Every Post

Go to Templates.
Edit Html>>Expand Widget Templates.
Find for the Below Code.

Paste the Below Code just after the above code.

Now, click on Save the Template.

It's done.

Random Post Widget For Blogger

Posted by Anonymous On 3:56 AM No comments

This is another great widget for making your readers stick to your blog. This widget shows you random post on every refresh. So that readers get some new thing to see and increase your page views.This widget also has a Zoom effect on hover. This widget is made by Tien Nguyen. Thanks to him to him to provide this awesome widget. So have this widget in your blog.

View Demo

Steps To Add Random Post Widget

Click on The Above Button.

Alternative Method To Add Random Post Widget

Login to your Dashboard.
Go to Layout.
Add a Gadget >>Html/javascript.
Paste the below code there.

Note:Change the Red and Blue number with your post number and summary length.

Click on Save.

It's Done.

Tilting Social Media Follow Me Buttons for Blogger

Posted by Anonymous On 10:50 PM No comments

This are another Social Follow Me Buttons For Blogger. I have named this buttons as "Tilting Follow Me Buttons". They are named so because of there behavior on hover. This buttons look normal and on hover this buttons tilt a bit. This buttons are tilted 60deg. You can change there tilt by changing the 60 value with any other value. This buttons can be place any where in your blog. So have them in your blog.
See the Demo You Will Understand everything.

View Demo

Steps To Add This Follow Me Buttons To Blogger

Login to your Dashboard.
Go to Layout.
Add a Gadget >>Html/Javascript.
Paste the below code there.

Note:- Change the above red text as per your requirement.

Now, click on Save.

To Have This Widget Below Every Post.

Go to Templates >>Edit Html >>Expand Widget Template.
Find for <div class='post-footer-line post-footer-line-1'/>.
Paste the below code just below the above code.

<b:if cond='data:blog.pageType == "item"'>
<style>p#blog-toolz_tilting-buttons img {
}

p#blog-toolz_tilting-buttons img:hover {
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}

</style>

<center><p id="blog-toolz_tilting-buttons">
<a href="http://www.facebook.com/BloggingTrickzAndToolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-fb.png" /></a>
<a href="http://www.twitter.com/BlogToolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102590191362594199985">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-g.png" /></a>
<a href="http://www.feeds.feedburner.com/blog-toolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-rss.png" /></a>

</p></center></b:if>

Note.1 :-This widget will only be seen on the post page. If any one want to have it on your home page also then remove the green text.

Note.2 :-Replace the above red links as per your requirement.

Now, click on Save the Template.

It's Done.

Support Your Country In London Olympics 2012 Through Blogger

Posted by Anonymous On 1:15 AM No comments

This is a good looking supporting badge for Olympics for those who love sports and seeing it. This badge has a Country Flag picture and below return is i support this flag in London Olympics 2012. Having it will make your blog seem supportive to Olympics. So have it in your blog and support your country in London Olympics.
View Demo

Follow The Steps To Support Your Country

Login to your Dashboard.
Go to Layout.
Add a Gadget >> Html/Javascript.
Paste the below code there.

<a class='olympic-support-blog-toolz' href='#' target='_blank'>
<h4 class='hsupport'>I Support</h4>
<img src='http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-india-flag.jpg' title='I am supporting my country for the Olympics'/>
<h4 class='hsupport2'>For the London 2012</h4>
</a>

Now, go to Templates >>Edit Html.
Find for ]]></b:skin>
Paste the below code just above it.

.olympic-support-blog-toolz {
position: fixed;
top: -8px;
text-decoration:none;
right: 16px;
background-color: rgba(255, 255, 255, 0.87);
text-align: center;
padding: 12px;
border: 2px solid #888888;
width: 100px;
border-radius: 0px 0px 20px 20px;
font-family:'georgia';
color:grey !important;
text-shadow:1px 1px 1px white;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.olympic-support-blog-toolz:hover {
background-color: white;
text-decoration:none;
color:black !important;
}

Now, click on Save the Template.

It's Done.

Follow Me buttons with Counter and Rollover Effect For Blogger

Posted by Anonymous On 1:13 AM No comments

This is one of the coolest follow me buttons on blog-toolz.I have named these buttons as "Follow Me Buttons With Counter And Rollover Effect" as they have both effects. This buttons have a hover effect. On hover these icons change into junked steel like icons this buttons will cool for any blog.This buttons also have a text written on there right side. These text can be changed with your text. So i will teach you how to add this buttons to your blog.
View Demo

Steps To Add Follow Me Buttons To Blogger

Login to your Dashboard.
Go to Layout.
Add a Gadget >>HTML/Java Script.
Paste the below code there.

Note:- Change the Red Links with your Links. You can also change the Green numbers with yours

Click on Save .

It'sDone.

Box Sharing Buttons Below Every Post For Blogger

Posted by Anonymous On 12:46 AM 2 comments

This is another social tweet, like and share widget for blogger. This widget is placed below every post. This widget looks good for its position.This widget is boxed Faceook, Twitter and Google+ icons and in the center the like,tweet and share buttons are placed. This widget will make your blog spread more. So have it in your blog.

Steps To Add This Box Sharing Buttons To Blogger

Go to your Dashboard.
Go to Templates.
Click on Edit Html >>Expand the Widgets.
Find for the below code.

Just above it paste the below code.

<b:if cond='data:blog.pageType == "item"'> <style> .promote_post_bg { height: 103px; background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzsharingbuttons.png) 0 -7px no-repeat; width: 500px; margin-left: 65px; } .promote_twitter { width: 130px; height: 38px; float: left; margin: 0 39px 0 0; padding: 65px 0 0 13px; text-align: center; } .promote_facebook { width: 115px; height: 40px; float: left; margin: 0 39px 0 0; padding: 63px 0 0 28px; text-align: center; } .promote_google { width: 65px; height: 40px; float: left; margin: 0 39px 0 0; padding: 65px 0 0 28px; text-align: center; } </style> <div class='promote_post_bg'> <div class='promote_twitter'> <a class='twitter-share-button' data-via='BlogToolz'href='https://twitter.com/share'>Tweet</a> <script> ! function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs"); </script> </div> <div class='promote_facebook'> <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false' show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like> <div> <b:if cond='data:post.isFirstPost'> <script> (function (d) { var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> </b:if> </div> </div> <div class='promote_google'> <g:plusone annotation="none" size='medium'></g:plusone> <script type='text/javascript'> (function () { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> </div> </b:if>

Now, Save the Template.

It,s Done.

Message or Notification Scroll Out For Blogger

Posted by Anonymous On 6:34 AM 5 comments

This is an amazing message scroll out for blogger. This widget can be added to any to any blog for some notification or any important message. This widget is made by me and has a simple css hover effect in it.

Steps To Add Message Scroll Out To Blogger

Login to your Dashboard.
Go to Templates >>Edit Html.
Find for ]]></b:skin> tag.
Paste the below code before ]]></b:skin> tag.

.message-slide-out-by-blog-toolz {
position:fixed;
z-index:9999;
text-decoration:none !important;
color:white !important;
background-color:rgba(34, 34, 34, 0.64);
padding:10px;
font-family:'verdana';
font-size:13px;
border-radius:0px 5px 5px 0px;
top:10px;
left:-180px;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
font-weight:bold;
padding-left:35px;
}
.message-slide-out-by-blog-toolz:hover {left:0px;}

Now,click on Save the Template.
Now,go to Layout.
Click on Add a Gadget >>Html/Javascript.
Paste below code the there.

<a class='message-slide-out-by-blog-toolz' href='http://blog-toolz.blogspot.in/2012/07/css-bullet-style-hover-effect-for.html' target='_blank'>Colour Changing Bullet Style</a>

Note: Change the red link with your link and green text with your display text.

Now,click on Save.

It's Done.

CSS Styled Popular Post Widget For Blogger

Posted by Anonymous On 6:00 AM No comments

This is a different type of Popular post widget which is designed by Deepak Kamat.This widget changes its color as per the popularity of the post like a Heat Meter.Having this widget is too lengthy so i have added it to a single button.This widget also has nudge effect and hover effect
View Demo

Steps To Add CSS Popular Post Widget

Login to your Dashboard.
Go to Layout >>Add a Gadget.
Choose for Popular Post Widget.
Add Setting as in below image.

screen shot of settings of popular post widget

Now, Click on the Below button.

Then Click on Add Widget.

It's Done.

Slide Out Yahoo Music Player For Blogger

Posted by Anonymous On 3:36 AM No comments

This is a Music Player for your blog. Many people love music and also want to add music to ther blog. It has a slide out effect. This music player floats at the left down corner of your blog.So have it in your blog.

View Demo

Steps To Add Yahoo Music Player To Blogger

Login to your Dashboard.
Go to Layout >>Add a Gadget.
Choose for Html/Javascript.
Paste the Below Code there.

Note.1:- Change the Red Text With Your Songs Url.

Note.2:- Change the Green Text With Your Songs Name.

Now,Click on Save.

It's Done.

To have some more info on Yahoo Music Player click here

Slide Out Sharing Buttons For Blogger By Website Informer

Posted by Anonymous On 3:23 AM 1 comment

This is Pop Up Sharing Buttons for Blogger. This Buttons Are placed at the button of your Blog. On Click on More.... Button it Pop Ups with many more Sharing Buttons.This buttons have a smooth pop p effect. This buttons are made by Website Informer.com. So have this buttons in your blog.

View Demo

Follow The Below Steps:

Click on the above button to Add it to Blogger.

It's Done.

Steps To Add Spinning Links Widget

Why To Use It ?

Steps To Add This Featured Post Widget

Steps To Add This Graphical Subscription Widget

Steps to Add This Follow Me Buttons To Blogger

Steps To Add Top Commenters Widget

To Add This Widget Below Every Post

Steps To Add Random Post Widget

Alternative Method To Add Random Post Widget

Steps To Add This Follow Me Buttons To Blogger

To Have This Widget Below Every Post.

Follow The Steps To Support Your Country

Steps To Add Follow Me Buttons To Blogger

Steps To Add This Box Sharing Buttons To Blogger

Steps To Add Message Scroll Out To Blogger

Steps To Add CSS Popular Post Widget

Steps To Add Yahoo Music Player To Blogger

Follow The Below Steps:

Site search

Labels

Labels

Categories

Blog Archive

Subscribe via email