เพิ่มรูปในบทความล่าสุด Recent post with thumbnail

Written By Aucharaporn Theemcle on วันเสาร์ที่ 17 กรกฎาคม พ.ศ. 2553 | 08:03

เคยเขียนเรื่อง Recent post หรือบทความล่าสุดไว้  เพิ่ม gadget นี้ไว้ในบล็อกช่วยเพิ่มช่องทางให้กับผู้เยี่ยมชมบล็อกเห็นบทความได้มากขึ้น  แต่ก็ไม่เคยได้เอาแปะไว้ในบล็อกเพราะรู้สึกว่ามันไม่สวย ไม่เข้ากับบล็อก    มีโอกาสได้ค้นเรื่องนี้อย่างจริงจังและเจอ recent post with thumbnail หรือ gadget บทความล่าสุดโดยมีรูปในบทความแสดงตัวอย่างมาด้วย

recent post with thumbnail

  ทดลองใช้กับหลาย ๆ บล็อกที่มี  ดูเก๋กว่า gadget เดิมตั้งเยอะแถมน่าคลิ๊กเข้าไปอ่านอีกด้วย  เพราะว่ามันมีรูปพร้อมข้อความ   ดิฉันเองสังเกตว่าการที่มีหัวข้อบทความแล้วรูปด้วย  คนจะสนใจเข้าไปอ่านเพิ่มขึ้น    จากเมื่อก่อนเคยทำ related post เป็นข้อความแบบธรรมดาไว้ คนคลิ๊กเข้าไปอ่านไม่เท่าไหร่   แต่พอทำ related post with thumbnail  ที่เพิ่มรูปเข้าไปด้วย   ปรากฏว่า pageview เพิ่มมากขึ้น วิเคราะห์ดูจาก  stat counter พบว่าสาเหตุที่ pageview เพิ่มขึ้นเพราะมีการคลิ๊กที่ related post with thumbnail นั่นเอง  นอกเหนือจากเหตุผล pageview ที่เพิ่มขึ้นแล้ว  ยังสามารถ นำ gadget นี้ไปวางในบล็อกอื่น ๆ ได้อีกด้วย วางไว้ข้าง ๆ sidebar แทน feed สวยและก็น่าสนกว่าตั้งเยอะ   เพราะฉะนั้นวันนี้มาลองชวนเพืือน ๆ เพิ่ม recent post with thumbnail กันดูบ้าง pageview ของบล็อกจะเพิ่มขึ้นบ้างไหม   มาลองกันดูนะคะวิธีการก็ไม่ยากค่ะ

1.ให้เพื่อน ๆ login ไปที่  blogger >การออกแบบ>เลือกเพิ่ม gadget

gadget html/javascript

2 เลือกเป็น เพิ่ม gadget html/javascript

Recent post_thumbnail

3. copy code กล่องข้างล่างนี้วางลงไป

<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 = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight
= 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "urlของบล็อกเพื่อน ๆ";
</script>
<script src="http://sites.google.com/site/meesubandmeesuksite/myfile/recentpost.js" type="text/javascript"></script>

ปรับแต่งสักนิดให้เข้ากับบล็อกของเรานะคะ 

boxwidth = ความกว้างของกล่อง gadget นี้

thumbwidth ,thumbheight ความกว้างและความสูงของรูปภาพที่แสดง

numposts คือจำนวนบทความล่าสุดที่จะแสดงโชว์

4.ขั้นตอนสุดท้าย บันทึกแล้วลองแสดงผลดูนะคะ อ้อ ! อย่าลืมตั้งค่า ฟีดของไซต์เป็นแบบอนุญาตให้ใช้ฟีดของบล็อกแบบเต็มนะคะ

recentpost_thumbnail_blogspot

 

