Tiện ích mạng xã hội trượt dọc cho blogger khi cuộn trang xuống dưới

Tiện ích này hiện lên khi cuộn trang xuống bên dưới, nằm ở góc dưới bên phải và trượt dọc cho đến cuối trang. Nó bao gồm nút chia sẻ bài viết lên Google +, nút Like Fan Fage Facebook và Follow Twitter.

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/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>
<style>
#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;}
</style>
<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%2FPageUsername&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/TwitterUsername" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow Us</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>

Thay đổi các chữ có màu đỏ trong đoạn code trên: PageUsername - Tên Page Facebook, TwitterUsername - Tên Twitter của bạn.

Nâng cấp: thêm vào ô tiện ích đăng ký nhận bài đăng qua email

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/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>
<style>
#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:290px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:130px;}
#bwsocialslide{
  background:#f3f3f3;
  -moz-box-shadow:inset 0 0 1px #333;
  -webkit-box-shadow:inset 0 0 1px #333;
  box-shadow:inset 0 0 1px #333;
  padding:12px 14px 12px 14px;
  width:290px;
  position:fixed;
  bottom:13px;right:0px;
  display:none;
  z-index:3;
  height:65px;
}
.bw-email{
  padding:5px 0 0 5px;
  float:left;
  font-size:1.4em;
  font-weight:bold;
  margin:0 0 10px 0;
  color:#686B6C;
}
.bw-emailsubmit{
  background:#9B9895;
  cursor:pointer;
  color:#fff;
  border:none;
  padding:3px;
  text-shadow:0 -1px 1px rgba(0,0,0,0.25);
  font:12px sans-serif;
}
.bw-emailsubmit:hover{
  background:#E98313;
}
.textarea{
  padding:2px;
  margin:6px 2px 6px 2px;
  background:#f9f9f9;
  border:1px solid #ccc;
  resize:none;
  box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  font-size:13px; 
  width:170px;
  color:#666;
}
</style>
<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>
<center><div class="bw-email">
Nhận bài đăng mới qua Email<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=widgetcraft', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Điền địa chỉ Email của bạn...&quot;;}" onfocus="if (this.value == &quot;Điền địa chỉ Email của bạn...&quot;) {this.value = &quot;&quot;;}" value="Điền địa chỉ Email của bạn..." type="text" />
<input type="hidden" value="widgetcraft" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="bw-emailsubmit" value="Đăng ký" type="submit" />
</form>
</div></center>
<div class='clear'></div>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Mua rẻ Đức Kiên trên mạng xã hội!</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%2FMuareduckien&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/muareduckien" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow Us</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>

Sửa những chữ được tô đỏ trong đoạn code trên, với widgetcraft thay bằng Feed ID blog của bạn.

Nếu bạn chỉ muốn để tiện ích đăng ký nhận bài đăng qua email thôi thì dùng đoạn code này:

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#bwsocialslide").show("slow");else $("#bwsocialslide").hide("slow");});function closebwsocialslide(){$('#bwsocialslide').remove();}</script>

<style>
#bwsocialslide{
  background:#f3f3f3;
  -moz-box-shadow:inset 0 0 1px #333;
  -webkit-box-shadow:inset 0 0 1px #333;
  box-shadow:inset 0 0 1px #333;
  padding:12px 14px 12px 14px;
  width:250px;
  position:fixed;
  bottom:13px;right:0px;
  display:none;
  z-index:3;
  height:65px;
}
.bw-email{
  padding:5px 0 0 5px;
  float:left;
  font-size:1.4em;
  font-weight:bold;
  margin:0 0 10px 0;
  color:#686B6C;
}
.bw-emailsubmit{
  background:#9B9895;
  cursor:pointer;
  color:#fff;
  border:none;
  padding:3px;
  text-shadow:0 -1px 1px rgba(0,0,0,0.25);
  font:12px sans-serif;
}
.bw-emailsubmit:hover{
  background:#E98313;
}
.textarea{
  padding:2px;
  margin:6px 2px 6px 2px;
  background:#f9f9f9;
  border:1px solid #ccc;
  resize:none;
  box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  font-size:13px; 
  width:170px;
  color:#666;
}
</style>

<div style="display: none;" id="bwsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closebwsocialslide();">(X)</a>

<div class="bw-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=widgetcraft', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="widgetcraft" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="bw-emailsubmit" value="Submit" type="submit" />
</form>
</div>
</div>
<div class='clear'></div>

Chúc bạn thành công!