How To Create Floating Social Tabs Widget in Blogger

Socialize It →

Tweet

64

Advertisements

Do you want to convert your Visitors into Social Followers? Well, it is the dream of every blogger to get as many social followers they can. Mostly they use different services to buy Real Social Networking Fans, but those fans neither Comment or like any status updates. Therefore, the ideal way to convert new visitors into Social Followers is to utilize Different Social Networking widgets so anyone can easily use them without any hesitation whatsoever. On the other hand, by adding lots of Social Widgets it could affect the speed of a website. Keeping that in mind, Our MBL Developers have created a Remarkable Widget that has all the Popular Social Networking websites. Sounds great? Indeed. Today in this Tutorial, we will integrate Social Media Tabs in Blogger Enabled Website.

Floating Social Tabs (DEMO)

Where This Social Tab Will Appear?

Before, we get on to our Tutorial let us first learn where this widget will appear in a website. Since, this is a Tabbed Widget. Therefore, it is extremely small in size so it wouldn’t take a large space on a website. We have integrated a Slide out Functionality that would produce sparks in the eyes of visitors. It will appear at the Top-right side of the screen. To clear your concepts, we have included a screenshot. Consider the following screenshot.

How This Floating Social Tab Looks Like?

Since, it is a tabbed widget. Therefore, it will appear in a form of a strip. However, when someone will select their personal favorite Social Networking website it will slide out all the details about it. For Example, a person Press “Facebook Tab” then, it will display the latest status updates and the like button. Take a look at the following screenshot. 

How To Create Floating Social Tabs In Blogger:

The steps mentioned below are extremely straightforward, and it would hardly take less than 10 minutes to complete the integration. We have tried our best to minimize the steps. So, let us start with our tutorial. Consider the following steps.

• Go To Blogger >> Template >> Edit HTML >> Proceed.
• Now In the template search for ]]></b:skin> and above it paste the Following CSS Code.

/* --- MyBloggerLab SocialTabs Plugin For Blogger --- */
.MBL-slideshow{
height:400px;
display:inline-block;
position:fixed;
left:0;
top:50px;
width:35px;}


.MBL-slideshow.wk_right{
left:auto;
right:0;}

.wk_containt-button{
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiyF6RP4voD7c6-JGvcryaQV2NliKBo548NAIQK-P82BnKqPGwatth8Oho_zrwfbskjyyfqXrap5nv_RlGyk9GMOur1ChhJgg1zZtkGEGvhHi6SVXs_qhpCYGRCLDu0VMHQKBsGArf0g/s1600/wk_social_tab.png");background-repeat:no-repeat;
cursor:pointer;
display:inline-block;
height:36px;
position:relative;
width:35px;
margin-bottom:5px;
left:0px;
top:40px;}

.MBL-slideshow.wk_right .wk_containt-button{
left:auto!important;
right:0px;}

.wk_containt{
display:block;
left:0;}

.MBL-slideshow.wk_right .wk_containt{
left:auto!important;
right:0px;}

.wk_data{
border:5px solid #ff0000;
border-left:none;
display:inline-block;
left:-305px;
position:absolute;
height:360px;
overflow:hidden;
background-color:#FFF;
width:285px;
z-index:9999;
top:0px;
border-radius:0px 13px 13px 0px;}

.MBL-slideshow.wk_right .wk_data{
left:auto!important;
right:-300px;
border:5px solid #ff0000;
border-right:none;
border-radius:13px 0 0 13px;}

#wk_facebook{
background-position:-45px -41px;}

#wk_linkedin{
background-position:-5px -0px;}

#wk_google{
background-position:-5px -82px;}

#wk_twitter{
background-position:-45px -82px;}

#wk_youtube{
background-position:-5px -41px;}

#wk_pintrest{
background-position:-45px -0px;}

#pintester-board{
height:321px;
list-style:none outside none;
overflow:auto;
margin:0px;
padding:0px;}

#pintester-board li{
background-color:#FFFFFF;
box-shadow:0 1px 2px rgba(34,25,25,0.4);
font-size:11px;
padding:15px 15px 45px;
width:192px;
margin:10px auto;
overflow-y:auto;
overflow-x:hidden;
border-bottom:1px solid #ccc;}

#pintester-board li .pinitem{
display:inline-block;
padding:5px;
background:#ccc;
width:200px;}

#pintester-board li .pinitem img{
background:none repeat scroll 0 0 #FFFFFF;
border:medium none;
margin-bottom:2px;}

#pintester-board li .pinitem a{
display:block;
text-align:center;}

