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

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