How To Add Rounded Social Widget With Hover Slide out Effect In Blogger

Advertisements
Are you bored with your laborious Social Networking widget that keeps on loading again and again? Since, the internet is getting advantaged. Therefore, the expectations of visitors are getting higher. It’s a fact that, People always look for Highly Professional websites with incredible gadgets. As we all are well aware of the fact that Social Networking websites plays a significant role in converting daily users into social Followers, so it’s essential to have an Elegant Social Follower gadget.  There are several Social gadgets that have quite impressive features, but are too heavy to be incorporated in a blog because it could affect the speed of a website. Today in this article, we will be sharing a Splendid Round Social Sharing Widget with Effects for Blogger Enabled Websites.


Why To Use Round Social Sharing Widget?

We have a clear philosophy about this widget. Since, this widget is small in size, so it has the enough flexibility to adjust any nook or corner of a website. However, People can also use them at the end of their Articles to attract more and more social followers. It has 8 different Social Networking websites, but a person can include or exclude them according to their desire needs. Consider the Following Animated Screenshot. 

How Does This Round Social Widget Works?

This Widget Works on Hover. Whenever, any visitor would press the “BIG Follow us Circle” Small icons of different Social networking website would slide out. For Example, Consider a Big Circle that has different Small circles revolving around it.

How To Install Round Social Sharing Gadget in Blogger?

To Install this gadget correctly in Blogger Enabled website, we have to follow modest instructions, which would utilize less then 5 minutes to complete the integration. Follow the following steps correctly.
  • Go to Blogger.com >> Template >> EDIT HTML >> Proceed.
  • Search For Skin and above it Paste the Following Coding.
.mbl_container {
    width: 780px;
    height: 285px;
    margin: 0 auto;
    position: relative;
}
img {
    display: block;
    float: left;
}
.mblsocialshare.bubble {
    position: absolute !important;
    top: 50%;
    left: 50%;
    margin-top: -46px;
    margin-left: -32px;
}
.mblsocialshare.bubble.left {
    left: 200px;
    margin-left: 0;
}
.mblsocialshare.bubble.right {
    left: auto;
    right: 200px;
    margin-left: 0;
}

