Floating Social Tabs Widget For Blogger

515 loyal readers

RSS feed | E-mail

1058 followers

Follow us on Twitter!

260 followers

Join us on Facebook!

Today i am going to share one of my favourite Widget for Blogger that is Floating SocialTabs adapted from WordPress plugin. This tutorial was originally created by MyBloggerLab.Step 1: Go to Blogger Dashboard>Template>Select 'Expand Widget'


Step 2: Now Search for ]]></b:skin> and add this code above it.

Windows Reloded, Get Latest Blogger widgets

/****************************************************************
------ SocialTabs Widget For Blogger -----
------- Shared By: PremiumStuffGuru ------
-------http://premium-stuff-guru.blogspot.com -----
*****************************************************************/
.gfnst ul, .gfnst li, .gfnst h3 {
 list-style: none outside none !important;
 margin: 0;
 padding: 0;
}
.gfnst {
  color: #666666;
  font-size: 12px;
}
.active.gfnst .gfnst-slider {
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); -khtml-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.gfnst a {
  text-decoration: none;
}
.gfnst-content {
  position: relative;
}
.social-tabs li {
  height: 26px;
  padding: 4px;
  width: 27px;
  z-index: 10;
}
.social-tabs li a img {
  max-width: 100%;
}
.active .social-tabs li {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); -khtml-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
  z-index: 10;
}
.active .social-tabs li.active {
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); -khtml-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
  z-index: 11;
}
.static .social-tabs {
    padding-left: 8px;
}
.static .social-tabs li {
border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -khtml-border-radius: 5px 5px 0 0;
  float: left;
  margin-right: 2px;
}
.top .social-tabs {
  padding-left: 8px;
}
.top.align-right .social-tabs {
  padding-left: 0;
  padding-right: 8px;
}
.top .social-tabs li {
border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -khtml-border-radius: 0 0 5px 5px;
  float: left;
  margin-right: 2px;
  padding: 3px 4px;
}
.right .social-tabs {
    padding-top: 8px;
}
.right .social-tabs li {
  border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -khtml-border-radius: 5px 0 0 5px;
  margin: 0 0 2px;
}
.bottom .social-tabs {
    padding-left: 8px;
}
.bottom.align-right .social-tabs {
  padding-left: 0;
  padding-right: 8px;
}
.bottom .social-tabs li {
border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -khtml-border-radius: 5px 5px 0 0;
  float: left;
  margin: 0 2px 0 0;
  padding: 4px 4px 2px;
}
.left .social-tabs {
    padding-top: 8px;
}
.left .social-tabs li {
  border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0;  -khtml-border-radius: 0 5px 5px 0;
  margin: 0 0 2px;
}
.gfnst-slider {
  clear: both;
  overflow: hidden;
}
.tab-content {
background: url("http://mybloggerlab.com/Images/Socialtabs/loader.gif") no-repeat scroll center 200px transparent;
overflow: hidden;
position: relative;
z-index: 11;
}
.tab-content ul {
  font-size: 11px;
}
.tab-content .tab-inner {
  background: none repeat scroll 0 0 #FFFFFF;
  overflow: hidden;
}
.tab-inner ul {
  padding: 0 10px;
}
.tab-inner .profile {
  background: none repeat scroll 0 0 #ECECEC;
  border-bottom: 1px solid #CCCCCC;
  height: 25px;
  padding: 10px;
  position: relative;
}
.tab-inner .profile h3 {
  margin: 0;
  padding: 3px 0 3px 26px;
  position: relative;
} 
.tab-inner .profile h3 a {
  font-size: 14px;
  text-decoration: none;
}
.tab-inner .profile h3, .tab-inner .profile h3 a {
  color: #555555;
  text-shadow: 0 0 0 transparent, 0 1px 0 #FFFFFF;
}
.tab-inner .gfnst-btn {
background: url("http://mybloggerlab.com/Images/Socialtabs/btn.png") repeat-x scroll 0 0 #FCFCFC;
border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -khtml-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: 10px;
}
.tab-inner .gfnst-btn:hover {
  background-position: 0 100%;
  color: #FFFFFF;
}
.tab-inner .profile a.avatar {
  display: block;
  float: left;
  margin: 0 10px 0 0;
  outline: medium none;
  text-decoration: none;
}
.tab-inner .profile a.avatar img {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 3px solid #CCCCCC;
  display: block;
  padding: 1px;
}
.tab-rss .profile h3 {
background: url("http://mybloggerlab.com/Images/Socialtabs/rss.png") no-repeat scroll 0 4px transparent;
}
.tab-twitter .profile h3 {
background: url("http://mybloggerlab.com/Images/Socialtabs/twitter.png") no-repeat scroll 0 4px transparent;
}
.tab-facebook .profile h3 {
background: url("http://mybloggerlab.com/Images/Socialtabs/facebook.png") no-repeat scroll 0 4px transparent;
}
.tab-fblike .profile h3 {
background: url("http://mybloggerlab.com/Images/Socialtabs/fblike.png") no-repeat scroll 0 4px transparent;
}
.tab-fbrec .profile h3 {
background: url("http://mybloggerlab.com/Images/Socialtabs/fbrec.png") no-repeat scroll 0 4px transparent;
}
.tab-google .profile h3 {
background: url("http://mybloggerlab.com/Images/Socialtabs//google.png") no-repeat scroll 0 4px transparent;
}
.tab-youtube .profile h3 {
background: url("http://mybloggerlab.com/Images/Socialtabs/youtube.png") no-repeat scroll 0 4px transparent;
}
.static .gfnst-slider {
    border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px;
}
.static .tab-content {
    padding: 10px;
}
.static .tab-inner {
    border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px;
}
.top .gfnst-slider {
    border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px;
}
.top .tab-inner {
    border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -khtml-border-radius: 0 0 5px 5px;
}
.top .tab-content {
    padding: 0 10px 10px;
}
.right .gfnst-slider {
    border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -khtml-border-radius: 10px 0 0 10px;
}
.right .tab-inner {
    border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -khtml-border-radius: 5px 0 0 5px;
}
.right .tab-content {
    padding: 10px 0 10px 10px;
}
.bottom .gfnst-slider {
    border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -khtml-border-radius: 10px 10px 0 0;
}
.bottom .tab-inner {
    border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -khtml-border-radius: 5px 5px 0 0;
}
.bottom .tab-content {
    padding: 10px 10px 0;
}
.left .gfnst-slider {
    border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -khtml-border-radius: 0 10px 10px 0;
}
.left .tab-inner {
    border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -khtml-border-radius: 0 5px 5px 0;
}
.left .tab-content {
    padding: 10px 10px 10px 0;
}
.gfnst .stream {
    overflow: hidden;
}
.stream p {
    margin: 0;
    padding: 0;
}
.tab-inner ul.stream > li {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #FFFFFF;
    margin: 0;
    overflow: hidden;
    padding: 5px 0 20px;
    position: relative;
}
.tab-inner ul li .thumb {
    float: left;
    margin: 0 10px 0 0;
}
.tab-inner ul li .thumb img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 3px solid #ECECEC;
    padding: 1px;
}
.tab-inner ul li .logo {
    margin-bottom: 3px;
}
.tab-inner ul li .title {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
}
.tab-inner ul li .title.clear {
    clear: both;
}
.tab-inner ul li .text {
    display: block;
}
.tab-inner ul li .text br {
    display: none;
}
.tab-inner ul li .date {
    bottom: 5px;
    color: #999999;
    font-size: 90%;
    font-style: italic;
    left: 0;
    position: absolute;
}
.tab-inner ul li .meta {
    color: #999999;
    display: block;
    font-size: 90%;
}
.tab-inner ul li .meta span {
    display: block;
    float: left;
    line-height: 12px;
    margin: 0 8px 5px 0;
    padding: 0 0 0 15px;
}
.tab-google .tab-inner ul li .title {
    margin-bottom: 5px;
}
.tab-vimeo .tab-inner ul li .text {
    margin-bottom: 5px;
}
.tab-inner ul li .meta span.plusones {
    padding-left: 0;
}
.tab-inner ul li .meta span.shares {
    background: url("http://mybloggerlab.com/Images/Socialtabs/shares.png") no-repeat scroll 0 0 transparent;
    padding-left: 20px;
}
.tab-inner ul li .meta span.views {
    background: url("http://mybloggerlab.com/Images/Socialtabs/views.png") no-repeat scroll 0 0 transparent;
    padding-left: 18px;
}
.tab-inner ul li .meta span.likes {
    background: url("http://mybloggerlab.com/Images/Socialtabs/likes.png") no-repeat scroll 0 0 transparent;
    padding-left: 16px;
}
.tab-inner ul li .meta span.comments {
    background: url("http://mybloggerlab.com/Images/Socialtabs/comments.png") no-repeat scroll 0 0 transparent;
}
.tab-inner ul li .meta span.users {
    background: url("http://mybloggerlab.com/Images/Socialtabs/users.png") no-repeat scroll 0 0 transparent;
}
.tab-inner ul li .meta span.videos {
    background: url("http://mybloggerlab.com/Images/Socialtabs/videos.png") no-repeat scroll 0 0 transparent;
    padding-left: 16px;
}
.tab-inner ul li.gfnst-error {
    color: #990000;
}
.gfnst-loading {
    background: url("http://mybloggerlab.com/Images/Socialtabs/loader.gif") no-repeat scroll 10px center transparent;
    padding: 10px 30px 10px 42px;
}
.gfnst .controls {
    background: url("styles/GFNCoders/SocialTabs/bg_white.png") repeat scroll 0 0 transparent;
    display: none;
    height: 20px;
    left: 10px;
    padding: 5px 0;
    position: absolute;
    z-index: 12;
}
.gfnst .controls ul {
    padding: 0 10px;
}
.gfnst .controls li {
    display: inline;
}
.gfnst .controls a {
    background: url("http://mybloggerlab.com/Images/Socialtabs/controls.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 20px;
    margin-right: 4px;
    width: 20px;
}
.gfnst .controls .prev {
    background-position: -40px 0;
}
.gfnst .controls .next {
    background-position: -60px 0;
}
.gfnst .controls .play {
    background-position: 0 0;
}
.gfnst .controls .pause {
    background-position: -20px 0;
}
.gfnst .controls .gfnst-close {
    background-position: -80px 0;
}
.gfnst .controls .prev:hover {
    background-position: -40px -20px;
}
.gfnst .controls .next:hover {
    background-position: -60px -20px;
}
.gfnst .controls .play:hover {
    background-position: 0 -20px;
}
.gfnst .controls .pause:hover {
    background-position: -20px -20px;
}
.gfnst .controls .gfnst-close:hover {
    background-position: -80px -20px;
}
.gfnst.static .controls {
    bottom: 10px;
}
.gfnst.top .controls {
    bottom: 10px;
}
.gfnst.right .controls {
    bottom: 10px;
    right: 0;
}
.gfnst.bottom .controls {
    bottom: 0;
}
.gfnst.left .controls {
    bottom: 10px;
    left: 0;
}
.tab-twitter .tab-inner ul li .date.offset {
    left: 62px;
}
.tab-twitter .tab-inner ul li .thumb img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #ECECEC;
    padding: 1px;
}
.tab-rss .tab-inner ul li p {
    padding: 3px 0;
}
.tab-facebook .tab-inner ul li p {
    padding: 3px 0;
}
.tab-facebook .tab-inner li img {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #ECECEC;
  float: left;
  margin: 0 7px 5px 0;
  padding: 2px;
}
.tab-google .tab-inner .google-page {
  border-bottom: 1px solid #CCCCCC;
  height: 55px;
  overflow: hidden;
}
.tab-google .tab-inner .google-page.standard {
  height: 117px;
}
.tab-google .tab-inner .google-page.small iframe {
  height: 69px;
  margin-bottom: 0;
}
.tab-google .tab-inner .google-page.standard iframe {
  height: 131px;
  margin-bottom: 0;
}
.youtube-subscribe {
  border: 0 none;
  height: 105px;
  overflow: hidden;
  width: 100%;
}
.tab-content.tab-linkedin .tab-inner {
  background: url("http://mybloggerlab.com/Images/Socialtabs/loader.gif") no-repeat scroll center center #FFFFFF;
}
.tab-twitter, .tab-twitter .gfnst-btn, li.active.gfnst-twitter, li.gfnst-twitter:hover {
  background-color: #00B7FF;
} 
.tab-facebook, .tab-facebook .gfnst-btn, li.active.gfnst-facebook, li.gfnst-facebook:hover {
  background-color: #3B5998;
}
.tab-fblike, .tab-fblike .gfnst-btn, li.active.gfnst-fblike, li.gfnst-fblike:hover {
  background-color: #3B5998;
}
.tab-google, .tab-google .gfnst-btn, li.active.gfnst-google, li.gfnst-google:hover {
  background-color: #2D2D2D;
}
.tab-rss, .tab-rss .gfnst-btn, li.active.gfnst-rss, li.gfnst-rss:hover {
  background-color: #FF9800;
}
.tab-youtube, .tab-youtube .gfnst-btn, li.active.gfnst-youtube, li.gfnst-youtube:hover {
  background-color: #DF1F1C;
}
.tab-pinterest, .tab-pinterest .gfnst-btn, li.active.gfnst-pinterest, li.gfnst-pinterest:hover {
    background-color: #CB2528;
}
.tab-deviantart, .tab-deviantart .gfnst-btn, li.active.gfnst-deviantart, li.gfnst-deviantart:hover {
  background-color: #B8C529;
}
.social-tabs li {
  background: none repeat scroll 0 0 rgb(119, 119, 119);
}

