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://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/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://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/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://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/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

Post Status




33 ความคิดเห็น:

Jaktra Boonbuthong กล่าวว่า...

ขอโทษนะครับ แอดมิน บล็อคผมมันมีปัญหา ตั้งค่า แสดงบทความทั้งหมด ในหน้าแรก ไม่ได้อะครับ พอจะมีวิธีแก้ให้ไหมครับ

Jaktra Boonbuthong กล่าวว่า...

ขอโทษนะครับ แอดมิน บล็อคผมมันมีปัญหา ตั้งค่า แสดงบทความทั้งหมด ในหน้าแรก ไม่ได้อะครับ พอจะมีวิธีแก้ให้ไหมครับ
ปล. ตั้งได้มากสุด 3 บทความ www.hornetanime.blogspot.com

Max กล่าวว่า...

คำตอบดูตามลิงก์นี้ครับ
https://plus.google.com/108378280786875080944/posts/3TcavsJTqiy

weerawat jangjaimai กล่าวว่า...

สวัสดีครับ ถ้าจะให้แสดง แค่ป้ายกำกับ จะทำได้มั้ยครับ เช่น หน้า 1 ให้ แสดงป้ายป้ายที่ 1 หน้า 2 ให้แสดงป้าย 2 อะไรประมาณนี้ครับ ขอบคุณมากครับ

Max กล่าวว่า...

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

LoaD1ParT กล่าวว่า...

ปรับขนาดของรูปภาพให้ยาวขึ้น โดยความกว้างของรูปภาพคงทีทำยังไงหรอครับ

Max กล่าวว่า...

