In this post im gonna explain how to add customized recommendation popup box for blogger. Actually this is just widget.You can add it to your blog easily. follow below steps.It includes Google plus, facebok and twitter counters.Go to below link for demo.
1. Log in to blogger account and Click drop down.
2. Now select "Layout" Like Below.
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.
5. Now save your HTML/Javascript'.You are done.
Hope this Recommendation Social Widget helps to increase your pageviews.
Recommendation Social Widget for Blogger
2. Now select "Layout" Like Below.
4. Paste below code.
<style> #socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yM3AAddQ12eHKK2mmoJRmg9PNRHEUhE4UcHPAHr_TzbmXTnIwmU4D0YMiiY_tqheHbA57LE8MRNyAogRKQhRD7H2sx28Qo7ItSRhcmcNonOIhEILJI7B9dHuWh_9xWS_6ZxTZU05jpI/s1600/recbg-btrix.png) left top repeat-x; 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; } </style> <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&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&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>
5. Now save your HTML/Javascript'.You are done.
Hope this Recommendation Social Widget helps to increase your pageviews.
Super post. I am a blogger from India and a teen. http://iontech.tk
ReplyDeleteThanks you deepak.
ReplyDeleteDid you forget to tell us about the Point Number 5 & 6.
ReplyDeleteNope.It was my mistake.Now i fixed that issue.
DeleteThanks for remind it. :)