Add Modern Facebook Like And Twitter Follow Button Popup Widget For Blogger


Hi bloggers , this is pop up social subscription box which is contain facebook and twitter page like and follow button.Many reader ask me to provide this widget so I'm sharing this widget with all of you. Its a popup social subscription box which contain facebook like & twitter follow button. This widget is come out smoothly when you scroll page down. This widget is smoothly slide out when the page gets scroll down.In past this widget is used to show related posts.You can also edit this widget for add more subscription buttons by simple modification, If you can't simply comment below I'll explain.These widget is adapted from wordpress.This widget is designed for open at right side.

So without wasting a time lets add this beautiful popup widget to you blog/website.

☻ HOW TO ADD SOCIAL SHARING WIDGET IN BLOGGER


Written explanation 
1) Go to Blogger DashboardTemplateEdit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
</body>
3) Now Paste the Code Shown Below just Before it.
<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)$("#FTslide").show("slow");else $("#FTslide").hide("slow");});function closeFTslide(){$('#FTslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<style type='text/css'>
#FTslide{
background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6Cjb2V2DfTMxArPwBgV7dzk721qaPeNp6lThxae99otY5dW0v5-DkjaHPDL9G34YzQyqte9jMIuxDUJ_XhxuNLMseru5uLJ_uG0SINdcLlEDA2lHYx95t4Jq51rj5XqAJ0vpXchPUH4/h120/pctoolstips.blogspot.com.png) left top repeat-x;
border-radius:9px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow:inset 0 0 4px #333;
-webkit-box-shadow:inset 0 0 4px #333;
box-shadow:inner 0 0 3px #333;
padding:12px 14px 12px 14px;  width:300px;
position:fixed;  bottom:13px;
left:2px;
display:none;
z-index:3;
height:65px;}
</style>
<div style="display: none;" id="FTslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeFTslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;">
<iframe src="//www.facebook.com/plugins/like.php?href=URL HERE&amp;width=80&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false" 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/USERNAME" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</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>
4) Customize your setting.Find any word click F3 or Ctrl+F
♥ Replace it URL HERE with your Facebook Fan Page URL. 
♥ Replace it USERNAME with your Twitter username. 
5) Save your Widget.

Hiç yorum yok

Blogger tarafından desteklenmektedir.