บทความนี้คือวิธีแสดงบทความล่าสุดของบล็อกโดยจำแนกตามป้ายกำกับ Label ที่แตกต่างกันไว้ใน Gadget อันเดียวกัน
ซึ่งจริงๆ แล้วก็คือการนำสคริปต์ของลิงก์ข้างล่างนี้มาปรับการแสดงผลใหม่เท่านั้นเอง
http://tip.maxlayout.com/2014/02/blogger-add-gadget-for-show-all-post.html
โดยจะมีวิธีทำได้ดังนี้
ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'
ขั้นตอนที่ 2. ให้เลือก 'เพิ่ม Gadget' แบบ 'HTML/จาวาสคริปต์'
ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว
โดยตั้งค่า URL และปรับขนาดต่างๆ ของเนื้อหาได้ด้วยตนเองตามส่วนอธิบายเพิ่มเติมด้านล่างครับ
<!-- Label Recent Posts Style Start -->
<style type='text/css'>
div.labelrecentlist div {
height: 320px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left;
}
div.labelrecentlist div p {
color:black; font-size:18px; text-align:center; font-weight:bold; line-height:100%;
}
div.labelrecentlist div div {
height: 265px; width:210px; padding:0; margin:0; border:none; background:#ffffff; display:inline; float:center;
}
div.labelrecentlist div div img {
margin-bottom:5px;
}
</style>
<!-- Label Recent Posts Style End -->
<!-- Label Recent Posts Script Start -->
<div class='labelrecentlist'>
<script type="text/javascript">
function recentpostslist3(json)
{
var defaultThumbnail = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s72-c/maxlayout-pencil-blogger-no-image-2013.png';
var thumbnailSize = '210'; // 1600 = Largest Size of Image.
var i,j;
var entryUrl,entryLink,entryTitle,entryThumbnail;
var thumbnailSizeC = 's'+ thumbnailSize + '-c';
for (i = 0; i < json.feed.entry.length; i++)
{
for (j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
entryUrl = json.feed.entry[i].link[j].href;//bs
entryLink = '<a href="' + entryUrl + '">';
entryTitle = json.feed.entry[i].title.$t;
if(typeof json.feed.entry[i].media$thumbnail != 'undefined') {
entryThumbnail = json.feed.entry[i].media$thumbnail.url;
} else { entryThumbnail = defaultThumbnail; }
document.write('<div>' + entryLink + '<img src="' + entryThumbnail.replace('s72-c',thumbnailSizeC) + '" alt="' + entryTitle + '"></img></a>' +
entryLink + entryTitle + '</a></div>');
}
}
</script>
<!-- List Start -->
<div>
<p>Lightwave</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>
<div>
<p>Photoshop</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Photoshop?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>
<div>
<p>Illustrator</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Illustrator?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>
<div>
<p>Fireworks</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Fireworks?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>
<!-- List End -->
</div>
<!-- Label Recent Posts Script End -->
อธิบายเพิ่มเติม
ตอนนำไปใช้เองก็ให้แทนที่ URL ด้วยวิธีดังนี้
ส่วนแสดงเนื้อหาว่าจะมาจากบล็อกใดเขียนอยู่ในส่วนท้ายระหว่าง <!-- List Start --> และ <!-- List End -->
มีโครงสร้างคือ
<div>
<p>ชื่อหัวข้อ</p>
<script src="ที่ตั้งบล็อก/feeds/posts/summary/-/ชื่อป้ายกำกับ?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>
ซึ่งในตัวอย่างด้านบนอันแรกสุดนั้นผมต้องการให้อันแรกแสดงข้อมูลจากป้ายชื่อ Lightwave จึงต้องแทนที่
ชื่อหัวข้อ คือ Lightwave (จะเขียนว่าอะไรก็ได้)
ที่ตั้งบล็อก คือ http://tip.maxlayout.com
ชื่อป้ายกำกับ คือ Lightwave (ต้องเขียนให้ถูกหมดทั้งตัวพิมพ์เล็กพิมพ์ใหญ่และการเว้นวรรค)
ดังนั้นจะเขียนใหม่ได้ดังนี้
<div>
<p>Lightwave</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>
โดยสามารถนำเนื้อหาที่เขียนด้วยโครงสร้างแบบนี้ใส่เพิ่มลงไปได้เรื่อยๆ ซึ่งถ้ามันเต็มแถวแล้วก็จะถูกดันไปอยู่บรรทัดใหม่เองโดยอัตโนมัติ
2 ความคิดเห็น:
มีตัวอย่างให้ดูมั้ยครับ?
ถ้าต้องการให้เวลาคลิกที่ label แล้วแสดงบทความใน label นั้นแบบ thumnail ทั้งหมด หรือตามจำนวนที่เราเลือก จะได้มั้ยครับ เอาแบบ label ใด label หนึ่ง ไม่ใช่ทั้งหมด
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น