Search This Blog

Tips: Recent Post with Thumbnails For Blogspot

Monday, August 18, 2014

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

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

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

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

Recent Post with Thumbnails

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 ของเว็บที่เราจะให้ลิงค์ไป

Recent Post with Thumbnails 01

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

Share

Find us on facebook

 
Copyright © 2015 NP me story...
Distributed By My Blogger Themes | Design By Herdiansyah Hamzah