WidgetsCorner: Widgets

Showing posts with label Widgets. Show all posts

SocioFluid

Do you want to have a Cool Bookmark on your blog? Go to SocioFluid ,it is a Dock Site Bookmark,

How to get Dock like Bookmark on your blog?

Go to SocioFluid and generate your own Website you want to add on your bookmark dock.

See Sample Image:

Click to see Full size,

Try this Sample Below:

Image Reflection

Here is a great tool for creating faded reflections for your images.

You can upload an image from your computer or any image hosted on the internet.

Either way, you'll get an amazing looking picture.

It can give your web pages more depth, which is always a good thing. Also, you can decide how big you want the reflection to be. Here I gave about a 50% reflection size for the image on the left.

Go to

ReflectionMaker

Pls. be patient,its lil bit Slow...to generate your image

Round Image Generator

Do you want to have a cool pictures with round sided?well click browse and enter your own image then click Round it! button

How to implement on your blog?

Go to "Design" > "Page Element"

Click on "Add a Gadget" > "Html/Javascript"

Now paste this Code below inside the box.

<form action="http://www.roundpic.com" method="post" enctype="multipart/form-data" target="blank"><input value="1048576" name="MAX_FILE_SIZE" type="hidden"><table><tbody><tr><td class="title"><b>Image:</b></td><td class="input"><input name="file" type="file"></td></tr><tr><td class="title">or <b>URL:</b></td><td class="input"><input value="http://" name="url" type="text"></td></tr><tr><br /><td colspan="2" class="submit"><button onclick="getLoader();" type="submit">Round it!</button></td></tr></tbody></table></form>

Preview first then Save.

Show/Hide Contents

How to Implement to your blog?
Log in to your Blogger account
Go to "Design" > "edit html"
Find this piece of code

</head>

Immediately Before that paste this code

<style type="text/css">
.commenthidden {display:none}
.commentshown {display:inline}
</style>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

How to use on your post?

<a aiotitle="" href="javascript:togglecomments('hideshowdemo')">+/- Click Here to Expand and Collapse</a>
    <div class="commenthidden" id="hideshowdemo"><ul>
    <li><a href="Your Url">Link Name</a></li>
    <li><a href="Your Url">Link Name</a></li>
    <li><a href="Your Url">Link Name</a></li>
    </ul></div>

Change The Url and Link Name With your Own...

Language Translator for Blogger

If you are having a blog and receiving visitors from various countries and cities of the world, then they may or may not be comfortable with the language of your blog. So adding a translator button or a widget is always useful.

Two options to add a translator:

Go to Layout and then Add a Gadget -> HTML/Javascript

Now copy and paste this code in to it:

Source: Google

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Then Save.

II.

Go to Layout and then Add a Gadget -> HTML/Javascript

to get the code, Click this MyDataNest

and paste to the "html/js" then save.

Adding Snowflakes

Falling SnowFlakes, use this code:

</script>

Falling leaves, use this code:

</script>

Preview first then Save.

Credits

Bouncing Icons

Log in to your blogger account
Go to Edit Html
Make sure to back up your templates first okies
Now find this code
</head>

Immediately before that paste this code

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/screen2.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/execute.js' type='text/javascript'/>


Next Find this
<data:post.body/>

Immediately After that paste this

<br/>
<b:if cond='data:blog.pageType == "item"'>
<center>
<ul id='nav-shadow'>
<li class='button-color-1'><a expr:href='"http://twitter.com/home/?status=Currently reading-" + data:post.title + " " + data:post.url' target='_blank' title='Tweet This Post'/></li>
<li class='button-color-2'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='button-color-3'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='button-color-4'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='button-color-5'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li></ul></center>
<a href="http://bloggerstop.net/2009/10/bounce-share-social-bookmarking-widget.html" target="_blank"><span style="font-size: x-small;">Get this widget</span></a>
</b:if>


Then Save.

Credits

Dancing Links and Pictures

Log in to your blogger account
Go to Edit Html
Make sure to Backup template first
Now find this code
</head>

Immediately before that paste this code

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>


How it works?

For links
<a href="Your URL" class="nudge">Text Here!</a>
Move Mouse Here!

For images
<a href="Image URL" class="nudge"><img src="Image Url"/></a>

Credits

AddThis Inside Post

I tried adding the "cool" new version of the AddThis bookmarking widget to this blog and found that it did not work as advertised. It was shown to have a dropdown menu, but that was not the case.

This is most likely due to the new lingo blogger's new templates use.

I searched for a bit until my patience timer ran out and having found no information with a fix -- I wrote one myself.

Rather than have a lot of people ask me how to make it work I thought I'd save myself a ton of time and just post a short HOWTO right here where you can see it working.

First register yourself with AddThis if you haven't already.

Now follow these instructions:

