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