Scrolling Social Recommendation 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.

/* MyBloggerLab.com Social Slide out Box Widget

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

#mblsocialslide{background:#f3f3f3;border-radius:9px;-moz-border-radius:9px;-webkit-borde r-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;}</ span>

• 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()>=$(docum ent).height()/4)$("#mblsocialslide").show("slow");else $("#mblsocialslide").hide("slow");});function closeMBlsocialslide(){$('#mblsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.p hp"});}</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%2Feideamart&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/saadahmads" 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 eideamart with your Facebook Page URL.

• Also replace saadahmads 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.