Scrolling Like Social Sharing Buttons Widget For Blogger

Today I'm going to share Scrolling Like Social Sharing Buttons Widget For Blogger. It's going to increase your visitors growth. It will also increase your social group counters just like facebook, google plus & twiters. For anyone who is still struggle to receive a massive traffics from social media marketing websites then were strongly recommended to use this widget. Many individuals called it Don't forget to join our community widget regarding blogger were presenting people as free of costs.
Truly this widget is completely created within Css & javascript having awesome diverse stylishly designing. Due to coding within javascript many Bloggers dislike because many of us also know from so very long that any gadget coded within javascript may compel the blog on filling time. But possibly be trust about me this gadget isn't that much heavy. it has a simple layout as well as less javascript coded incorporated. We possess changed this designing directly into different stylishly designing. It has become decorated having several color. Bloggers usually are advice to choose a greatest one in line with his/her blog site designing & designs.

How does it Work:

As the name "scrolling" by means you can use that by scrolling your mouse here at the top and bottom. This gadget can look if person bring your mouse cursor in the bottom in the blog. When your cursor of the mouse cross the center of blog or maybe website it is going to suddenly seem.

How to Install Scrolling Like Social Sharing Buttons Widget:

Follow easy steps to install this gadget. Choose the color from given colors below according to your template design and color.

Step 1. 

Here is a complete listing of all common colors widget with diverse style. You will only have to pick and also the best one in line with your website designing layout.

This may remember just because after deciding on the widget it colour code will probably replace while using the default colour code into the widget coding. Just simply copy large code from the below leading 14 widgets. Get your individual choice.

#DC143C

#32CD32

#9400D3

#191970

 #663333

#808000

 #B0E0E6

#D2691E

#F3F3F3

#F4A460

#FFFF00

#000000

#708090

#A0522D

Step 2. 

Login to Blogger account.

Then go to template and Find this ]]></b:skin> Piece of code by pressing Ctrl+F.

Copy the Following code and paste just before/above ]]></b:skin>.

See in following Image.

#pbtsocialslide{background:#f3f3f3;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
-moz-box-shadow:inset 0 0 3px #333;
-webkit-box-shadow:inset 0 0 3px #333;
box-shadow:inner 0 0 3px #333;
padding:12px 14px 12px 14px;
width:300px;position:fixed;
bottom:13px;
right:2px;
display:none;
z-index:3;
height:65px;}

Replace the Red Color(#f3f3f3) with the gadget code that you have chosen from above given gadget code.

If you want to curve sides of gadget then replace the value from 9px 9px 9px with 3px 49px 49px. It will Look like below gadget.

Step 3:
 Again go to blogger Dashboard

Go to layout >> Add Gadget >> HTML/JavaScript

copy the below code and paste into HTML/JavaScript Box.

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

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#pbtsocialslide").show("slow");else $("#pbtsocialslide").hide("slow");});function closePBTsocialslide(){$('#pbtsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="pbtsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closePBTsocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FBlogger2wordpress&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/Blogger2wordpress" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</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>

<div class='clear'></div>


Remember: 
Replace the Red color text with your Facebook Username.

Replace the Light Blue Color text with your twiter username.

Now save it...

Read More

How to Add Fixed Social Media Sidebar for Blogger

Social Gadget/widget is very help full for all bloggers. In previous Posts I told you about many Social Widget/gedgets .In this tutorial i'll tell you about a new and beautiful social media sidebar widget/gadget. This gadget is fixed in sidebar.

ScreenShots

Read More

Add Slide Open Egg Social Shareing Widget for Blogger

Social Sharing Gadget are usually often chosen simply by Writers for Sharing their own content material with Different Social networks. I previously share CSS based Social Sharing widget with you and if you want to try our Best Blogger Widgets then try here.


It is a Go Available Write about Widget totally Set quite some time scrolling your website, you will observe the item at quit facet, any Share This Set 3d Egg cell, Soon after hovering the item you will observe the item slashes as well as detaches directly into two areas and among those two areas there are Social Write about Icons (As proven inside above image).

Just follow east steps:

Go to Blogger>Template>Edit HTML

Find This Code </head>.

Copy the following code and paste above it.

<!-- Start --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.optionsundefined{publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End -->

Now After Pasting Above code.

Find </body> and copy following code and paste Just before/above it.

<!-- Start --><div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEggundefined'shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script><a href="http://techethix.blogspot.com/">Blogger Wordpress Gadgets</a><!-- End --> 

Now Save Template that's it.

Hope above information must have found very helpful,Try our CSS Menu Bars.

Read More

Add CSS Based Social Bookmarking Widget To Blogger Blogs & Websites

This particular widget runs on the full regarding 20 Icons nevertheless amazingly it can be super-fast and lots having with seconds. We merged most 20 Icons into one particular massive graphic and used CSS Picture whipping method to produce the actual icons show up with proper roles. Fortunately that preserves many heap occasion, considering that the internet browser can heap most photographs at a time and doesn't have to contact the actual graphic server more than once for importing the actual photographs.

Screen Shot

Now Follow the Easy Steps...

Step 1: Go to Blogger>Template> Edit HTML

Step 2: Search For ]]></b:skin> 

Step 3: And Paste the Below code just Above this ]]></b:skin>

.mbt-bookmarking a { 
display:block; 
height:42px; 
width:48px; 
padding:0 9px; 
float:left; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1FzPP2fptNaCK5B-T24rewNgoWZaTTwYrQTTJSwOXTPsWJWX8nR3QQVbe-0rVnfQeQTS2jAFOlGlActiMrzWD5QnEEOZsXy0npM29ckro3H8uKSXaDM1tZZELqgJOC8k8BwZ_B62yuv7/s1600/flapper.jpg) no-repeat; 
} 
.mbt-bookmarking a.delicious { 
background-position:0px 0px; 
} 
.mbt-bookmarking a.delicious:hover { 
background-position:0px -43px; 
} 
.mbt-bookmarking a.digg { 
background-position:0px -86px; 
} 
.mbt-bookmarking a.digg:hover { 
background-position:0px -129px; 
} 
.mbt-bookmarking a.stumbleupon { 
background-position:0px -344px; 
} 
.mbt-bookmarking a.stumbleupon:hover { 
background-position:0px -387px; 
} 
.mbt-bookmarking a.technorati { 
background-position:0px -430px; 
} 
.mbt-bookmarking a.technorati:hover { 
background-position:0px -473px; 
} 
.mbt-bookmarking a.twitter { 
background-position:0px -516px; 
} 
.mbt-bookmarking a.twitter:hover { 
background-position:0px -559px; 
} 
.mbt-bookmarking a.facebook { 
background-position:0px -172px; 
} 
.mbt-bookmarking a.facebook:hover { 
background-position:0px -215px; 
} 
.mbt-bookmarking a.reddit { 
background-position:0px -258px; 
} 
.mbt-bookmarking a.reddit:hover { 
background-position:0px -301px; 
} 
.mbt-bookmarking a.yahoo { 
background-position:0px -602px; 
} 
.mbt-bookmarking a.yahoo:hover { 
background-position:0px -645px; 
} 
.mbt-bookmarking a.rss { 
background-position:0px -774px; 
} 
.mbt-bookmarking a.rss:hover { 
background-position:0px -817px; 
}

Step 4: Now Search this piece of Code <data:post.body/>

Step 5: Copy the Following code and paste just below this <data:post.body/>

<div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Kindly Bookmark and Share it:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Technorati -->
<a class='technorati' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Fave this :&gt;'/>

<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :&gt;'/>

<!-- Yahoo -->
<a class='yahoo' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :&gt;'/>

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'/>
</b:if></div>

You can replace the Bold text "Kindly Bookmark and Share it" With any Statement You like and Change the color of Statement by changing this #289728.

Now finally Save your template and view your Blog and Enjoy.. :)

Note

If You Want large icon Then paste the Following Code ]]></b:skin> Instead of Step 3.

.mbt-bookmarking a {
display:block;
height:55px;
width:64px;
padding:0 5px;
float:left;
position:relative;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl2TRqEGeDLgGPy3ro07z5okUEYgwb7sLuU6Q3CXx6G-eeMmmo9Nd1PrG9H5gyJYF3IfwTp6eRsQwbXIr8omZXwxKb381Q324jcgUJHiWl9SFXH__adiGBNTcdtpZZs6qZUmyUsGnWYe/s1600-h/flapper2.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -57px;
}
.mbt-bookmarking a.digg {
background-position:0px -114px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -171px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -228px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -285px;
}
.mbt-bookmarking a.technorati {
background-position:0px -570px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -627px;
}
.mbt-bookmarking a.twitter {
background-position:0px -684px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -741px;
}
.mbt-bookmarking a.facebook {
background-position:0px -456px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -513px;
}
.post-bookmark a.reddit {
background-position:0px -342px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -399px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -798px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -855px;
}
.mbt-bookmarking a.rss {
background-position:0px -912px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -969px;
}

That's all 

Read More

Add Bubblicons Social Media Sharing Widget for blogger

Social websites symbols tend to be probably the most common widgets to feature with your internet site along with here’s a different one I came across thanks to Bloggertrix that you may such as likewise. It’s employ will be very similar to other social networking symbols you see, but the difference will be it carries a excellent look therefore i thought I’ll must discuss that anyway because you might want to transform the attributes in your internet site.
Bubblicons is created along with CSS along with HTML, a very easy to add widget which makes your website look appealing to the site visitors.

Just Follow simple following steps:

Step 1: Login your blogger account go to Layout option in left side menu.

Step 2: Click on Add a gadget.

Step 3: Select HTML/JavaScript from list.

Step 4: Now copy the following code and paste into box.

<style>
/* Bloggertrix  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul>
<li><a href="http://www.digg.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJpqx5YrtrowlrDwAD84Qkgu-FFdwAxuHLv5f9UmmgrL3QRd9dL7lifUdsUgimliFosTRdsRpbEKA7DRbM4-Lngnwdzj41CB5CikFHH7vW13eDUkZ2fNui4qa2rcy4fYjysVPxUj2MhBE/s1600/bloggertrix-digg.png" title="Add to Digg" /></a></li>
<li><a href="http://www.facebook.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpORFzObfugcq71siXAlwBrmCTwpH_yRGD4zuv21bSdEBHGLq4zy3L7yAnztVZc-zBNjON0rmrJXVArUkw9EKy13XpJDV7puSotyJSYyjbuQn5oYn1cZrdu2LU-OzGs-2UxNk6MrmnuPU/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsnuC_lDkD38eD_OVnvu81zxQm6DDek1-s5CKNJfonxbx1P_fBnpBPZd-oGnUcgDFTTs4h2iejoSdQIqG3Cb384N-eYnJpI3tfxPMgaPa6BrodpYVHi4pvdyi4NPaeYTwyrIUfLYtJW4/s1600/bloggertrix-stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxDpz_N57aXWQFl89V6tAXZPRpzd2hJt7Rmk_Cz0zcHaFVAfNz44xOGLc6Wk0HV6lidgzQykl3_UxWaFkuzI5o4llBFPnzKMrm6AdiK1F_EDpwgZP5k2YNFGGIKCsGL8DI77F_mH3688/s1600/bloggertrix-twitter_alt.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAH7U_UDB1YQbIQkkMumXpbh5c8pCw-iw6Dr1bJkSz-wJxgUg_j8s2KlcaRMha7gRM3NBV-OHY-3bBNqGULQGtZyKkmpIJ3pFUY0YlZW7Gu9bXtyJ4Ssm_ITb8jP4kxK3m-Ij7uE75uYQ/s1600/bloggertrix-RSS.png" title="Add RSS Feed" /></a></li>

</ul>

Step 5: Replace Red text with your username or ID and click on Save.

Read More

Add A Metro Style Social Sharing Widget To Blogger

Today I want to tell You about a New Social Sharing Widget/Gadget. This particular widget’s layout is dependent on anyone interface involving Microsoft’s most current OS IN THIS HANDSET (Windows 8) referred to as City type.

It's simple to in addition now take some which House windows 8 contact and also experience directly into your current Doodle-kit blog likewise utilizing Alam’s Metro-style inspired interpersonal sharing golf widget layout.

Installation is Very easy Just follow Below Steps:

Step 1: Lo-gin to your blogger account and Select Template Option from Left side Menu.

Step 2: Click on Edit Template.

Step 3: Find This Code " ]]></b:skin> " By pressing Ctrl+F .

Step 4: Copy the following Code and paste Above this Code " ]]></b:skin> ".

"  .widget-item-control a {

display:none;

}

.widget-item-control a {

display:none;

}#supportive {

width:300px;

float:left;

margin-top:10px;

}

#supportive li {

position:relative;

cursor:pointer;

padding:0!important;

}

#supportive .facebook,.googleplus,.rss,.twitter {

position:relative;

-moz-transition:all .4s ease-in-out;

-webkit-transition:all .4s ease-in-out;

-o-transition:all .4s ease-in-out;

transition:all .4s ease-in-out;

z-index:5;

display:block;

float:left;

margin:1px;

}

#supportive .icon {

overflow:hidden;

}

#supportive .facebook {

width:147px;

height:150px;

background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhWBcsKOZQNBdzjIQUceWmfdrVCkyM7vnxNzrkf3RNwHkWYCtHzg7Fw50B_4eKItJxQ5Hi0quSqoQxvkmNX3v_GlRrtYfBkIsjajg0cnf7JgPRJqSp5TBggyXqgMGfjKrZwGk-PjWlueM/h120/facebook.png) no-repeat center center;

}

#supportive .twitter {

width:148px;

height:74px;

background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuL2fk0JmVERyxQ_En4USTCVQOKemK7TeqLVhgwStVyaAyc-YOWWS-uF4OyAaRT5eR_EIYxErPU0sRVCUzZ-TpYvX8FCamhdd2_j2vfbsXjqqAU1wxOAauuyphn67vESN8p2z8dHLo8DFV/s1600/Twitter.png) no-repeat center center;

}

#supportive .googleplus {

width:148px;

height:74px;

background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y_vbK0MPtX9iFxXqwWs9zOnCOTQCvLHBzUWkLaVp8QMJAEBWahqa6mKb28zw3iABZxMaFX_9t7IT82mQJvZr8Yu4NvER5ZSoBY_GziN8GbsneZkyk_MQbLGc3ifQl2zVirRn15WgmnCs/s1600/google+plus.png) no-repeat center center;

}

#supportive .rss {

width:299px;

height:74px;

background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCtA7PrVdwvGSE2-EndS0vI0hNGBRv79QR8mBepykZrInKO83MSp_orw7DFHtfCZkSdzEpi7BR7VeHTLdV67ksj9DRc817-t705hiOrnoD7OktlxHVumvKg24GCRycVrM9AKEOPOjMERY/s1600/rss.png) no-repeat center center;

}

#supportive li:hover .facebook {

background-color:#3468B6;

-moz-transition:all .1s ease-in-out;

-webkit-transition:all .1s ease-in-out;

}

#supportive li:hover .twitter {

background:rgba(64,153,255,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRGYKoyw-bFfMVWFuu4rtKG8eUAqCa43th89r-WcLKzIxEVHZn9X6zuY3PgcfZz6zZY_0oj0R6gHq377iBjc100FidcuOUevNn6zQnXEEh7qPK1QQ-j-QWr4OypMEgHeiKG1kQXxKTsqE/h120/Twitter.png) no-repeat center center;

-moz-transition:all .1s ease-in-out;

-webkit-transition:all .1s ease-in-out;

}

#supportive li:hover .googleplus {

background:rgba(228,69,36,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_a9ktM8_gR2JH54f7FrZFE1aVgDPQzSGvFeLZw6H40fn11CCaKB1SUej0NO9yAimBfE5sWP2PkRhoBaEteDpjHoRKhcihpFXzLhWPx2IkSMzYcNrqNJKW30L5GLIEI50NuBZYC3feJc/h120/google+plus.png) no-repeat center center;

-moz-transition:all .1s ease-in-out;

-webkit-transition:all .1s ease-in-out;

}

#supportive li:hover .rss {

background:rgba(255,102,0,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiImpy-fExML87Pqd6NMCAIYET3u3rnVHxfZ_-1AkSeKMIFck95WsFM6sHzzASliEuFM6a9-c1cOV8EekipyEF0CiHnWK_FV1TdYdCvySOJdRTZu0_y9QrMKuSBEmqg9bu5HJru9483uw/h120/rss.png) no-repeat center center;

-moz-transition:all .1s ease-in-out;

-webkit-transition:all .1s ease-in-out;

}  "

Step 5: Now Click on Save Template.

Step 6: Now Go to layout from left side Menu.

Step 7: Click on Add new gadget. and select HTML/javaScript

Step 8: Copy the Following Code and paste in box.

" <ul id='supportive'>
<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>
<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUserID/'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>
</ul> "

Step 9: Replace Red Color text with your User name or ID.

Read More

Animated Sassy Social Bookmark Gadget For Blogger

I am aware simply how much people most just like submitting of social bookmarks gadgets along with widgets specifically unique gadgets which could hook a persons vision involving readers and find all of them book-marking your site. Nowadays When i use a cool submitting of social bookmarks gadget which has a elegant cartoon influence. With all the Sassy book marking gadget a simple discuss key is positioned inside the nook of this web site, then in float 6 icons for that major submitting of social bookmarks internet sites come in the semicircle. The actual control keys of which show up are for Pinter-est, Google+, Myspace, Twitting, Stemless glass along with Email. Under we have the live tryout then investigate guide to feature the particular Sassy Social bookmarks to be able to Blogger.

Live Demo

Step 1. Log in to Blogger Click on Template in Left Side bar menu > Then Edit Html

Step 2. Find the following code in your blogs Html : (Click Ctrl+F for a search bar to help find the code.

</body>

Step 3. Copythe following code and paste Directly Above / Before </body>

<!-- Start Shareaholic Sassy Bookmarks HTML - http://www.blogger2wordpress.blogspot.com -->
<div class='shr_ss shr_publisher'>

</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-ss.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://www.spiceupyourblog.com/2012/05/animated-sassy-social-bookmark-gadget.html'>Animated Social Gadget</a> - <a href='http://www.spiceupyourblog.com'>Blogger And Wordpress Tips</a></small>

<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://www.blogger2wordpress.blogspot.com -->

Step 4. Save Your Template.

Now You Done your work preview your blog :)

Ask Question and Drop Comments below

Search tag: animated social icon gadget, new social icon gadget, add animated Social button in blogger, sassy social bookmark gadget, add facebook, twitter, animated button in blogger, animated blogger widget, latest widget,

Read More