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

Hackublog


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

ตอนนี้มีความคิดเห็น : 16 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ลองทำตามดูแล้วค่ะ แต่มันไม่ขึ้นแสดงบทความล่าสุดเลย มีแต่กล่องเปล่าๆ

  1. @ creative

    เปลี่ยนชื่อบล็อกหรือยังครับ
    ตรงบรรทัดนี้ >> home_page = http://ใส่ชื่อบล็อกของ คุณ.blogspot.com/;

  1. เปลี่ยนแล้วค่ะ ทำตามที่บอกทุกอย่างเลย

  1. 1. ถ้า blog ของคุณยังไม่มีบทความเลย gadget นี้ก็จะไม่แสดงผลครับ
    2. ถ้ามีบทความไม่ถึง 10 บทความ ก็ตั้งค่า numposts ให้เท่ากับจำนวนบทความที่มีในบล็อกครับ

  1. ผมก็ไม่ขึ้นเหมือนกันครับ เปลี่ยนทุกอย่างแล้ว...
    ผมก็ลบออกแล้วด้วยครับ เพราะมีแต่กล่องปล่าว

  1. @ Tommaso Phakk : ผมเพิ่งนำโค้ดไปทดสอบเมื่อกี้นี้ก็ยังใช้ได้ดีทุกประการครับ รบกวนเช็คการแก้โค้ดให้ถูกด้วยครับ
    ปล. มีคนนำไปทำสำเร็จมาแล้วหลายบล็อกครับ ยืนยันครับ

  1. ไม่ได้อะพี่ blogหนังของผม มีทั้งรูปมีทั้งบทความ มันไม่มีอะไรขึ้นเลยคับ แก้ เหมือนที่พี่Hackblog บอกหมดแล้วคับ

  1. @ AngelofDeath : ในแม่แบบของน้องป๊อปมี
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

    เป็นเวอร์ชั่นใหม่ที่ใช้แทน
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    ดังนั้นตอนติดตั้งโค้ดน้องป๊อบจะต้อง ลบโค้ด
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    ออกไปก่อนติดตั้งครับ

  1. ผมติดตั้ง แสดงบทความล่าสุดพร้อมรูป แบบ Animation
    และ
    ติดตั้ง สารบัญ แบบซ่อน/แสดง
    แล้วปรากฎว่า บัญกับไม่ซ่อน แต่แสดงทุกอันเลย
    อีกทั้ง การแสดงบทความล่าสุดพร้อมรูป แบบ Animation ก็ไม่ แสดงอะไรเลยคับ
    ผมต้องทำเช่นไร หรอคับ

  1. @BeerBc522
    1. ลองเช็คดูว่าเปลี่ยนชื่อบล็อกในสคริปต์ครบหรือยัง
    2. มันอาจจะทำงานขัดแย้งกันเพราะว่าดึงข้อมูลมาพร้อม ๆ กัน แนะนำว่าต้องเลือกติดเพียงอันเดียวครับ
    3. ลองใช้ recent post แบบธรรมดาดูนะครับ สวยพอได้เหมือนกัน ตามลิงค์นี้ครับ
    http://www.hackublog.com/2009/09/blog-post_4934.html

  1. ขอบคุณคับ

  1. ถ้าอยากให้แสดงแบบนี้แต่แยกตามหมวดหมู่ป้ายกำกับ ต้องทำยังไงคะ แล้วอยากให้มีพื้นหลังด้วยต้องทำไงคะ

  1. ดูเหมือนสคริปจะมีปัญหา อดเลย

  1. @Who It:แก้ให้แล้วนะครับ

  1. เปลี่ยนตามที่บอก ก้อใช้ไม่ได้
    เอาออกแล้ว

    ยืนยันอีกเสียงว่าใช้ไม่ได้

  1. ช่วยหน่อยครคับ ใช้ไม่ได้เหมือนกัน

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel