Social Recommendation Box For Blogger

Hello everyone,hope all are good.We know that the social networking site have a great impact on SEO.Everyone wants to increase their followers and fans for marketing and advertising,so today i am going to give you some tips about how to add scrolling social recommendation box for your blogger blogspot site,which will help you to grow your Twitter followers and Facebook page fans also followers on Google Plus.

Those who don't know how to take advantage of social media they can read those posts below.

Adding Social Networking Site To Google Plus

Sponsoring YouTube Video With Google Plus 

Scrolling Social Networking Recommendation Box

It is very easy easy you have to follow some easy steps to do this.

• go to blogger.com >> template >> edit HTML >> tick expand widget
• download full template for safety.
•  press CTRL+F >> search for ]]></b:skin>
• add the following code just above ]]></b:skin> 

/* earnmoneyzzzz.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;}

• Then save your template.

Remember don't change the code and copy and paste it properly.
 
See the picture below to for understanding it clearly:

The work is not fully done yet,one little thing is still have to do.So here we go.

• go to blogger.com >>layout >> add a gadget 
• select add HTML/javascript
• Now copy and paste the following 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%2FYour facebook page username&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/your twitter username" 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>

Now change the facebook page username with your own and also put your twitter username with yours.

Now you are done.Hope you liked this.

You May Also Like

Active BDT Wire Transfer In Odesk

Know The Worth Of Your Website