#pintester-board .date{
background-color:#F2F0F0;
bottom:0;
color:#8C7E7E;
display:block;
font-style:normal;
font-weight:bold;
left:0;
padding:5px 10px;}

.profile h3{
background:none repeat scroll 0 0 #ECECEC;
border-bottom:1px solid #CCCCCC;
padding:10px;
position:relative;}

.profile h3 a{
color:#555555;
display:inline-block;
letter-spacing:1px;
padding:3px 0 0 20px;
text-shadow:0 1px 0 #FFFFFF;
text-transform:uppercase;
margin:0;
text-decoration:none;
font:bold 12px/14px Arial,sans-serif;}

.profile .dcsmt-btn{
background:none repeat scroll 0 0 #FF0000;
border-radius:3px 3px 3px 3px;
color:#FFFFFF;
cursor:pointer;
display:inline-block;
font:bold 12px/14px Arial,sans-serif;outline:medium none;
padding:5px 8px;
position:absolute;
right:10px;
text-decoration:none;
top:6px;}

.wk_data .profile{
padding-bottom:5px;
height:20px;}

.profile h3{
margin:0px;
text-align:left;}

#google-board{
height:295px;
overflow:auto;}

#google-board .meta{
color:#999999;
display:block;
font-size:90%;
padding-top:3px;}

#google-board .thumb img{
background:none repeat scroll 0 0 #FFFFFF;
border:3px solid #ECECEC;
padding:1px;}

#google-board .title{
color:#333333;
margin-bottom:5px;
text-decoration:none;}

#google-board .title:hover{
text-decoration:underline;
background-color:transparent;}

#google-board .meta span{
display:block;
float:left;
line-height:12px;
margin:0 8px 5px 0;
padding:0 0 0 15px;}

#google-board .meta span.plusones{
padding-left:0;}

#google-board li
{border-bottom:1px solid #CCCCCC;
font-size:15px;
overflow:hidden;
padding:10px 5px;
text-align:left;}

#google-board .thumb{
float:left;
margin:0 10px 0 0;}

#google-board span.shares{
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc2az15rTrj_lQTuYw37KCkcbdMNsUWo3mXTPlv_v5zWisZQ1vavW9oXQOxXIo_ogXdlNVUxUOJoboHfuL5RZTUjOMS9hQ0-m-tQclIudnz1pZdBnxl-xsyFE_7yFwGBmBGI2vllmj3Q/s1600/shares.png") no-repeat scroll 0 0 transparent;
padding-left:20px;}

#google-board span.comments{
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKtXc6DJo5D254BKz9nyrv4Euzmk_0mXDaIGkPWquiVvumoFWTH8YnpkQyFl73zFiSfD4yAcQ_Pgiyt7dzFH_F1S9cDMBSEcVDM7xJnKg1tUDiSS8takO9U01yjkg9TW363mK50TPMRkI/s1600/comments.png") no-repeat scroll 0 0 transparent;}

#google-board .date{
display:block;
clear:both;}

#google-board{
list-style:none outside none;
margin-top:-14px;
overflow:auto;
padding:5px;
background-color:#fff;}

.g-plus{
height:50px;
border-bottom:1px solid #ccc;
margin-bottom:15px;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwvs5n2qAH9HoGq-rl_I5DVm9uKE5tadDC9viZuu5VoyU0HVh5ZqA9t-RHc9pHxfz_i0Gw5E6xBC93JeW7KhU3mZ9hFrxwWu0hWkvgSwDYS7CYckCek6_ju_eSnAnKD9JcCaUXP5xd7uI/s1600/google_err.png");background-repeat:no-repeat}

.wk_youtube_head{
overflow:hidden;
height:104px;}

#wk_youtube_header{
overflow:hidden;
height:104px;
width:100%;
border:0;}

#wk_youtube_data{
background-color:#ffffff;
height:258px;
width:285px;
overflow-y:auto;
overflow-x:hidden;
border-top:1px solid #ccc;}

#wk_youtube_datalist{
list-style:none;
margin:0 auto;
padding:6px 0 0 12px;}

.wk_youtube_link{
height:45px;
float:left;}

.wk_youtube_img{
width:70px;
height:45px;
float:left;}

.wk_clear{
clear:both;}

.wk_youtube_lebal{
display:inline-block;
margin-left:10px;
width:170px;}

a.wk_youtube_subject{
color:#333;
text-decoration:none;}

a.wk_youtube_subject:hover{
text-decoration:underline;}

