Tips: Recent Post with Thumbnails For Blogspot

ไม่ได้เขียนทิปมาสักระยะ ทิปของวันนี้คือการทำ Recent Post ที่มีรูปเล็กๆ (Thumbnails) สำหรับคนที่ใช้ Blogspot หรือ Blogger.com เอาเป็นว่าผมหามาหลายวิธีละ อันนี้ง่ายมากครับ

ขั้นตอนมีดังนี้

1. ไปยัง Blog ที่เราต้องการที่จะใส่ Widget นี้

2. ไปยัง Layout -> Add Gadget -> HTML/JavaScriptAdd

3. ใสโค้ดด้านล่างนี้ลงไปก็แค่นั้นเลยครับ

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.npmestory.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/><small><a style='margin-left:10px;align:right;' href='http://www.npmestory.com' target='_blank'>NPmestory ทั้งหมด</a></small>

ทั้งนี้วิธีการปรับรูปแบบตามต้องการง่ายๆตามนี้เลยครับ

1. var numposts = 5; << จำนวนโพสที่จะให้ขึ้นแสดง

2. var numchars = 100; << จำนวนตัวอักษรที่จะให้ขึ้นแสดง

3. <script src='http://www.npmestory.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> << ให้เปลี่ยน URL ที่ขีดเส้นใต้เป็น URL ของเว็บ/Blog ของเราที่ต้องการนำมาแสดงที่ Widget นี้

4. <a style='margin-left:10px;align:right;' href='http://www.npmestory.com' target='_blank'>NPmestory ทั้งหมด</a>  << เปลี่ยน URL ที่ขีดเส้นใต้ให้เป็น URL ของเว็บที่เราจะให้ลิงค์ไป

แค่นี้เลยครับทิปง่ายๆแต่มีประโยชน์มาก เอาไปใช้กันดูนะครับ หากชอบจะเอาไปแชร์ก็ได้นะครับ หรืออยากจะคอมเมนท์อะไรก็ยินดีครับ