1.) Log into your Blogger account
2.) Go to 'Edit HTML'
3.) Click 'Expand Widget Templates'
4.) Search for: 
5.) Add the following code immediately above it -- no edits required

<div class="snarf-border">
<script type = 'text/javascript'>
addthis_url = '<data:post.url/>';
addthis_title = '<data:post.title/>';
addthis_pub = '<data:blog.url/>';
</script><script
src='http://s7.addthis.com/js/addthis_widget.php?v=12'
type='text/javascript' />
</div>

If your template adds borders to images and you don't want this widget to have a border then go to the top of the template and search for:

body {

then find the closing brace '}' for the 'body {' block and right beneath it add the following code:

.snarf-border a img { border: none; }

Jquery Tooltips for Blogger

Tooltips are used to generate small, floating boxes of the kind often used to provide contextual help in operating systems. Tooltips are almost always created dynamically based on user interaction (such as hovering over an element with the mouse).

To see an example tooltip hover with your mouse right here. Many have been looking forward how to use tooltips in blogger and here is the solution. Make sure you make a backup of your template.

Go to your blogger account and open "Layout" and go to "Edit HTML" section! Look for a line like this:

Find this piece of code (CTRL + F)

</head>

Immediately Before that code you searched paste this

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

<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>

Next step find this Piece of code

]]></b:skin>

paste this code before the code you search above

#easyTooltip{
padding:5px 10px;
border:1px solid #EF6D21;
background: #181C18;
color:#E0EFE0;
}

EF6D21 - Border Color
181C18 - Tooltip background color
E0EFE0 - Text Color

you may change the code in orange,black and green in any color you want...

then Save it.

to appear the Jquery Tooltips in your blog use this format:

<a class='tooltip' title='See this a Tooltip Sample' href="Your Link URL here">Your Text Here</a>

Redirect old Url to your new Url

1. Login in to Blogger Dashboard
2. Go to Layout >> Edit HTML of the blog, which you need to redirect to your favourite blog
3. Copy and paste the following code exactly below <head> tag

<meta name="robots" content="noindex" />
<script type="text/javascript"><![CDATA[//><!]]></script>
<meta http-equiv="refresh" content="0;URL=Enter Destination URL " />

4. Copy and paste the following code exactly below <body> tag

<p><a href="Enter Destination URL"></a>.</p>

Change letter in Red with the URL, where you want your blog to be redirected.

5. Don't forget to "Save Your Template"

Add stripe ads in blogger

Stript ads,how to make this stript to add functionality in blogger like navbar is showed at top in bloggers.You must have seen these stripe adds in many bloggers nowadays,as i when started blogging used to see that stripe add in johnchow blog and he use to sell that add for hundreds of dollars.This add will be shown at top of every page and is fixed add as we scroll it remains at same place.

Now i will tell you how to make this stripe ad to work in blogger, as it was designed as an wordpress plugin to be get used in wordpress blogs,but was based on javascipts,so it can be used by bloggers too as it we can use javascripts in bloggers becuse bloggers support javascrits.

Login into blogger with your ID
Click Layout
Click Edit HTML tab
Click Download Full Template and please back up your template first.
Find this piece of code

]]></b:skin>

immediately before that paste this code below

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkgC0DdfxMgVjEwVX5psEU20fPxKTkSEWYOCt1vp6Vs37q3JjS9pCXArWIDeZovNHPmmu_tpCBckkOpN0LOWkU63Hg0u_tj_eNQLna5ue-d9ap5q0B17PuooOgQOWYkN1mkGlQAlr1VAQ/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

Find this code in your template

</head>

and paste this code below before the code above.

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>
</script>

finally right above this code

</body>

Paste this...

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://widgetscorner.blogspot.com/2010/10/stript-addhow-to-make-this-stript-to.html' target='_blank'>How to add this srtipe add In blogger,Grab it here ?</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='Widgetscorner.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kQc8_pTTs6zs7baptB7wrM98FL_g3kYR67x5a9E_v1uBIvFRZZj4NnvqrPfr2zFuYcc68MYaiiiptPrdhenv7j47O0ecTo1HtsmDbxOl9jjcM8RXjOHqe_Oc93113HkCgc-kSMAz62s/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Now if you want it to be shown ads above, replace the code you add above ]]></b:skin> with this one.

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

Show Recent Comments

Log in to your Blogger account
Page element > add a gadget > Html/Javascript
Paste this code below inside the box

<script style=text/javascript src=http://www.freewebs.com/filer/blogger/rc1blogger.js ></script><script style=text/javascript >var a_rc=6;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src=http://WidgetsComment.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>

Remember to Change the Code in red with your Blogger id

Then save.

Create a MultiTab

Having multi tab on your blog will decrease space and its more portable.try to click image at your left side to see the original image of Multi tab.

