New Sliding All In One Social Box For Blogger

Today, Developers are creating new and latest widgets for their blog. One of them, I am posting here. This Social Box is created by Jillur Rahman and cracked by me from its blog. This social box is eye catching and also give a professional look to your blog. The main feature on this Social Box is, It comes with a sliding effect on hover. Their are four options inbuilt in this widget. The first is Facebook which is the most popular social network on the internet. Second, Twitter which is also a leading social site for both, Public and celebrities. And Fourth, Google+, Google+ is not new, But not old as Facebook but you can get traffic to your blog from Google+ and now fourth, RSS Feed.

LIVE DEMO

All these options provide users an easy way to like/follow/subscribe you in one click. Now, They don't have to find your facebook page/Google+ Page/Twitter Account or RSS Feed. They will easily subscribe to your blog and you will start receiving some traffic from social sites. Now How to Implement It? Here's the Tutorial!

Implement this Cool Social Box in Your Blog.

Steps are Easy as ABC But Follow Carefully.

• Go to Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript
• Now, Paste the Following code in 'Content' Box.

<div id="buttons">


<div class="facebook button1">
    <i class="icon-facebook"></i>
    <div class="social-container fb">
        <div class="slide">
        <div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/bloggerguiders&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
        </div>
         Facebook
    </div>
</div>


<div class="twitter button1">
    <i class="icon-twitter"></i>
    <div class="social-container tw">
        <div class="slide">
        <div class="twitter_c">
<a href="https://twitter.com/bloggerguiders" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </div></div>
         Twitter
    </div>
</div>


<div class="google button1">
    <i class="icon-google-plus"></i>
    <div class="social-container tw">
        <div class="slide">
<div class='google_c'>
<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/+ShivanshVerma" data-rel="publisher"></div></div>
        </div>
         Google+
    </div>
</div>


<div class="rss button1">
    <i class="icon-rss"></i>
    <div class="social-container tw">
        <div class="slide">
        <div class="rss_c">
<p><a href="http://feeds.feedburner.com/TntByStc" target='_blank'><img src="http://feeds.feedburner.com/~fc/BloggerGuiders?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></p>
        </div>
        </div>
         Rss Feed
    </div>
<a style="font-size: 8px; position: absolute;" href="http://www.bloggerguiders.blogspot.com" rel="dofollow">Blogger Guiders</a> </div>
<style>
/*-----------------------------------------------------------------*/
/*----------------New Social Box by Blogger Guiders---------------*/
/*--------------------------------------------------------------*/
#buttons {
overflow: hidden;
}
.button1 {
background: none repeat scroll 0 0 #EEEEEE;
-moz-box-shadow: 0 1px 0 #FDFDFD inset;
-webkit-box-shadow: 0 1px 0 #FDFDFD inset;
box-shadow: 0 1px 0 #FDFDFD inset;
float: left;
margin: 0;
padding: 15px 0 0;
width: 149px;
}
.button1.facebook,.button1:hover.facebook .slide {
margin-right: 1px;
background: #3873ad;
}
.button1.google,.button1:hover.google .slide {
margin-right: 1px;
background: #f73c28;
}
.button1.twitter,.button1:hover.twitter .slide {
background: #62c6f8;
}
.button1.rss,.button1:hover.rss .slide {
background: #f18421;
}
.button1 i {
color: #FFFFFF;
display: block;
font-family: FontAwesome;
font-size: 20px;
font-style: normal;
height: 40px;
line-height: 40px;
margin: 0 auto 2px;
text-align: center;
width: 40px;
border: 2px solid #fff;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.social-container {
color: #FFFFFF;
font-size: 15px;
font-weight: 600;
height: 45px;
line-height: 45px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.slide, .button1 i {
-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;
transition: all 0.2s ease-in-out;
}
.slide {
height: 45px;
position: absolute;
top: -35px;
width: 100%;
}
.icon-facebook:before {
content:"\f09a";
}
.icon-twitter:before {
content:"\f099";
}
.icon-google-plus:before {
content:"\f0d5";
}
.icon-rss:before {
content:"\f09e";
}
.slide:after {
border-left: 2px solid #EEEEEE;
bottom: 0;
content: "";
display: block;
height: 10px;
position: absolute;
width: 100%;
}
.button1:hover .slide {
top: 0;
}
.facebook_c {
position: relative;
top: 10px;
}
.twitter_c {
position: relative;
top: 10px;
}
.rss .IN-widget, .button1 iframe {
position: relative;
top: -5px;
}
.google_c {
position: relative;
top: 5px;
}
.rss_c {
position: relative;
top: 6px;
}
.twitter iframe {
width: 134px !important;
}
.google #___plusone_0 {
width: 60px !important;
}
.button1.rss {
margin-right: 0;
}
</style> 

Customizations

Yes. Before saving the widget, You need to do some customizations on the code. Steps are given below. You just need to follow them!

1. Change http://www.facebook.com/bloggerguiders with your Facebook Page URL.
2. Change http://www.twitter.com/bloggerguiders with your Twitter Account URL.
3. Change http://plus.google.com/+ShivanshVerma with your Google+ Profile URL.

 Now! Save the Widgets and Take a Look of Your Blog. Looking Nice?

Final Words

I hope friends you will like this widget and going to implement it on your blog and I also hope that you will start receiving some traffic from Social Sites like Facebook, Twitter and Google+. If you need additional help for this widget, just comment below and we will help you because we are happy to help! Thank You!

Share this post