สวัสดีครับวันนี้เราก็มากับ winget Popup แบบ Slider ของ Facebook จากเว็บฝรังนะครับมันก็บอกว่า บลาๆๆๆๆๆ บ๊ะ อ่านไม่ออกโว้ย เอาเป็นว่าเรามาดูรูปกันว่ามันเป็นยังไง ตัวDEMO ก็เห็นๆกันอยู่นะครับแต่ส่วนรูปก็……
copy รูปมาเลย 555 ไม่ว่ากันนะครับไม่ให้เคดิตด้วย เพราะมันติดมาให้เห็นกันเลย
ชอบใหมครับถ้าชอบเราก็มาดูกันว่ามันเอาไปติดกันยังไงมาเริ่มกันเลย
ขั้นแรกนะครับ
1.ก็ loginเข้าไปที่ blogger ของท่านไปที่ การออกแบบ –>แก้ไขHTML ไม่ต้องติกขยายเทมเพล นะครับ แล้วก็ค้นหาโค้ด </head> พอเจอแล้วก็เอาโค้ดต่อไปนี้ไปวางก่อนโค้ดดังกล่าว (แต่ถ้าใครมีแล้วก็ไม่ต้องเอาไปติดเพิ่มนะครับ) โค้ดนี้นะครับ
<script src='
http://ajax.googleapis.com/aja...query/1.3.2/jquery.min.js' 
type='text/javascript'></script>
2.ก็ไปที่ องค์ประกอบของหน้า แล้วก็ เพิ่ม Gadget แบบ HTML/JavaScirpt แล้วก็เอาโค้ดนี้ลงไปเลย
<script src='
http://gj37765.googlecode.com/svn/bloggerwidget/ [www.gj37765.blogspot.com]md.js'type='text/javascript'></script>
<div id="mdpopupslider"
style="position:absolute;
width:300px;
height:300px;
background:#333333;
top:50px;
border:5px solid #000;
z-index:999;
display:none;
padding:10px;
left:-300px;">
<a href="#" id="mdclose" style="color:#ddd!important;" onclick="return false;">
<img src="
http://4.bp.blogspot.com/-yN0o...AAAAAAAACok/HI8xTgL-Fho/s1600/ [www.gj37765.blogspot.com]close.png" align="right" />
</a><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/PlugublogFan/319685818094326&width=300&height=260&colorscheme=dark&show_faces=true&border_color=#333333&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:260px;" allowtransparency="true"></iframe><div style=" float:right; margin-right:35px;margin-top:-10px; font-size:9px;" ><a href="
http://plugublog.blogspot.com/ ">plugublog</a> / <a href="
http://plugublog.blogspot.com/ "> Get This!</a></div></div>
หากเป็นประโยชน์ต่อท่าน ขอแค่ บวก หนึ่ง ก็พอ