Windows Reloded, Get Latest Blogger widgets

Save Template and proceed to next step.

Step 3: Now go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript and paste this code in html box.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  <script>if (!window.jQuery) { document.write('<scr'+'ipt type="text/javascript" src="http://www.yourpshome.net/js/jquery/jquery-1.5.2.min.js"><\/scr'+'ipt>'); }</script>
 
<script src="http://mybloggerlab.com/Scripts/postrating.js?&_v=bba17b4a"></script>
 <script src="http://mybloggerlab.com/Scripts/social-tabs.min.js?_v=bba17b4a"></script>
 <script src="http://mybloggerlab.com/Scripts/as.js?_v=bba17b4a"></script>
 <script src="http://mybloggerlab.com/Scripts/xenforo.js"></script>
 <base href="http://www.mybloggerlab.com/" />
 <div id="social-tabs"> </div>
  <script type="text/javascript">
     var dark_postrating_minimum_opacity = 1;
    </script>
<script>
jQuery.extend(true, XenForo,
{
 visitor: { user_id: 0 },
 serverTimeInfo:
 {
  now: 1353182699,
  today: 1353110400,
  todayDow: 6
 },
 _lightBoxUniversal: "0",
 _enableOverlays: "1",
 _animationSpeedMultiplier: "1",
 _overlayConfig:
 {
  top: "10%",
  speed: 200,
  closeSpeed: 100,
  mask:
  {
   color: "rgb(255, 255, 255)",
   opacity: "0.6",
   loadSpeed: 200,
   closeSpeed: 100
  }
 },
 _ignoredUsers: [],
 _loadedScripts: {"xfa_blog_indicator":true,"bbcode_tabs":true,"xfa_blogs_nav":true,"thread_view":true,"message":true,"bb_code":true,"message_user_info":true,"userranksribbons":true,"dark_postrating":true,"share_page":true,"toggleme_auto":true,"toggleme_manual":true,"AdvBBcodeBar_css_normal":true,"AdvBBcodeBar_TinyMCE":true,"login_bar":true,"panel_scroller":true,"dark_azucloud":true,"node_list":true,"facebook":true,"social_login_buttons":true,"SocialTabs":true,"bbcm_js":true,"http:\/\/mybloggerlab.com\/Scripts\/postrating.js?&_v=bba17b4a":true,"http:\/\/mybloggerlab.com\/Scripts\/social-tabs.min.js?_v=bba17b4a":true,"http:\/\/mybloggerlab.comt\/Scripts\/as.js?_v=bba17b4a":true},
 _cookieConfig: { path: "/", domain: "", prefix: "xf_"},
 _csrfToken: "",
 _csrfRefreshUrl: "login/csrf-token-refresh",
 _jsVersion: "bba17b4a"
});
jQuery.extend(XenForo.phrases,
{
 cancel: "Cancel",
 a_moment_ago:    "A moment ago",
 one_minute_ago:  "1 minute ago",
 x_minutes_ago:   "%minutes% minutes ago",
 today_at_x:      "Today at %time%",
 yesterday_at_x:  "Yesterday at %time%",
 day_x_at_time_y: "%day% at %time%",
 day0: "Sunday",
 day1: "Monday",
 day2: "Tuesday",
 day3: "Wednesday",
 day4: "Thursday",
 day5: "Friday",
 day6: "Saturday",
 _months: "January,February,March,April,May,June,July,August,September,October,November,December",
 _daysShort: "Sun,Mon,Tue,Wed,Thu,Fri,Sat",
 following_error_occurred: "The following error occurred",
 server_did_not_respond_in_time_try_again: "The server did not respond in time. Please try again.",
 logging_in: "Logging in",
 click_image_show_full_size_version: "Click this image to show the full-size version.",
 show_hidden_content_by_x: "Show hidden content by {names}"
});
// Facebook Javascript SDK
XenForo.Facebook.appId = "352032927697";
XenForo.Facebook.forceInit = true;