.mblsocialshare.bubble{display:block;width:72px;height:72px;position:relative;z-index:1;}.mblsocialshare.bubble .msb_main{display:block;width:64px;height:64px;position:absolute;top:0;left:0;z-index:2;cursor:pointer;text-indent:-9999px;border:4px solid #FFF;box-shadow:0 0 5px #DDD;border-radius:36px;}.mblsocialshare.bubble .msb_main img{width:64px;height:64px;cursor:pointer;border-radius:32px;border:none;}.mblsocialshare.bubble .msb_main:hover{box-shadow:0 0 5px #BBB;}.mblsocialshare.bubble .msb_network_button{width:46px;height:46px;position:absolute;top:9px;left:9px;z-index:1;cursor:pointer;text-indent:-9999px;display:none;background:no-repeat;}.mblsocialshare.bubble .msb_network_button.facebook{background:url(http://2.bp.blogspot.com/-PYOmLy_kMpY/UMHmaQPNAsI/AAAAAAAAJF8/AbVEi4JTU9E/s1600/bubble_facebook_share_button.png);}.mblsocialshare.bubble .msb_network_button.linkedin{background:url(http://2.bp.blogspot.com/-uhQksrg6Uo8/UMHmc2EbaZI/AAAAAAAAJGU/8wkwkAJs3Lw/s1600/bubble_linkedin_share_button.png);}.mblsocialshare.bubble .msb_network_button.google{background:url(http://3.bp.blogspot.com/-r2sOIv37AZo/UMHmbBFdDBI/AAAAAAAAJGE/ZgMrTsu0zX8/s1600/bubble_googleplus_share_button.png);}.mblsocialshare.bubble .msb_network_button.twitter{background:url(http://1.bp.blogspot.com/-Uc4JxM4m1ns/UMHmeSKJ8_I/AAAAAAAAJGo/ABarAgXUFtE/s1600/bubble_twitter_share_button.png);}.mblsocialshare.bubble .msb_network_button.pinterest{background:url(http://2.bp.blogspot.com/-5peN56JgMkk/UMHmdhTOClI/AAAAAAAAJGc/JBRG7vandN4/s1600/bubble_pinterest_share_button.png);}.mblsocialshare.bubble .msb_network_button.dribbble{background:url(http://1.bp.blogspot.com/-vWRUhJ0CTxI/UMHmYm7_QMI/AAAAAAAAJFw/18txFcdjch8/s1600/bubble_dribbble_share_button.png);}.mblsocialshare.bubble .msb_network_button.email{background:url(http://4.bp.blogspot.com/-eVGk-gusiVk/UMHmZWLw2WI/AAAAAAAAJF0/K1wgVtYEEkE/s1600/bubble_email_share_button.png);}.mblsocialshare.bubble .msb_network_button.instagram{background:url(http://4.bp.blogspot.com/-ZaC-h51VQsk/UMHmbyjGbXI/AAAAAAAAJGM/-9XezvChTe0/s1600/bubble_instagram_share_button.png);}.mblsocialshare.bubble .msb_network_button.youtube{background:url(http://3.bp.blogspot.com/-7bYPwV2QHeg/UMHmf6racyI/AAAAAAAAJGw/XjvyHmWB6_8/s1600/bubble_youtube_share_button.png);}.mblsocialshare.bubble .msb_network_button.vimeo{background:url(http://4.bp.blogspot.com/-9t14ct5HfsU/UMHmgQf0FYI/AAAAAAAAJG4/HGj794WCOls/s1600/man.png);}.mblsocialshare.bubble .msb_network_button:hover{background-position:0 -46px;}

  • Now go a head and save the template by pressing Save Button

How To Add Round Social Widget in Blogger?

Now it depends on a person where he wants to see this gadget. He can just paste the Following code wherever he wants to display this gadget. We would prefer to use it either in POST Footer, or in the sidebar.
  • Go to Blogger >> Layout >> Add a Gadget >> Add Html/JavaScript.
  • Now in the HTML Text Box, Paste the following Coding.
<!-- MBL Social Rounded Widget For Blogger -->

<script src="https://mybloggerlab.googlecode.com/files/jquery.js" type="text/javascript"></script>
<script src="https://mybloggerlab.googlecode.com/files/MySocialShare.js" type="text/javascript"></script>

<div class="mbl_container">

<!-- Horizontal Social Share Code -->
<div class="mblsocialshare right" data-orientation="line" data-picture="http://1.s3.envato.com/files/42962442/assets/images/share_core_square.jpg" 

    data-facebook-handle="mybloggerlab
    data-twitter-handle="mybloggerlab
    data-google-handle="106374439082237286396
    data-pinterest-handle="fosterzone
    data-email-handle="yoursite@gmail.com
    data-networks="facebook,twitter,email,pinterest,google">
</div>

<!-- Rounded Social Share Code -->
<div class="mblsocialshare left"

    data-image-type="facebook" 
    data-picture="fosterzone
    data-facebook-handle="fosterzone
    data-twitter-handle="mybloggerlab"
    data-google-handle="106374439082237286396"
    data-pinterest-handle="fosterzone
    data-email-handle="yoursite@gmail.com
    data-youtube-handle="mybloggerlab"  
    data-networks="facebook,twitter,email,pinterest,google,youtube" data-arc-length="360"></div>
            </div>

Customization:
Replace fosterzone With Your Facebook Username.
Replace mybloggerlab with Twitter Username. 
Replace 106374439082237286396 With your Google+ Profile ID.
Replace fosterzone  with your Pinterest Username.
Replace mybloggerlab with your YoutTube Username 


Note: Please do changes, according to the colors we have prescribed above.

All Done: Save the gadget by pressing Save button and you're ready to rock all roll. Visit your site and enjoy the picture perfect results. Feel free to ask if anyone has any questions regarding customization. 

From the Editor's Desk:

That's all we have for tonight. Hope this unique Social Gadget, would be able to magnetize More Visitors to your site. What are your thoughts about this gadget? Some new things that a person wants to see in the next version? Take a lot care till then, Peace, Blessings and Happy Socializing.

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

20 comments

December 7, 2012 at 5:53 PM

Dear friend can u suggest me widget like this for wordpress plss :'(


Regards

Sandy

December 7, 2012 at 7:41 PM

Wow.. nice tricks.. I love the smoothness of this widget...

More Blog Tools.

December 7, 2012 at 9:09 PM

wow, Really it is a incredible widget for blogger. thanks for sharing. :)

Regards
Rahul Kashyap
Blog: SDMMovies.com

December 7, 2012 at 10:42 PM
December 8, 2012 at 2:32 AM

Nice widget Faizan!

December 8, 2012 at 3:33 AM
December 8, 2012 at 4:48 AM

how can i change your photo ? :)

December 8, 2012 at 8:00 AM

i like it very much bhai jan..main ap sary post bhuat shok say daikhta hn..thnku

Editorial Team MOD
December 8, 2012 at 8:25 AM

In the Above Coding Search For data-picture="fosterzone" and Replace "FosterZonef" with your Facebook User Name. It will replace my picture with your Facebook DP Picture. Peace

Editorial Team MOD
December 8, 2012 at 8:26 AM

Thanks For Being a Great Reader. We really appreciate that you follow our each and every Article. Peace and Take care

December 8, 2012 at 4:08 PM

The round social widget looks cool and doesn't take up so much space.

December 9, 2012 at 4:06 AM

cool and nice! I am going to use this widget in my blog!

December 9, 2012 at 4:21 AM
December 9, 2012 at 4:32 AM

Bro, I need your help to optimize my website. I would do whatever you would tell to me!

December 11, 2012 at 7:44 AM

thanks for sharing such a great widget web designer in uk

December 11, 2012 at 8:02 AM

hi its great

but chrismas snowfall effect jo ki mene apne blog par install kiya tha par blog width is incresing and load time is too increased
plz check my blog and give me ur idea

http://jatinkharb.blogspot.in/

December 11, 2012 at 8:03 AM

it is not workd for me ...............

Editorial Team MOD
December 11, 2012 at 8:05 AM

Thats Because your site already has lots of Widgets which is causing it not to Work. Peace

December 11, 2012 at 8:07 AM

can u tell me wht is missing ?

February 28, 2014 at 2:59 AM

Hi Faizan, need a help :/ This widget didnt work on my blog thehackerspoint.com :/ I think code had a pblm with the js file can you add it again please??

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.