#wk_youtube_datalist li{
clear:both;
padding:5px 0px;
border-bottom:1px solid #CCC;}

• Then Save the Template and proceed to the next step. 

How To Add Floating Social Tab Widget in Blogger?

• Now Go To Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript.
• Then in the HTML Box paste the following JavaScript Coding.

<script type="text/javascript"> if (typeof jQuery == 'undefined'){document.write(unescape("%3Cscript src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));}</script><script src="https://mybloggerlab.googlecode.com/files/MBL-slideshow.js"></script>
<!-- Facebook Social Tab-->

<div class="MBL-slideshow "><div class="wk_containt"> <span class="wk_data" style="border-color:#3C5B9B;"><script type="text/javascript">(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-root" id="fb-root"></div> <div class="fb-like-box" data-colorscheme="light" data-href="http://www.facebook.com/mybloggerlab" data-width="300" data-height="360" data-show-faces="true" data-stream="false" data-header="false"></div> </span> <span class="wk_containt-button" id="wk_facebook"></span> </div>


<!-- Google Plus Social Tab-->

<div class="wk_containt"> <span class="wk_data" style="border-color:#F63E28;"> <div id="googal-tab" class="tab_div ui-tabs-panel"> <div class="g-plus" data-height="69" data-href="https://plus.google.com/u/0/106374439082237286396" data-rel="author"></div> <script type="text/javascript">(function(){var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
</script><ul id="google-board"></ul> </div> </span> <span class="wk_containt-button" id="wk_google"></span> </div>


<!-- Twitter Social Tab-->

 <div class="wk_containt"> <span class="wk_data" style="border-color:#2DAAE1;"> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 7,interval: 30000,width: 287,height: 275,theme: {shell:{background: '#2DAAE1',color: '#ffffff'},tweets: {background: '#ffffff',color: '#000000',links: '#47a61e'}},features:{loop: false,live: false,scrollbar: true,avatars: true,behavior:'all'}}).render().setUser('mybloggerlab').start();</script> </span> <span class="wk_containt-button" id="wk_twitter"></span> </div>

<!-- YouTube Social Tab-->

 <div class="wk_containt"> <span class="wk_data" style="border-color:#FE3432;"> <div class="wk_youtube_head"> <iframe id="wk_youtube_header" src="http://www.youtube.com/subscribe_widget?p=mybloggerlab" scrolling="no" frameBorder="0"></iframe> </div> <div id="wk_youtube_data"> <ul id="wk_youtube_datalist"> </ul> </div> <script>var wk_youtube_user_id='mybloggerlab';</script> </span> <span class="wk_containt-button" id="wk_youtube"></span> </div>

 <!-- Pinterest Social Tab-->

 <div class="wk_containt"> <span class="wk_data" style="border-color:#CB2027;"> <div id="pintester-tab" class="tab_div ui-tabs-panel"> <div class="profile"> <h3><a class="btn-type-pinterest" href="http://www.pinterest.com/fosterzone">Pinterest</a></h3> <a class="dcsmt-btn btn-type-pinterest" href="http://www.pinterest.com/fosterzone">Follow on Pinterest</a> </div> <ul id="pintester-board"></ul> </div> <script type="text/javascript">var wk_pintrest_id='fosterzone';</script> </span> <span class="wk_containt-button" id="wk_pintrest"></span> </div> </div>

Customization:

• Replace http://www.facebook.com/mybloggerlab with your Facebook Page URL.
• Replace mybloggerlab with your YouTube username.
• Replace 106374439082237286396 with your Google+ ID. You can find it at the end of your Google Plus URL i.e. plus.google.com/u/0/106374439082237286396
• Replace  mybloggerlab with your Twitter user name.
• Replace http://www.pinterest.com/fosterzone with your Pinterest profile URL.

All Done: After doing all the customization its time to Save the widget, just press the Save Button. That's it, go a head and checkout your website. We are sure you will enjoy the picture perfect result.

Frequently Ask Questions:

Question#1: It would Work on WordPress?

• Yes, it will work on any platform that supports CSS and JavaScript. A person can easily integrate it on his WordPress Enable Website without facing any problem whatsoever. However, if anyone gets stuck don't feel any hesitation while dropping your problem in the comments. 

From the Editor’s Desk:

Hope you guys have enjoyed the tutorial. Well, this widget was extremely extraordinary for our team because it took a lot time to develop. We failed again and again, but the end results were remarkable. However, today our team nailed it. What are your thoughts about the Social Tabs? Take a lot care till then, Peace, Blessings and happy Tabbing. 

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).