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

การแสดงบทความล่าสุดจะมีประโยชน์มากในกรณีที่ผู้อ่านได้เปิดอ่านบทความอื่นอยู่ แล้วไม่ต้องการกลับมาดูบทความล่าสุดในหน้าแรกทุกครั้ง ก็สามารถเลือกอ่านได้จาก Sidebar Gadget นี้ได้ทันทีครับ
วิธีติดตั้ง
ไปที่แผงควบคุม >> รูปแบบ Add Gadget ในตำแหน่งที่ต้องการ >> เลือก Gadget ชนิด HTML/จาวาสคริปต์ >> วางโค้ดด้านล่างนี้ลงไปแก้ไขตามต้องการ โดยไม่ต้องตั้งชื่อแล้วทำกับบันทึก

 

เมื่อวางโค้ดแล้วแก้ไขโค้ดชื่อบล็อกของคุณ และตัวเลขความกว้างยาวตามความต้องการแล้วบันทึกครับ


แนวทางการปรับแต่งและความหมายของตัวเลข


ตัวเลขสีแดงคือความกว้างควรปรับให้พอดีกับ ความกว้งของ Template ของคุณเพื่อความสวยงาม


ตัวเลขสีแสดคือความสูงของกรอบการแสดงผลซึ่งถ้าตั้งเป็น 250 ก็กำลังสวยงาม แต่ก็สามารถปรับเพิ่มและลดได้


ตัวเลขสีน้ำเงินควรตั้งค่าให้น้อยกว่าตัวเลขสีอแดงเล็กน้อย


ตัวเลขสีเขียวหมายถึงความสูงของแต่ละบทความล่าสุดที่จะแสดงผล


ตัวเลขสีชมพูหมายถึงความสูงและความกว้างของรูปภาพของบทความล่าสุด


ตัวเลขสีม่วง (เลข 4) นั้นหมายถึงบทความล่าสุดที่จะแสดงผลขณะ load


และตัวเลขสีน้ำตาล (เลข 10) หมายถึงจำนวนบทความล่าสุดที่จะนำมาแสดง


หมายเหตุ ถ้าคุณเคยติดตั้ง jquery1.3.2 ไว้ใน Tamplate แล้ว ก็ให้ตัดโค้ดด้านล่างนี้ทิ้งไปแล้วใช้เฉพาะโค้ดที่เหลือ

 

จากที่ได้เคยแนะนำ การจัดหมวดหมู่ให้กับบทความ ไปแล้ว ในบทความนี้จะใช้ประโยชน์จาการจัดหมู่ของบทความอีกต่อหนึ่ง ซึ่งคือการ แสดงบทความที่เกี่ยวข้องกับบทความที่ผู้อ่านกำลังอ่าน และถ้าหากในบทความของคุณมีรูปภาพประกอบ วิธีที่จะกล่าวถึงนี้ยังสามารถแสดงรูปภาพให้กับเราได้อีกด้วย ดังนั้นหากท่านใดยังไม่ได้ทำการจัดหมวดหมู่บทความก็ไปดูบทความการจัดหมวดหมู่ให้กับบทความด้วย Label Gadget ก่อนนะครับ

วิธีสร้าง
ขั้นที่ 1 ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ

ขั้นที่ 2 ให้ค้นหาโค้ด แล้วแทนที่ด้วยโค้ดต่อไปนี้



< style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
< /style>
< script src='http://hackublog.googlecode.com/files/related-with-thumbs.js' type='text/javascript'/>
< /b:if>
< !--Related Posts with thumbnails Scripts and Styles End-->
< /head>

ขั้นที่ 3 ต่อไปให้ค้นหาโค้ดที่มีลักษณะคล้ายหรือเหมือนกับ

หรือพยายามหาโค้ดแบบนี้

แล้ววางโค้ดต่อไปนี้ต่อจากโค้ดดังกล่าว



< div id='related-posts'>
< b:loop values='data:post.labels' var='label'>
< b:if cond='data:label.isLast != "true"'>
< /b:if>
< b:if cond='data:blog.pageType == "item"'>
< script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>Related Posts with thumbnails for bloggerblogger widgets
< script type='text/javascript'>
var currentposturl="";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
< /script>
< /div>


< /b:if>
< !-- Related Posts with Thumbnails Code End—>

หมายเหตุ อักษรสีแดงสามารถแก้ไขได้ เช่น เลข 5 กำหนดว่าจะแสดงบทความที่เกี่ยวข้อง 5 บทความ และคำว่า Related Posts สามารถแก้ไขได้อย่างเช่นบล็อกของผมแก้เป็นคำว่า บทความที่เกี่ยวข้อง

เสร็จแล้วอย่าลืมบันทึกแม่แบบด้วยนะครับ และเช่นเคยถ้าแก้แล้วกลัวพลาดให้

ทำการสำรองแม่แบบก่อนแก้ไข HTML นะครับ

วิธีแสดง Recent Post with thumbnail บน Blogger

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


ขั้นตอนการแสดงบทความล่าสุดพร้อมรูปประกอบ
ขั้นที่ 1 ไปที่ รูปแบบ >> องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/จาวาสคริปต์
HTML/จาวาสคริปต์

ขั้นที่ 2 วางโค้ดด้านล่างนี้ลงไป แก้ไขอักษรสีแดงและทำการบันทึกครับผม

แนวทางการปรับแต่งโค้ด

http://i43.tinypic.com/orpg0m.jpg คือภาพที่จะปรากฎเมื่อ

showRandomImg = true; คือคำสังที่ทำให้ภาพปรากฎซึ่งถ้าไม่ต้องการให้ปรากฎอาจจะตั้งค่าเป็น false ก็ได้

boxwidth = 298; คือ ความกว้างของ Gadget นี้ สามารถเพิ่ม/ลดได้

borderColor = "#ffffff";

bgTD = "#000000"; คือค่าสีพื้นหลังและเส้นขอบ

thumbwidth = 40;

thumbheight = 40; คือสูงและความกว้างของภาพสามารถปรับเพิ่ม/ลดได้ตามความเหมาะสม

fntsize = 12;

acolor = "#666";


aBold = true;


icon = " ";


text = "comments"; คือ ขนาดและสไตล์ของ font

showPostDate = false; คือการตั้งค่าให้แสดงวันที่โพสด้วยหรือไม่ ถ้าต้องการแสดงตั้งเป็น true

summaryPost = 40; คือ จำนวนอักษรที่ถูกจำกัดให้แสดง

numposts =10; คือจำนวนบทความที่ต้องการแสดง

home_page = "http://blog-app-web.blogspot.com/"; ให้แก้ไขเป็น URL ของบล็อกของคุณ

สำหรับคนที่ Add gadget แล้วไม่แสดงกระทู้ล่าสุด ให้ไปตั้งค่าฟีดของบล็อกให้ส่งออกแบบเต็ม (ดูรูป)








หมายเหตุ หากคุณทำตามบทความนี้สำเร็จแล้วโปรดดาวน์โหลด


จาวาสคริปต์เก็บไว้หรือ upload ใช้งานด้วยตนเอง เพื่อป้องกันปัญหาการเรียกใช้งานจาก hackublog ครับ

http://siiam.bravehost.com/recentposts_thumbnail.js

วิธีแสดง Random Post บน Blogger

การสุ่มบทความขึ้นมาแสดง จะมีประโยชน์ตรงที่ผู้อ่านไม่ต้องเสียเวลาค้นหาบทความที่ต้องการมากนัก เพราะแต่ละครั้งที่ refresh หน้าเว็บบล็อก Gadget นี้จะทำการสุ่มบทความขึ้นมาเท่ากับจำนวนที่เรากำหนดไว้

ขั้นตอนการติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบหน้า >> Add Gadget >> เลือก Gadget ชนิด HTML/จาวาสคริปต์
จากนั้นวางโค้ดด้านล่างนี้ลงไป ตั้งชื่อ Gadget นี้ และบันทึก

ตัวอักษรสีแดงนั้นหมายถึงจำนวนบทความที่จะให้สุ่มขึ้นมาแสดง สามารถปรับเปลี่ยนได้ครับ มีข้อสงสัยประการใดเชิญสอบถามได้เลยครับ

วิธีแสดง Poppular Post บน Blogger

การแสดง Popular Post นั้นหมายถึงการแสดงบทความที่มีการโต้ตอบ และ Comment มากที่สุด ซึ่งสามารถทำได้โดยอาศัย จาวาสคริปต์ และ Gadget ผลที่ได้ก็จะทำให้ผู้อ่าน/ผู่เยี่ยมชมได้เห็นบทความที่โดดเด่นในบล็อกของเรา หรือก็จะทำให้เราได้รับ feed back ว่า บทความไหนที่โดนใจคนอ่านมากที่สุด
ขั้นตอนการติดตั้ง
ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/ จาวาสคริปต์ แล้ววางโค้ดด้านล่างนี้ลงไป >> ตั้งชื่อ Gadget และบันทึกครับ