คงจะหมายถึงแสดงรูปให้เป็นแบบสี่เหลี่ยมผืนผ้า
ซึ่งกำหนดขนาดได้โดยเขียน width กับ height ลงไปข้างใต้ div.allrecentlist div img {
เช่นต้องการให้รูปตัวอย่างกว้าง 200 px และสูง 150 px ก็ให้แทนที่โค้ด
div.allrecentlist div img {
ด้วยโค้ดใหม่ว่า
div.allrecentlist div img {
width: 200px;
height: 150px;
ก็เสร็จแล้วครับ
โดยขณะนี้ผมได้นำคำอธิบายนี้เขียนลงในส่วนอธิบายเพิ่มเติมแล้วครับ

I DEKNOY กล่าวว่า...

แล้วผมจะลบทบความอันเก่าออกยังไงอ่ะ มันมีทั้งของคุณ และของเดิมมันด้วยอ่ะครับ

Max กล่าวว่า...

การทำให้ภายในหน้าเว็บที่คุณต้องการนั้นแสดงเครื่องมือ Gadget อันนี้ แต่ให้ซ่อนบทความหลักของ blogger ไว้
ซึ่งผลที่ได้จะคล้ายกับตัวอย่างนี้
http://www.maxlayout.com/
สามารถศึกษาวิธีได้จากบทความเหล่านี้ครับ
http://tip.maxlayout.com/2012/02/hide-blogger-widget-on-specific-page.html
http://tip.maxlayout.com/2012/02/display-blogger-widget-only-on-specific-page.html
http://tip.maxlayout.com/2012/02/hide-all-posts-from-blogger-homepage.html

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

ทำตามแล้วครับ สวยครับ

สอบถามเพิ่ม : ทำยังไงให้ font มันตัวเล็กลง และ/หรือ กำหนดให้ title บทความแค่ 4 บรรทัดเท่านั้น นอกนั้นเป็นแบบ read more...

ขอบคุณมากครับ
http://athlons.blogspot.com

Athlons Thunderbird กล่าวว่า...

ตัวไหนคือตัวที่บอกช่องไฟระหว่างกล่องสี่เหลี่ยมในแนวตั้งครับ
ผมจะปรับให้ห่างหน่อย มันชิดเกินไป

div.allrecentlist div {
height: 280px; width:280px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left;
}

Max กล่าวว่า...

ปรับขนาด font ได้โดยเขียนเพิ่มต่อท้ายสคริปต์
div.allrecentlist div {
ว่า
font-size:8px;
ซึ่งสามารถเปลี่ยนตัวเลขได้ตามต้องการครับ

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

กำหนดให้ title แสดงผลไม่เกินไปกว่าขอบกล่องด้านล่างทำได้โดยเขียนต่อจาก
div.allrecentlist div {
ว่า
overflow:hidden;
แล้วก็ปรับวามสูง height ให้พอดีกับบรรทัดตัวอักษรได้ตามต้องการ
ซึ่งขณะนี้ได้นำคำอธิบายเหล่านี้ใส่ลงไปในบทความแล้วครับ

John Karen กล่าวว่า...

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

Max กล่าวว่า...

ลองอ่านวิธีได้ที่ลิงก์ด้านล่างนี้ครับ
http://tip.maxlayout.com/2012/02/display-blogger-widget-only-on-specific-page.html

Athlons Thunderbird กล่าวว่า...

ขอบคุณกับคำตอบครับ

ปล. ทำไมมันไม่มี email แจ้งมาทางผมแฮะ

Athlons Thunderbird กล่าวว่า...

ทำอย่างไรให้รูปที่ดึงมาเป็นภาพย่อครับ ด้วยอัตราส่วนคงเดิม แทนที่จะเป็นภาพตัด(crop)

ขอโทษด้วยครับที่ถามเยอะ อิอิ

Max กล่าวว่า...

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

Athlons Thunderbird กล่าวว่า...

เอ ผมก็ใช้แบบที่ 2 นะครับ แต่มันไม่คงอัตราส่วน

Max กล่าวว่า...

สคริปต์นี้สามารถกำหนดอัตราส่วนภาพได้เลยเหมือนตัวอย่างข้างล่างนี้ครับ (ลิงก์ตัวอย่างอาจมีการเปลี่ยนแปลงได้ในไม่ช้านี้)
http://test.maxlayout.com/
ซึ่งตามลิงก์ตัวอย่างจะเห็นได้ว่าภาพย่อของทุกบทความได้ถูกนำมาแสดงเปรียบเทียบกันอยู่ ซึ่งรูปแรกถูกแสดงในขนาด 250x250 และภาพที่สองคือ 250x200 โดยแต่ละรูปนั้นก็จะยังคงมีอัตราส่วนของภาพเหมือนเดิมไม่ถูกนำไปยืดหรือหดแต่อย่างใด

Athlons Thunderbird กล่าวว่า...

จะลองทำดูครับ

ขอบคุณครับ

S.P. Law Office กล่าวว่า...

สอบถาม ครับ
http://tanaigeorge.blogspot.com/
บล็อกแสดงข้อความหน้าแรก แค่ 2 บทความ ทั้งที่ผมตั้งไว้ 10 อยากทราบว่า กำหนดโค้ดคำสั่งอย่างไรครับ หาโค้ดไม่เจอครับ

Athlons Thunderbird กล่าวว่า...

บรรทัดที่ 4 จากด้านล่าง
max-results=xxxx

ปรับ xxxx ให้เป็นตัวเลขที่ต้องการแสดง เช่นอยากให้โชว์ 9 ก็ใส่ 9 แทน xxxx

Max กล่าวว่า...

ขอบคุณที่ช่วยตอบครับ

Athlons Thunderbird กล่าวว่า...

สอบถามคุณ max เพิ่มครับ
มีบทความเกี่ยวกับ slideshow jquery มั้ยครับ
ผมชอบ slide ของเว็บนี้มาก แต่ติดตั้งไม่เป็นครับ
http://www.jssor.com

Max กล่าวว่า...

มีสองอันนี้ครับ

แบบที่ 1 คือ
http://tip.maxlayout.com/2014/09/blogger-jquery-accordion-vertical-and-horizontal-image-slider.html
ตัวอย่างของแบบที่ 1 คือ
http://test.maxlayout.com/

แบบที่ 2 คือ
http://tip.maxlayout.com/2014/01/blogger-add-gadget-javascript-image-slider-easily.html
ตัวอย่างของแบบที่ 2 คือ
http://sirihealth.blogspot.com/

ป.ล. ลิงก์ตัวอย่างข้างบนอาจมีการเปลี่ยนแปลงเร็วๆนี้

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

อยากดึงภาพแลกในบทความมาแสดงแก้สคริปตรงไหนครับ คือในบทความมีภาพ4-8ภาพอะครับ

Max กล่าวว่า...

สคริปต์นี้จะดึงภาพที่อยู่ข้างบนสุดจากแต่ละบทความมาแสดงให้อยู่แล้วครับ

m888888 กล่าวว่า...

ขออนุญาต สอบถามนะคะ ใช้แบบที่2 ถ้ากรณีข้างในบทความไม่มีรูปเลยอยากให้มันแสดงเป็นตัวอย่างบทความย่อๆแทนรูป รบกวนหน่อยนะคะ ขอบคุณคะ

Nuttakrittra Phumsawai กล่าวว่า...

ขอสอบถามหน่อยนะคะ ถ้าสมมติว่าอยากให้โชว์แค่ 9 บทความ (ส่วนนี้ทำได้แล้วค่ะ) แล้วให้กด Next page เพื่อไปดูบทความก่อนๆ ต้องทำยังไงคะ ขอบคุณค่ะ

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

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

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