Do you want to have a multi tab for your blogger?

Then find this code

</head>

Immediately before that paste the following codes below.

<script src='http://files.trickstutor.co.cc/uploads/2/1/4/1/2141293/tabber.js' type='text/javascript'/>
<link MEDIA='screen' TYPE='text/css' href='http://files.trickstutor.co.cc/uploads/2/1/4/1/2141293/example.css' rel='stylesheet'/>

Then save it.

ok now go to page element > add a gadget > Html/javascript

and paste the follow code for your tab,

<div class="tabber">
    <div class="tabbertab">
    <h2>Tab 1</h2>
    <p>Tab 1 content.</p>
    </div>

    <div class="tabbertab">
    <h2>Tab 2</h2>
    <p>Tab 2 content.</p>
    </div>

    <div class="tabbertab">
    <h2>Tab 3</h2>
    <p>Tab 3 content.</p>
    </div>
    </div>

The text in blue color is the tab Menu names,

While the text in red is the Menu contents

Sharing is Caring Bookmarks

Social networking buttons widget is a must for blogs and moreover you must be very creative while adding these buttons.
To make your work easier, here's an attractive bookmarking widget, that by default partially hides the buttons and shows them only when a visitor hovers his mouse-cursor over the icons.

Screenshot:

go to design > edit html

Find this piece of code

</head>

Immediately before that paste this code

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://img714.imageshack.us/img714/57/sharing.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}
div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(' http://img688.imageshack.us/img688/3998/sexybookmarksbuttons.png') no-repeat !important;
}
.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}
</style>

Now find this code

<data:post.body/>

Immediately After that paste this code

<div class='sexy-bookmarks'>
        <ul class='socials'>
        <li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        <li class='sexy-syndicate'><a href='FeedBurner URL' title='Subscribe to RSS'/></li>
        <li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
        </ul></div>

Replace FeedBurner URL with your blog RSS feed url.

Then Save.

Facebook Like for Blogger

Having Facebook like button under or even before your post makes your blog cool and hot, so come on and get start now to have your dream Facebook like button

Log in to your blogger account
Go to edit html
Back up your template first
Find this

<data:post.body/>

Immediately after that paste this code

<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

</b:if>

If you want to show everywhere, Remove the Line in Red.

Try changing "action=like" to "action=recommend"
Try changing "layout=button_count" to "layout=standard" a
Try changing "colorscheme=light" to "colorscheme=dark" or "colorscheme=evil"

Preview whats Suits you, then Save.

Tweet This

Want some tweet button on every post?

so you know if your reader like your post

you can see a Number of every click on it.

How to Install to your blog?

Go to Edit html
Before we proceed Backup your Templates first
Now find this piece of code

<data:post.body/>

Immediately before that paste this code:

For Upper Right Side of the blog here;

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Widgetscorner';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

For Upper Left side of the blog here;

<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Widgetscorner;
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Make sure to change the Widgetscorner username with your own.
Then Save.

Dancing Contents & Images

Go to Edit Html

Make sure to Backup template first

Now find this code

</head>

Immediately before that paste this code

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

How it works? ( add Class="nudge")

For links

<a href="Link Url" class="nudge">Your Text</a>

For images

<a href="Link Url" class="nudge"><img src="Image Url"/></a>

Click for Demo

Bouncing Bookmarks

Bouncing Website Bookmarks for your Blog.
to spice up your blog now.

How to Implement to your blog?

</head>

Immediately before that paste this code

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/screen2.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/execute.js' type='text/javascript'/>

Next Find this

<data:post.body/>

Immediately After that paste this

<br/>
<b:if cond='data:blog.pageType == "item"'>
<center>
<ul id='nav-shadow'>
<li class='button-color-1'><a expr:href='"http://twitter.com/home/?status=Currently reading-" + data:post.title + " " + data:post.url' target='_blank' title='Tweet This Post'/></li>
<li class='button-color-2'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='button-color-3'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='button-color-4'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='button-color-5'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li></ul></center>
<a href="http://bloggerstop.net/2009/10/bounce-share-social-bookmarking-widget.html" target="_blank"><span style="font-size: x-small;">Get this widget</span></a>
</b:if>

Then Save.

SocioFluid

Image Reflection

Round Image Generator

Show/Hide Contents

Language Translator for Blogger

Adding Snowflakes

Bouncing Icons

Dancing Links and Pictures

AddThis Inside Post

Jquery Tooltips for Blogger

Redirect old Url to your new Url

Add stripe ads in blogger

Related Posts Widget with Thumbnails

Show Recent Comments

Create a MultiTab

Sharing is Caring Bookmarks

Facebook Like for Blogger

Tweet This

Dancing Contents & Images

Bouncing Bookmarks

Subscribe

Follow us Today!

Chatbox

Followers

Image:
or URL: