Blogger: เมนูแสดงรายชื่อหัวข้อบทความแบบเลื่อนลง

วิธีสร้างกล่องแสดงรายชื่อหัวข้อบทความแบบเลื่อนลงแบบตัวอย่างข้างล่างนั้นสามารถทำได้ดังนี้

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



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

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

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

<!-- Maxlayout.com Drop-Down Recent Posts List Start -->
<!-- DDRPL - Script Open -->
<script type="text/javascript">
function recentpostslist2(json) {
var allData = '<select style="width:100%;" onchange="location=this.options[this.selectedIndex].value;">' +
'<option>Click to choose a post</option>';
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = json.feed.entry[i].link[j].href;//bs
var entryTitle = json.feed.entry[i].title.$t;
allData += '<option style="width:210px;" value="' + entryUrl + '" title="' + entryTitle + '">' + entryTitle + '</option>';
}
document.write(allData + '</select>');
}
</script>
<!-- DDRPL - Script Close -->
<!-- DDRPL - URL Open -->

<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Blogger?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<!-- DDRPL - URL Close -->
<!-- Maxlayout.com Drop-Down Recent Posts List End -->


อธิบายเพิ่มเติม
ขณะนี้สคริปต์นั้นจะแสดงข้อมูลจากเว็บชื่อ
tip.maxlayout.com
ในป้ายกำกับชื่อว่า
Blogger
ซึ่งทั้งสองจุดนั้นถูกเขียนอยู่ใต้ข้อความว่า
<!-- DDRPL - URL Open -->
โดยสามารถแทนที่โค้ดทั้งสองจุดนั้นลงไปได้เลย
ก็จะพบว่าเครื่องมือนี้แสดงข้อมูลจากบล็อกของคุณแทน

นอกจากนี้ถ้าหากลองสั่งลบคำว่า
/-/Blogger
แล้วสั่งแทนที่แค่เฉพาะ URL ชื่อบล็อกซึ่งก็คือโค้ดว่า
tip.maxlayout.com
ก็จะทำให้เครื่องมือนี้กลายเป็นแสดงรายชื่อบทความจากทั้งหมดในบล็อกแทน

ส่วนผู้ที่ต้องการแสดงเครื่องมือนี้หลาย ๆ อันในบล็อกแห่งเดียวกันก็ให้แก้ไขเฉพาะโค้ดที่อยู่ระหว่าง <!-- DDRPL - URL Open --> ไปจนถึง <!-- DDRPL - URL Close --> โดยนำมาเขียนต่อกันก็พอแล้วซึ่งอาจเขียนชื่อกำกับไว้ด้วยเพื่อให้แยกแยะได้สะดวกตัวอย่างเช่น ให้ลองแทนที่ตำแหน่งดังกล่าวแบบนี้
<!-- DDRPL - URL Open -->
<span style="font-weight:bold;">All Post</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Blogger</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Blogger?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Photoshop</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Photoshop?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Lightwave</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<!-- DDRPL - URL Close -->

ซึ่งจะให้ผลดังตัวอย่างข้างล่างนี้

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

All Post

Blogger

Photoshop

Lightwave

Post Status




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

Thanapon Thongpu กล่าวว่า...

ผมทำเเล้วมันไม่ติดอะครับ theno-r.blogspot.com ทำหลายรอบเเล้วด้วย
เเต่พอทำกับ บล็อค อื่นกลับทำได้เฉย marvelcharacterinthai.blogspot ลองไปดูหน่อยครับ

Thanapon Thongpu กล่าวว่า...

เเก้ไขชื่อบล็อคนะครับ theno-ah.blogspot.com
ย้ำว่าทำยังไงก็ไม่ได้ครับ ผม Copy โค๊ดมาครบเเล้วครับ ไม่ขาดไปเกิน
เเก้ไขตรง /-/blogger เเล้วด้วย ไม่ไหวจริงครับ รบกวนหน่อยนะครับ

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

สวัสดีครับ ถ้ามีบล็อกหนึ่งอันในเทมเพลทแบบเดียวกันที่ผิดปกติก็แนะนำให้ลองตรวจดูทีละขั้นดังนี้ครับ
1. เริ่มจากได้เช็คแล้วว่าตัวแม่แบบเทมเพลทในทั้งสองบล็อกที่คุณมีอยู่นั้นเป็นตัวเดียวกัน ซึ่งเขียนเหมือนกันทั้งหมด
2. ต่อมาก็ให้ลองเช็คว่าในเทมเพลทของบล็อก theno-ah นัั้นจะต้องไม่มีเครื่องมือ Gadget ที่ถูกใส่ "HTML/จาวาสคริปต์" ซึ่งถูกเขียนให้ขัดขวางการทำงานของสคริปต์ตัวนี้ใส่อยู่
3. โดยถ้าหากดูทั้งสองจุดแล้วก็ให้ดูที่ บล็อกของฉัน > การตั้งค่า แล้วเปรียบเทียบกันครับ

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