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

Socialize It →

Tweet

17

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.

Slide out Social Widget (DEMO)

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxc9isYuP_6WqjTRTAE7fUb6mpW1AG5gQuTw5r5aoKgKwHrZIheb18RY3iGsNg1CTReRxphqzNIsHvfVtA-R16giEzFfkMJd3QNEuiJagLRs-jwvmUYnG8_E3FL9QqPa7JRsTLw1PrmM/s1600/bubble_facebook_share_button.png);}.mblsocialshare.bubble .msb_network_button.linkedin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cX_noDKDG3f_9Rx-PENiWOBTjT-9T-fMKJzvV8LTRs9EX2oeAwLmksqi9kyxBE_MiS4pSM3UstA3rUvRfdlAGmyATU8p6tDzEUmt9fO_spEfqjRZ98rqw8kd2hBvpc3O27_05bArC20/s1600/bubble_linkedin_share_button.png);}.mblsocialshare.bubble .msb_network_button.google{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3oah91nE2D5u41ZedCfCrGkesun2heVQ8rlv65QtdYpaAzzD5Ak3mdbjNsms8yb5MMQUNLlGk840ROso9QBYMPxT7mCbmNKdLzaHNAVr4VzX-59GARDQ_-MSkjXhLxt5EmFx6NFt4o4/s1600/bubble_googleplus_share_button.png);}.mblsocialshare.bubble .msb_network_button.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvpX41M-CleNX7q1aTYQtswPYREKVZztmMO1kRD9P5Y1nO_uyTtyWy2Vdn07zObJzfj98FFTcNcYbD4ok12vcjuhr1vaffr3qlr49yA20EzgHcc84QThfRfTrKCr0r-8NLALcst9E-3Pw/s1600/bubble_twitter_share_button.png);}.mblsocialshare.bubble .msb_network_button.pinterest{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7sxlKws9L3j35hcmC14MzaQQsgT21EFkEKrQ9flOKXTLLWc0VhfzOcHkMn6WFImywRZEKIA3tlGoOnkARSkKdKUknCQrncb-Jzwug6BIPWs2OCSzUjUvUagXGh28a6xcA73rIWoPNCFI/s1600/bubble_pinterest_share_button.png);}.mblsocialshare.bubble .msb_network_button.dribbble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjleRaz07YjQtcOM81bP17WxwhEXd3i9hI7CYq6jYhhrUsYneL3f6HDl0wNUBn79IoIMcoR5DbNqe9V7W2JmdBIZRBAtj3r0v1gBWzKQFciGuq2dTJVUxR8L_O9cHSmb35VllaXzrUveas/s1600/bubble_dribbble_share_button.png);}.mblsocialshare.bubble .msb_network_button.email{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRTNjQIx4vAASfdK2gvOaWj_VFitQMQuurKC-Kt3LUfIkUYkYXWoq7NkDasPMECEdmG5kg4Quci_0-So4olwXdkwj8O8jPZczze3PFMAaSfRVNEoAOqgSuoilHATE4Bv87IgW_KnS4yHo/s1600/bubble_email_share_button.png);}.mblsocialshare.bubble .msb_network_button.instagram{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbrZUYqbwwkr-7pmwbIChUUz1VSHqIeI6RatlFDjd03v5atcMFi-cE15Q4UneR1GnXn361qtTEAWSKMaHr5BWO3rZ9bvwdNvJycdRpAgBUAZWnU36TQkPCaf6YWWuW0FC-pk2MD35K3S8/s1600/bubble_instagram_share_button.png);}.mblsocialshare.bubble .msb_network_button.youtube{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjv2n52dZgsKY9bmWyQgxOakGncr7eDWL5AcIko9p0brKknOEiMbDKL040atknZBxS8LsbUSG-FuN1tMxmpppmsRXaABrSRgTy1rJDggtTyMsWM5O9HokNSfGecXIQHVYXjCK4JBe8ek/s1600/bubble_youtube_share_button.png);}.mblsocialshare.bubble .msb_network_button.vimeo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCURY15leAGjoIgKiNUZVqKp4yv0FvfW37e5eSPFLlqDA_lqgpX2WfWdRsZpjfX4RwX14Si6v1CC0Z5s7TdoT8Li0m6gJD238AF-1xdBM-00LLSRksfVfsK-Wwo62m5uaF4Q5oAtq5pq8/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

About the Editorial Team

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