Attractive Recommendation Social Widget For Blogger

Blogger Tips » blogger-tips-tricks , Social Media , Widgets » Attractive Recommendation Social Widget For Blogger

Attractive Recommendation Social Widget For Blogger

Posted by: .: Admin :. on 10:00 AM

1 comments

Social bookmarking is really important in
blogger.Between social site,Facebook, Google+
and twitter are more popular.because we are
creating fan page and follower for our blog.
Actually, its the one of way to get traffic.
Today im going to explain,how to add scrolling
recommendation box for your blog.check
demo link below. you will get it when
scrolling to bottom.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> code

#socialslide{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;}

7. Go to blogger and click drop-down like 1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below 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)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(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%2Fbloggertrix&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/bloggertrix" 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>

10. Now save your template. You are done.