Blogger: แสดงบทความทั้งหมดไว้ในหน้าเดียวกัน

Update: 2014/09/12

---

บทความนี้คือวิธีแสดงบทความทั้งหมดของบล็อกเกอร์ไว้ภายในเครื่องมือ Gadget อันเดียวกัน
ซึ่งบทความจะมีโค้ดให้เลือกอยู่ 2 แบบคือ สำหรับแสดงภาพเป็นจัตุรัสหรือสี่เหลี่ยมผืนผ้า โดยสามารถตั้งค่า URL และปรับขนาดต่างๆ ของเนื้อหาได้ด้วยตนเองตามส่วนอธิบายเพิ่มเติมด้านล่างครับ
ซึ่งสามารถดูตัวอย่างได้ที่นี่ http://www.maxlayout.com/ โดยจะมีวิธีทำได้ดังนี้

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

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'

ขั้นตอนที่ 2. ให้เลือก 'เพิ่ม Gadget' แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. เลือกโค้ดด้านล่างนี้แล้วคัดลอกใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

---

แบบที่ 1 แสดงภาพตัวอย่างเป็นสี่เหลี่ยมจัตุรัส

สามารถปรับขนาดภาพได้ตรงโค้ดที่เขียนว่า
var thumbnailSize = '210'
โดยเปลี่ยนตัวเลขเป็นขนาดที่ต้องการได้เลย
ซึ่งโค้ดที่ต้องนำไปใส่ในกล่อง Gadget คือ

---

<!-- Show All Posts Style Start -->
<style type='text/css'>
div.allrecentlist div {
    height: 265px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left; overflow:hidden;
}
div.allrecentlist div img {
    margin-bottom:5px;
}
</style>
<!-- Show All Posts Style End -->
<!-- Show All Posts Script Start -->
<div class='allrecentlist'>
<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>
<script src="http://tip.maxlayout.com/feeds/posts/summary/?max-results=9999&alt=json-in-script&callback=recentpostslist3"></script>
</div>
<!-- Show All Posts Script End -->

---

แบบที่ 2 แสดงภาพตัวอย่างเป็นสี่เหลี่ยมผืนผ้า

สามารถปรับขนาดภาพได้ตรงโค้ดที่เขียนว่า
var image_width=200;
var image_height=120;
โดยเปลี่ยนตัวเลขความกว้าง (width) และความสูง (height) ได้ตามต้องการ
ซึ่งโค้ดที่ต้องนำไปใส่ในกล่อง Gadget คือ

---

<!-- Show All Posts Style Start -->
<style type='text/css'>
div.allrecentlist div {
    height: 265px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left; overflow:hidden;
}
div.allrecentlist div img {
    margin-bottom:5px;
}
</style>
<!-- Show All Posts Style End -->
<!-- Show All Posts Script Start -->
<div class='allrecentlist'>
<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';

 // 1600 = Largest Size of Image.
var image_width=200;
var image_height=120;

var const_width = parseInt(image_width);
var const_height = parseInt(image_height);
var const_max = Math.max(image_width,image_height);
var const_margin = '';
if(const_width == const_max){
const_margin = parseInt((image_height - const_max)/2) + 'px 0px 0px 0px';
}else{
const_margin = '0px 0px 0px ' + parseInt((const_width - const_max)/2) + 'px';
}

var thumbnailSize = const_max;

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><section style="width:' + const_width + 'px;height:' + const_height + 'px;overflow:hidden;">' +
    entryLink + '<img src="'+entryThumbnail.replace('s72-c',thumbnailSizeC)+'" class="postthumb" alt="'+entryTitle+'"' +
    'style="margin:' + const_margin + '"/></a></section>' +
'<p>' + entryLink + entryTitle + '</a></p></div>');
}
}
</script>
<script src="http://tip.maxlayout.com/feeds/posts/summary/?max-results=9999&alt=json-in-script&callback=recentpostslist3"></script>
</div>
<!-- Show All Posts Script End -->

---

อธิบายเพิ่มเติม

ตอนนำไปใช้เองก็ให้แทนที่ URL ในบรรทัดที่ 3 นับจากด้านล่างสุดของโค้ดจากเดิมที่เขียนว่า
http://tip.maxlayout.com
ให้กลายเป็น URL ของบล็อกคุณเองก็ใช้ได้แล้วครับ

นอกจากนี้สามารถสั่งให้เครื่องมือนี้แสดงแต่เฉพาะบทความจากป้ายกำกับอันใดอันหนึ่งที่ต้องการก็สามารถทำได้โดยเอาชื่อป้ายกำกับอันนั้นเขียนเติมลงไปใน URL เช่น
จากตัวอย่างด้านบนนี้ถ้าบล็อกที่ต้องการดังบทความมาแสดงคือ
http://tip.maxlayout.com
จะทำให้มีโค้ด URL ของบทความซึ่งถูกเขียนอยู่ในบรรทัดที่ 4 นับจากด้านล่างสุดก็คือ
http://tip.maxlayout.com/feeds/posts/summary/
แต่ว่าเมื่อต้องการแสดงแค่เพียงเฉพาะบทความจากป้ายกำกับที่มีชื่อว่า
Text Effect
ก็ต้องนำข้อความว่า
-/Text Effect
ไปเขียนต่อจาก URL เดิมดังนั้นจะได้ URL แบบใหม่คือ
http://tip.maxlayout.com/feeds/posts/summary/-/Text Effect
โดยต้องเขียนชื่อป้ายกำกับนั้นให้ตรงกันทั้งตัวพิมพ์เล็ก พิมพ์ใหญ่ และการเว้นวรรคจึงจะแสดงข้อมูลได้ครับ

ส่วนปริมาณบทความที่ถูกแสดงไว้ในเครื่องมืออันนี้สามารถตั้งค่าให้น้อยลงได้จากการแก้ไขที่ตัวเลข 9999 ให้เป็นตัวเลขจำนวนที่ต้องการได้เลยครับ

นอกจากนี้ภาพที่ถูกนำมาแสดงเมื่อบทความเหล่านั้นไม่มีรูปตัวอย่างก็คือ
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s72-c/maxlayout-pencil-blogger-no-image-2013.png
ซึ่งสามารถแทนที่ URL นี้ได้ตามต้องการ

---

วิธีปรับลักษณะการแสดงผล CSS
สามารถปรับขนาดความกว้างยาวสูงและสีพื้นหลังระยะห่างต่างๆ ของบทความขนาดย่อเพื่อให้เหมาะสมพอดีกับบล็อกของแต่ละคนได้ครับ
โดยแก้ไขหรือเขียนเพิ่มเติมโค้ด CSS ลงไปให้อยู่ต่อจากสคริปต์
div.allrecentlist div {

ตัวอย่างเช่น
ปรับขนาดตัวอักษรให้ font เล็กลงก็เขียนโค้ดเพิ่มต่อท้ายสคริปต์ลงไปว่า
font-size:8px;

ตัวกำหนดความสูงของกล่องบทความตัวอย่างแต่ละอันคือ
height: 265px;

เพิ่มช่องไฟระหว่างกล่องสี่เหลี่ยมทำได้โดยแก้ไขตัวเลขของ
margin:0 5px 15px;
แนวตั้งคือ 5
แนวนอนคือ 15