วิธีแสดงบทความล่าสุดพร้อมรูป แบบ Animation

การแสดงบทความล่าสุดจะมีประโยชน์มากในกรณีที่ผู้อ่านได้เปิดอ่านบทความอื่น อยู่ แล้วไม่ต้องการกลับมาดูบทความล่าสุดในหน้าแรกทุกครั้ง ก็สามารถเลือกอ่านได้จาก 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