วันอาทิตย์ที่ 26 พฤษภาคม พ.ศ. 2556
ใส่แถบเฟสบุ๊คด้านข้างให้ Blogger
แถบด้านข้างที่เวลานำมามาชี้จะเลื่อนเป็นกล่อง Like box ของเฟสบุ๊คเป็นส่วนเสริมอีกตัวหนึ่งที่น่าสนใจมากๆ ตัวอย่างดูได้จากทางด้านซ้ายของผมเมื่อนำเมาส์ไปชี้จะเลื่อนกล่องLike boxออกมาเมื่อนำเมาส์ออกจะกลับไปอยู่ในตำแหน่งเดิม แล้วยังคงรูปแบบของเว็บไว้แบบเดิม(สวยเหมือนเดิม) และประหยัดเนื้อที่ของเว็บอีกด้วย
วิธีติดตั้ง
ก่อนอื่นเราต้องเรียกใช้งานJqueryก่อนโดยใช้โค้ดต่อไปนี้ใส่ไว้ข้างหน้า </head> ในเทมเพลตของBlog<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/>
ขั้นต่อไปเข้าสู่หน้าDashboardของบล็อคและคลิ๊กที่รูปแบบ>เพิ่มGadget>html/javascript
<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}.fbplbadge {background-color:#2e5196;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzfRZknJsPK-pr4yFzxjIr8cK4LNwyHfcBOVyD_O6ZfhuSP1rWvoIXtOYsmypBeKT_YSMCQubAyD9LqX3GsDXohUU18M6UXhSmmYh91Une6h6p9Ai_sb3i-KkiJvrJD4QVqxMP4LfxWwuR/s1600/md_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
(function(md){
md(document).ready(function(){
var $dur = "medium"; // Duration of Animation
md("#fbplikebox").css({left: -250, "top" : 100 })
md("#fbplikebox").hover(function () {
md(this).stop().animate({
left: 0
}, $dur);
}, function () {
md(this).stop().animate({
left: -250
}, $dur);
});
md("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div class='mdfbplikebox'>
<div id='fbplikebox' style='display:none;'>
<div class='fbplbadge'/>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FiSmartTeq&width=250&height=250&colorscheme=light&show_faces=true&border_color=%232e5196&stream=false&header=false' style='border:none; overflow:hidden; width:250px; height:250px;background:#FFF;'>
</iframe>
<span><a href='http://i-distinct.blogspot.com.com/'>i-Distinct</a>
</span>
</div>
</div>
เปลี่ยนโค้ดตรงสีแดงให้เป็นuser facebookของคุณ และกดบันทึก
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}.fbplbadge {background-color:#2e5196;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzfRZknJsPK-pr4yFzxjIr8cK4LNwyHfcBOVyD_O6ZfhuSP1rWvoIXtOYsmypBeKT_YSMCQubAyD9LqX3GsDXohUU18M6UXhSmmYh91Une6h6p9Ai_sb3i-KkiJvrJD4QVqxMP4LfxWwuR/s1600/md_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
(function(md){
md(document).ready(function(){
var $dur = "medium"; // Duration of Animation
md("#fbplikebox").css({left: -250, "top" : 100 })
md("#fbplikebox").hover(function () {
md(this).stop().animate({
left: 0
}, $dur);
}, function () {
md(this).stop().animate({
left: -250
}, $dur);
});
md("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div class='mdfbplikebox'>
<div id='fbplikebox' style='display:none;'>
<div class='fbplbadge'/>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FiSmartTeq&width=250&height=250&colorscheme=light&show_faces=true&border_color=%232e5196&stream=false&header=false' style='border:none; overflow:hidden; width:250px; height:250px;background:#FFF;'>
</iframe>
<span><a href='http://i-distinct.blogspot.com.com/'>i-Distinct</a>
</span>
</div>
</div>