$(document).ready(function ($) {
 $("#social-tabs").GFNSocialTabs({
  widgets: 'twitter,facebook,fblike,google,rss,youtube',
  twitterId: 'mybloggerlab',
  twitter: {
   title: 'Latest Tweets',
   follow: 'Follow on Twitter',
   limit: '10',
   thumb: 'true',
  },
  facebookId: '317462514953214',
  facebook: {
   title: 'Facebook',
   follow: 'Follow on Facebook',
   limit: '10',
  },
  fblikeId: '317462514953214',
  fblike: {
   limit: '30',
   stream: 'false',
   header: 'true',
  },
  googleId: '106374439082237286396',
  google: {
   title: 'Syed Faizan Ali',
   follow: 'Add to Circles',
   header: 0,
   limit: '10',
   api_key: 'AIzaSyCCjbpwdpglLltxkUj4J5s0vGCS7CakFB0',
   image_width: '75',
   image_height: '75',
  },
  rssId: 'http://feeds.feedburner.com/premiumstuffguru',
  rss: {
   title: 'Subscribe to our RSS',
   follow: 'Subscribe',
   limit: '10',
  },
  youtubeId: 'YOUR-YOUTUBE-ID',
  youtube: {
   limit: '10',
   feed: 'uploads',
  },
  wrapper: 'gfnst',
  content: 'gfnst-content',
  slider: 'gfnst-slider',
  classOpen: 'gfnst-open',
  classClose: 'gfnst-close',
  classToggle: 'gfnst-toggle',
  classSlide: 'gfnst-slide',
  location: 'right',
  align: 'top',
  width: 360,
  height: 490,
  offset: 30,
  rotate:
  {
   delay: 6000,
   direction: 'down'
  },
  loadOpen: false,
  autoClose: true,
  speed: 1000,
  controls: true,
  external: true,
  imagePath: 'http://mybloggerlab.com/Images/Socialtab/'
 });
});
!function(a,b,c,d){XenForo.BbcmSpoiler=function(a){a.hide()};XenForo.register(".bbcmSpoiler","XenForo.BbcmSpoiler")}(jQuery,this,document);
</script>

Customization:

• Replace http://feeds.feedburner.com/premiumstuffguru with your RSS Feed URL.
• Replace YOUR-YOUTUBE-ID 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 317462514953214 with your FB Page ID.
• Replace twitterId with your twitter username.

Windows Reloded, Get Latest Blogger widgets