Javascript
วิธีแสดงบทความล่าสุดพร้อมรูป แบบ Animation
ขั้นตอนการติดตั้ง
ไปที่แผงควบคุม >> รูปแบบ Add Gadget ในตำแหน่งที่ต้องการ >> เลือก Gadget ชนิด HTML/จาวาสคริปต์ >> วางโค้ดด้านล่างนี้ลงไปแก้ไขตามต้องการ โดยไม่ต้องตั้งชื่อแล้วทำกับบันทึก
*หมายเหตุ ถ้าคุณเคยติดตั้ง jquery1.3.2 ไว้ใน Tamplate แล้ว ก็ให้ตัดโค้ดสีแดงด้านล่างนี้ทิ้งไปแล้วใช้เฉพาะโค้ดที่เหลือ
**แทนURLสีน้ำเงินด้วยURLของคุณ
คัดลอกโค้ดด้านล่างไปใช้ได้เลยครับ
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:0px;
padding:0px 0px;
height:250px;
}
#spylist ul{
width:318px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px 0px 0px;
}
#spylist li {
width:310px;
padding: 5px 5px;
margin:0px 0px 0px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background:#EDEEEF;
border-top:2px solid #ffffff;border-bottom:1px solid #565656;border-left:1px solid #BBBBBB;border-right:1px solid #565656
}
#spylist li a {
text-decoration:none;
color: #520000;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
--></style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 318;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = 'http://webblog2u.blogspot.com/';
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>
ไปที่แผงควบคุม >> รูปแบบ Add Gadget ในตำแหน่งที่ต้องการ >> เลือก Gadget ชนิด HTML/จาวาสคริปต์ >> วางโค้ดด้านล่างนี้ลงไปแก้ไขตามต้องการ โดยไม่ต้องตั้งชื่อแล้วทำกับบันทึก
*หมายเหตุ ถ้าคุณเคยติดตั้ง jquery1.3.2 ไว้ใน Tamplate แล้ว ก็ให้ตัดโค้ดสีแดงด้านล่างนี้ทิ้งไปแล้วใช้เฉพาะโค้ดที่เหลือ
**แทนURLสีน้ำเงินด้วยURLของคุณ
คัดลอกโค้ดด้านล่างไปใช้ได้เลยครับ
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:0px;
padding:0px 0px;
height:250px;
}
#spylist ul{
width:318px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px 0px 0px;
}
#spylist li {
width:310px;
padding: 5px 5px;
margin:0px 0px 0px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background:#EDEEEF;
border-top:2px solid #ffffff;border-bottom:1px solid #565656;border-left:1px solid #BBBBBB;border-right:1px solid #565656
}
#spylist li a {
text-decoration:none;
color: #520000;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
--></style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 318;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = 'http://webblog2u.blogspot.com/';
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>
ขอบคุณhttp://www.hackublog.com
แสดงความคิดเห็น
3 ความคิดเห็น
ไม่ขึ้นเลยครับ
ตอบลบขอแนะนำใช้วิธีนี้ครับ http://webblog2u.blogspot.com/2014/04/recent-post-slidebar.html
ลบ(Recent post Slidebar โค้ดสไลด์บาร์ สำหรับอัพเดทโพสต์ล่าสุดในบล็อก)
สวยเหมือนกันครับ แต่วิธีจะต่างกันครับ อาจยุ่งยากนิดนึง แต่ใช้ได้ครับ
ถ้ากลัววางโค้ดพลาดให้ "สำรอง" ข้อมูลก่อนครับ
ตัวอย่างบล็อกที่นำไปใช้
http://watchang.blogspot.com/
อย่าลืมเปลี่ยน url ในโค้ดนะครับ
ลบ