Scrolling Social Recommendation Box For Blogger

Do you know why your website is not getting the desirable traffic that you are expecting from it? The prime reason behind it is the lack of social media exposure which is extremely crucial for every blog. You might have seen some websites which have the most desirable traffic without even getting a single visit form Search engine. The technique behind the social traffic is the amount of Likes, +1s and followers you have on your site. Though we had recently shared a widget called Social Traffic Pop, that automatically appears to each and every visitor whenever they visit your blog but sometimes the repeated POP annoys visitors. So, this time we have come up with a bottom slide out Social Box for Blogger that consists of Facebook, Google Plus and Twitter Follow buttons.

Now you will be curious to Preview the Scroll down Social Widget for Blogger, so just scroll down a little bit and see the magic happens at the bottom of your screen. (Keep on scrolling until you see the widget on this MBL Blog).

Features of Social Slide Out Like Box For Blogger:

• Sleek and stylish Social Like box consists of Facebook Page, Google Plus One and Twitter Follow.

• Easily customizable and works perfect with each and every Blogger template.

• It has a dismissible (Cancel) button that allows your users to easily close the Slide out social box accordingly.

• No compromise on speed, works perfectly on almost every browser i.e. Chrome, Firefox and etc.

How To Install Social Slide Out Subscribe Box For Blogger:<

The Steps are extremely modest and would hardly take 2 minutes to complete the integration so just follow the following instructions.

• Go to Blogger.com >> Template >> EDIT HTML >> Proceed

• Now Search for ]]></b:skin> and then paste the following Style Sheet CSS code above it.

/* bsresearcher.blogspot.com Social Slide out Box Widget

-----------------------------------------------*/

#mblsocialslide{background:#f3f3f3;border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:65px;}

• And then after pasting the chunk of CSS code in your template Press the orange button which Says “Save Template” and proceed to next step.

---

• Once again Go to Blogger.com >> Layout >> Add a Gadget.

• Then from the list of Apps select Add HTML/JavaScript.

• Now a new page will be opened don’t worry about the Title, in the HTML body paste the Following Chunk of HTML + JavaScript code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mblsocialslide").show("slow");else $("#mblsocialslide").hide("slow");});function closeMBlsocialslide(){$('#mblsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>

<div style="display: none;" id="mblsocialslide">

<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBlsocialslide();">(X)</a>

<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />

<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FMyBloggerLab&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/Twitter_Handler" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>

</div>

<div class='clear'></div>

Customization:

• Now Replace MyBloggerLab with your Facebook Page URL.

• Also replace Twitter_Handler with your Twitter username that you are using for your blog.

• To change the color of the background replace with your preferred colors.

All Done: Everything is almost done now just save the Widget by Pressing “Save Now” button. That’s it go to your blog and scroll down to enjoy the incredible Social slide out box for Blogger.

From The Editors Desk:

So, we hope that this post have cleared lots of misconception that you cannot get traffic if you are not ranking well in Search Engine. Social media has the power not as much as Search engine but still we cannot neglect its significance. On this occasion, I would like to tell you that Alhamdulillah MyBloggerLab has achieved 20,000 Alexa Ranking and Page Rank 2 while or readership is increasing on daily basis. If you have any difficulties regarding Blogging or Search Engine Optimization Feel free to ask till then peace, blessings and happy Socializing. 

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

Scrolling Social Recommendation Box For Blogger

4/ 5

By Editorial Board

Posted By Editorial Team On August 13, 2012 Comment