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

วิธีแสดงบทความล่าสุดพร้อมรูป แบบ 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>



ขอบคุณhttp://www.hackublog.com

3 ความคิดเห็น:

  1. คำตอบ
    1. ไม่ระบุชื่อ10 มีนาคม 2558 17:26

      ขอแนะนำใช้วิธีนี้ครับ http://webblog2u.blogspot.com/2014/04/recent-post-slidebar.html
      (Recent post Slidebar โค้ดสไลด์บาร์ สำหรับอัพเดทโพสต์ล่าสุดในบล็อก)
      สวยเหมือนกันครับ แต่วิธีจะต่างกันครับ อาจยุ่งยากนิดนึง แต่ใช้ได้ครับ
      ถ้ากลัววางโค้ดพลาดให้ "สำรอง" ข้อมูลก่อนครับ
      ตัวอย่างบล็อกที่นำไปใช้
      http://watchang.blogspot.com/

      ลบ
    2. ไม่ระบุชื่อ10 มีนาคม 2558 17:28

      อย่าลืมเปลี่ยน url ในโค้ดนะครับ

      ลบ

วันนี้