ปล.อย่าสงสัยนะคะทำไม recent post ของ ชวนเพื่อนเขียนบล็อกจึงไม่ได้แสดงรูปในบทความโชว์ อันนั้นดิฉันตั้งเองค่ะ  อยากโชว์รูปตัวเอง recent post_thumbnail แบบมีเหตุผลนิดหน่อย  กะว่าสักเดือนถึงจะเปลียนเป็นรูปในบทความโชว์เพื่อเปรียบเทียบว่ารูปข้าพเจ้ากับรูปในบทความอันไหนน่าสนใจกว่ากัน  ดิฉันจบเอกวิทย์ค่ะชอบทดลอง  หากเพื่อน ๆ คนไหนอยากได้ recent post ของชวนเพื่อนเขียนบล็อกวางในบล็อกด้วยหล่ะก็ code ข้างล่างนี้เลยค่ะ

<center>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_LMh3dEVsxno/TDiPA9jrItI/AAAAAAAACH8/AERYMB6f25s/s128/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%89%E0%B8%B1%E0%B8%99.jpg";
imgr[1] = "http://4.bp.blogspot.com/_LMh3dEVsxno/StLzJgiNP2I/AAAAAAAAABA/V84k8Pn04lw/S220/Picture+009.jpg";
imgr[2] = "http://lh3.ggpht.com/_LMh3dEVsxno/TDiPA_5bleI/AAAAAAAACH0/NQO_nd8m_9M/s128/%E0%B8%AA%E0%B9%88%E0%B8%8721.JPG";
imgr[3] = "http://lh6.ggpht.com/_LMh3dEVsxno/TDiPAzVW5CI/AAAAAAAACH4/87UGtSLKR2Y/s128/%E0%B9%80%E0%B8%A2%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%A1%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99%202.JPG";
imgr[4] = "http://4.bp.blogspot.com/_VauD29x1cgY/SlQT-Gtp1YI/AAAAAAAAAAU/kxbWJ8v8AMI/S220/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%AA%E0%B8%A7%E0%B8%A2+3.JPG";
showRandomImg = true;
boxwidth = 250;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 30;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://introduction-blogger.blogspot.com/";
</script>
<script src="http://sites.google.com/site/meesubandmeesuksite/myfile/recentpost.js" type="text/javascript">
</script>
</center>

เพื่อนท่านใดกรุณานำไปติดบล็อกให้  ชวนเพื่อนเขียนบล็อก ขอขอบคุณงาม ๆนะคะ recent post_thumbnail




5 comments:

naro กล่าวว่า...

คนแรกเลย :)) รับไปใช้เลยแล้วกันครับ

meesubandmeesuk กล่าวว่า...

โอเค จ๊ะ :X

zJaMeSz กล่าวว่า...
ความคิดเห็นนี้ถูกผู้เขียนลบ
zJaMeSz กล่าวว่า...

สวัสดีครับ ไม่ทราบรู้วิธีทำให้ เวลามีคนคลิกลิ้งค์ในบทความที่เราโพสต์ แล้วให้มันเปิดเป็นหน้าต่างใหม่ โดยที่หน้าเดิมยังเปิดไว้อยู่ มีวิธีเซ็ตยังไงครับ พอจะรู้มั้ยครับ ขอความรู้หน่อยนะครับ ^^
ปล.ขอโทษครับ ข้างบนยังเสร็จเลยลบไปน่ะ งง นิดหน่อย :P
zJaMeSz
Rich@Home บ้านความรู้เพื่อการหาเงินออนไลน์

Meesubandmeesuk กล่าวว่า...

:)) คุณ zJaMeSz อย่ากังวลใจไปเลยค่ะ เรื่องนิดหน่อยเราไม่ถือโทษกันคะ เรื่องทำลิงค์ให้มันเปิดหน้าต่างใหม่ ง่ายมากจ๊ะ คุณ zJaMeSz ใช้เครื่องมือตัวไหนเขียนบล็อกอยู่นะ ถ้าแก้จากเวบ blogger ลองดาวน์โหลด เปิดหน้าต่างใหม่ในบล็อกl แนะนำให้หา เครื่องมือเขียนบล็อก เขียนบล็อกนะคะ รับรองจะติดใจ

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