จำนวน 5 หมายถึงจำนวนบทความที่จะปรากฏ สามารถปรับเปลี่ยนได้ครับ


หมายเหตุ : กรุณาดาวน์โหลดจาวาสคริปต์ http://siiam.bravehost.com/popularpostblogger-lastedit-min.js เก็บเอาไว้สำรองไฟล์ด้วยครับ และถ้าเป็นไปได้ให้ upload สำหรับใช้เองจะดีที่สุดครับ

วิธีสร้างตารางสารบัญของเนื้อหาบน Blogger

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

ขั้นตอนการทำ

1. ไปที่แผงควบคุมแล้วเลือกบทความใหม่

2. ตั้งชื่อบทความที่สามารถสื่อได้ว่าบทความนี้คือสารบัญของเนื้อหา

3. วางโค้ดด้านล่างนี้ลงใปในบทความและทำการบันทึก


< script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript">

< script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://ใส่ชื่อบล็อกของคุณ.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "ใส่หัวเรื่องของคุณ"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
< /script>
< noscript>ใส่ชื่อบล็อกของคุณ.blogspot.com" target="_blank">Blogger Hacks
< div id="feedGadget">ใส่ข้อความขณะรอดาวน์โหลดครับ

วิธีทำให้ URL ของบทความใน Blogger เป็นมิตรกับ SEO

ถ้าคุณเคยค้นหาบทความใน Google จะเห็นว่าผลลัพธ์ในการค้นหาบาง URL นั้นจะมีชื่อตรงกับสิ่งที่คุณต้องการ หรือสื่อได้ว่ามีเนื้อหาที่เกี่ยวข้องกับสิ่งที่คุณต้องการ ซึ่งทำให้คุณตัดสินใจที่จะเลือกอ่านเนื้อหานั้น ๆ ได้ง่ายขึ้น

ในทำนองเดียวกันลองมาสังเกต URL ของบล็อกของคุณดูบ้างว่า มันสื่อความหมายดีหรือไม่ ในที่นี้ผมยกตัวอย่างบทความในบล็อกของตนเองให้ดูดังนี้ :

โดยใช้วิธีการง่าย ๆ คือเอาชื่อบทความในบล็อกของผม(ของคุณ) ไปค้นหาใน Google ซึ่งได้ผลลัพธ์ดังนี้

ตัวอย่างที่ 1

ตัวอย่างที่ 2

จะเห็นได้ว่า URL ของบทความในตัวอย่างที่ 1 นั้นไม่สัมพันธ์กับเนื้อหาเลย สาเหตุที่เป็นเช่นนี้เพราะว่า โปรแกรมของ Blogger ยังไม่สร้าง URL ที่เป็นภาษาไทยได้ แต่สำหรับบทความที่ 2 ที่ใช้ชื่อเป็นภาษาอังกฤษกลับมี URL ที่สื่อความหมายถึงเนื่อหาของบทความมาก ๆ

หลังจากที่ผมได้สังเกตเห็นจึงได้ทำการทดลองในการเขียนบทความถัดมา ก็เลยพบเทคนิคในการสร้าง Post URL ใน Blogger ให้มีความหมายและตรงกับที่เราต้องการได้ตามใจชอบ

ขั้นตอนการทำให้ Blog URL เป็นมิตรกับ SEO

ขั้นที่ 1 เขียนบทความตามปกติ โดยให้ตั้งชื่อเป็นภาษาอังกฤษที่สามารถสื่อความหมายถึงเนื้อหาในบทความนั้น ๆ ได้

ขั้นที่ 2 เมื่อเขียนเสร็จแล้วก็ให้โพสบทความตามปกติ

ขั้นที่ 3 ไปที่แผงควบคุม >> แก้ไขบทความ >> เปลี่ยนชื่อบทความใหม่ให้เป็นชื่อภาษาไทยหรือชื่อใด ๆ ก็ได้ที่คุณต้องการ แต่ถ้าหากคุณชอบชื่อของบทความที่เป็นภาษาอังกฤษอยู่แล้วก็ไม่ต้องแก้ไขใด ๆ ในขั้นตอนที่ 3 นี้

เมื่อดำเนินการตามขั้นตอนตามข้างต้นแล้วลองดูผลลัพธ์ที่ URL ของบทความในบล็อกของคุณดุว่ามีผลอย่างไร สุดท้ายหวังว่าบทความนี้จะเป็นประโยชน์กับ blogger ทุกท่าน ขอบคุณครับ