Social Follow Box Slider Widget For Blogger

By  at 9:36 AM    
social box slider widget for blogger


Follow boxes are very useful to get followers on social networks but when there is a number of social profiles like Facebook, twitter, Linkedin, Google+ then it becomes a problem to show all the follow boxes n blog because of a limited space. Another problem of adding many follow boxes is they take alot of time to load and slows down blogs, therefore bloggers use to add follow buttons in blogs as they loads faster and don't take too much space on blog. But if one wish to add all boxes on his blog without loosing his blog speed and space he would need an all in one widget which has all follow boxes and takes lesser time to load and lesser space too. For the same purpose I have created an awesome widget which contains all follow boxes(Google+, Facebook, Twitter and linkedin) and takes least time to load. It is a social profile slider. It sliders each social profile equal interval of time and takes space of only one social profile box, you can take a look in above animated image. You can adjust the time of sliding in this widget. I have added only four most popular social networks in it, since I don't use Linkedin that's why I have add its CEO's profile in it.
Hope you like it. Its very easy to install this widget in blogger but we have to use a trick to add it because if we try to add this widget manually like other gadgets, it will not work so If you want to add this widget in your blog follow below steps:

Step 1: Go to blogger dashboard.

Step 2: Select template in the menu on your left hand side and click on Edit Html.

Step 3: Search for below code in the Html code by using Ctrl+F on your keyboard:
<b:section-contents id='sidebar-right-1'> 

Step 4: Just below it paste the below code:
<b:widget id='HTML20' locked='false' title='Slide follow box' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url != &quot;http://101helper.blogspot.com/&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<script src='https://rawgit.com/101Helper/docs/master/jsinstallizer.js'/>
<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-pager='#no-template-pager' data-cycle-pager-event='mouseover' data-cycle-pager-template='mouseover' data-cycle-slides='&gt; div' data-cycle-timeout='10000' style='position: relative;height: 330px; right: 10px;'>
        
<div class='fb-wrap social-widget cycle-slide' style='position: absolute; top: 0px; left: 0px; z-index: 96; opacity: 0; display: block; visibility: hidden;'>
<div class='fb-page' data-adapt-container-width='true' data-height='330px' data-hide-cover='false' data-href='https://www.facebook.com/101helperblogspot' data-show-facepile='true' data-show-posts='true' data-small-header='false' data-width='240px'><div class='fb-xfbml-parse-ignore'/></div>
    </div>

<div class='twitter-wrap social-widget cycle-slide' data-twttr-id='twttr-sandbox-0' style='position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;'><a class='twitter-timeline' data-widget-id='560163045163282433' height='341' href='https://twitter.com/101Helperblog' width='234'/>
<a class='twitter-timeline' data-dnt='true' data-widget-id='647452823882493952' href='https://twitter.com/101Helperblog'/>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
        </div>

  <div class='google-wrap social-widget cycle-slide cycle-slide-active' style='position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;'>
        <div id='___page_0' style='text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 234px; height: 338px; background: transparent;'><!-- Place this tag in your head or just before your close body tag. -->
<script src='https://apis.google.com/js/platform.js'/>

<!-- Place this tag where you want the widget to render. -->
<div class='g-page' data-href='//plus.google.com/u/0/109303537659462705427' data-rel='publisher' data-width='234'/>
</div>
        
    </div><div class='linkedin-wrap cycle-slide' style='position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;'>
        
<script src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script data-format='inline' data-id='/in/jeffweiner08' data-related='false' type='IN/MemberProfile'/>
  
    </div>
<a class='auth-101' href='http://101helper.blogspot.com/2015/01/social-follow-box-slider-widget-for-blogger.html' rel='nofollow'>Powered By 101Helper</a>
</div>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
      </b:if>
</b:includable>
  </b:widget>


Step 5: Now search for ]]></b:skin> and paste below code above it:
/* Slider CSS by 101Helper*/ 
#slides{
    padding: 0 0 0 152px;
    position: relative;
top: 27px;
right: 97px;
    width: 221px;
}
.cycle-slideshow{
position:relative;
top: -3px;
right: 120px;
}
#slides hr{
    border:0 solid #fff;
    border-top:1px dashed #d8d9db;
}
#slides p{
    font-family: HelveticaNeue, Arial, sans-serif;
    height: 109px;
    line-height: 17px;
    width: 221px;
}

.social{
    padding:32px 0 0 145px;
    margin-bottom: 30px;
    position: relative;
top: 27px;
right: 97px;
    overflow: hidden; }

.social li{
    float: left;
    margin-right: 10px;
    position: relative;
}

.social a{
    display: block;
    height: 48px;
    width: 46px;
}

/* active state */

.social-widget {
    border: 5px solid #A5CBE2;
    border-radius: 6px 6px 6px 6px;
position: relative;
top: 27px;
right: 97px;
}

.fb-wrap{
    height: 341px;
    margin-left: 130px;
    width: 234px;
}

.google-wrap {
    height: 338px;
    margin-left: 130px;
    width: 234px;
}
    /* fix flashing widget */
    .google-wrap iframe { visibility: hidden !important; }
    .google-wrap.cycle-slide-active iframe { visibility: visible !important; }

.twitter-wrap {
    height: 341px;
    margin-left: 130px;
    width: 234px;
}

.linkedin-wrap {
    margin-top: -5px;
    margin-left: 80px;
} 
.auth-101{
    position: relative;
    left: 180px;
    font-weight: bold;
    font-size: 13px;
}
.IN-widget {
    height: 341px;
    background-color: #fff;
}
/* Slider CSS by 101Helper*/ 


Step 6: Now search for <head> and paste below code below it:
<script src='https://rawgit.com/fahimraza/FK/master/boxslider.js' type='text/javascript'/>
<script src='https://rawgit.com/fahimraza/FK/master/boxslider2.js' type='text/javascript'/> 


Step 7: Click on save template and move to next step.

Step 8: Now go to layout and edit the newly added gadget having title Slide follow box.

Step 9: Copy the below code and paste it into it:
<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-pager='#no-template-pager' data-cycle-pager-event='mouseover' data-cycle-pager-template='mouseover' data-cycle-slides='&gt; div' data-cycle-timeout='10000' style='position: relative;'></div>
<script>(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/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step 10: Click on save and you are done.

Open your blog to see the sliding follow box.

Customization: 

 First of all you have to replace your social profile ID's with mine so replace all the black text with your social profile ID's in the code used above in step 4. 

If you have any question ask me in comments.

I have designed this gadget to fix at normal gadget position but if it has irregular position on your blog you can change its position by adjusting the numbers highlighted in code used in step 5 

Further you can customize its sliding speed by changing the number(10000) used in code in step 4 and step 9 highlighted with yellow color. If you want to change the sliding speed you have to change number 10000 two times one in the code used in step 4 and one in the code used in step 9. The default number is 10000 which means 10 seconds so every follow box will appear after 10 seconds, if you wish to slide it in 5 seconds replace 10000 with 5000 similarly for 4 seconds 4000, for 8 seconds 8000 and so on, but make sure to change number in code used in both step 4 and step 9. If you further have any question ask me in comments or contact me. 

Thanks for visiting 101Helper, follow and subscribe on Homepage to get latest updates about unique blogger gadgets. Share this post with others and help 101Helper grow. Vote this post up by below star ratings.

Search tags: Social follow box slider widget for blogger, sliding follow box widget for blogger, follow box for blogger with stylish design, all in one follow box for blogger, Facebook follow box, Twitter follow box, Google+ follow box and Linkedin follow box for blogger, blogger gadgets, unique gadgets for blogger, 101Helper blogger gadgets.