การแสดงบทความล่าสุดจะมีประโยชน์มากในกรณีที่ผู้อ่านได้เปิดอ่านบทความอื่น อยู่ แล้วไม่ต้องการกลับมาดูบทความล่าสุดในหน้าแรกทุกครั้ง ก็สามารถเลือกอ่านได้จาก Sidebar Gadget นี้ได้ทันทีครับ
วิธีติดตั้ง
ไปที่แผงควบคุม >> รูปแบบ Add Gadget ในตำแหน่งที่ต้องการ >> เลือก Gadget ชนิด HTML/จาวาสคริปต์ >> วางโค้ดด้านล่างนี้ลงไปแก้ไขตามต้องการ โดยไม่ต้องตั้งชื่อแล้วทำกับบันทึก
<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://ใส่ชื่อบล็อกของคุณ.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>
เมื่อวางโค้ดแล้วแก้ไขโค้ดชื่อบล็อกของคุณ และตัวเลขความกว้างยาวตามความต้องการแล้วบันทึกครับ
แนวทางการปรับแต่งและความหมายของตัวเลข
ตัวเลขสีแดงคือความกว้างควรปรับให้พอดีกับ ความกว้งของ Template ของคุณเพื่อความสวยงาม
ตัวเลขสีแสดคือความสูงของกรอบการแสดงผลซึ่งถ้าตั้งเป็น 250 ก็กำลังสวยงาม แต่ก็สามารถปรับเพิ่มและลดได้
ตัวเลขสีน้ำเงินควรตั้งค่าให้น้อยกว่าตัวเลขสีอแดงเล็กน้อย
ตัวเลขสีเขียวหมายถึงความสูงของแต่ละบทความล่าสุดที่จะแสดงผล
ตัวเลขสีชมพูหมายถึงความสูงและความกว้างของรูปภาพของบทความล่าสุด
ตัวเลขสีม่วง (เลข 4) นั้นหมายถึงบทความล่าสุดที่จะแสดงผลขณะ load
และตัวเลขสีน้ำตาล (เลข 10) หมายถึงจำนวนบทความล่าสุดที่จะนำมาแสดง
หมายเหตุ ถ้าคุณเคยติดตั้ง jquery1.3.2 ไว้ใน Tamplate แล้ว ก็ให้ตัดโค้ดด้านล่างนี้ทิ้งไปแล้วใช้เฉพาะโค้ดที่เหลือ
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Credit : abu-farhan.com
แสดงความคิดเห็น