ตัวอย่าง Code ที่ใช้สำหรับทำ Drop Down Menu และ Sub menu ของ Blogger


ในหัวข้อนี้ผมจะมีตัวอย่าง Code ที่ใช้สำหรับทำ Drop Down Menu และ Sub menu ของ Blogger (ตามภาพประกอบด้านล่าง) มาเป็นตัวอย่างให้ทุกท่านได้ลองนำไปใช้ดูน่ะครับ จะทำให้ Blog ของท่านดูดีและสวยงามขึ้นมากทีเดียว ขั้นตอนการทำก็ไม่ได้ยุ่งยากอะไรมากมาย สามารถทำตามได้ตามขึ้นตอนด้านล่างครับ 


วิธีการติดตั้งคือ 
ขั้นที่ 1 เข้าไปที่ Design>Edit HTML ติ๊กถูกที่ Expand Widget Templates ด้วย
ขั้นที่ 2 วางตัวอย่าง Code ด้านล่างระหว่าง Tag: <Body>....</Body> 
ขั้นที่ 3 เปลี่ยนชื่อ Menu และ Sub menu ตามต้องการ พร้อมทั้งใส่ links ของแต่ละเมนู

ตัวอย่าง Code
<div style='clear:both;'/>
<div id='navcontainer'>
<ul id='nav'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>
<li><a href='#'>music</a></li>
<li><a href='#'>politics</a></li>
<li><a href='#'>Uncategorized</a></li>     
</ul>
</div>

 หวังว่าคงเป็นประโยชน์ไม่มากก็น้อยน่ะครับ พบกันใหม่ครับ
ป้ายกำกับ: , , ,

ไม่มีความคิดเห็น:

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

สมัครสมาชิก: ส่งความคิดเห็น (Atom)

ร่วมเป็นสมาชิก Blogseothai คุณคือตัวจริง !