Tuesday, April 14, 2015

เพิ่ม Slide out Facebook like box ให้Blogger สวยๆ

สวัสดีครับ วันนี้ผมก็จะมาสอนการสร้าง Slide out Facebook like box เป็นกล่อง Fackbook like Box แบบ slider ที่เวลาเราเอาเมาส์ไปชี้ กล่องก็จะสไลด์ออกมา สวยดูดี ใช้แต่งบล็อกของเราครับ

วิธีเพิ่มSlide out Facebook like box

1.ไปที่บล็อกของเรา
2.เลือก รูปแบบ
3.ในหน้านี้ ให้เลือกเพิ่ม Gadget
4.เพิ่มGadget เป็น HTML/JavaScript

5.แล้วก๊อปเอาโค้ดข้างล่างนี้ใส่ลงไปครับ
*ตัวหนังสือสีแดง ให้แทนด้วยURLแฟนเพจของเรา
Code 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {$(".wcfbslide").hover(function() {$(this).stop().animate({right: "-5"}, "slow");}, function() {$(this).stop().animate({right: "-300"}, "medium");}, 500);});
</script>
<style type="text/css">
.wcfbslide{background: url("http://1.bp.blogspot.com/-73Kl0WAVtTU/UbV3J4wvgeI/AAAAAAAACAs/Pb-tonF1TjY/s1600/windroidclubfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 250px;padding:0 5px 0 46px;width: 295px;z-index: 99999;position:fixed;right:-300px;top:22%;}
.wcfbslide div{border:none;position:relative;display:block;}
.wc-gplusfollow
{
 position: relative;
 padding: 10px;
 background:#ffffff; 
 border: 1px solid #ccc;
 box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
</style><div class="wcfbslide">
<div class="wc-gplusfollow"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fwindroidclub&width=295&height=250&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:295px; height:250px;" allowtransparency="true"></iframe>
</div></div>
Previous Post
Next Post
Related Posts