วิธีทำ navigation bar ให้กับ Template

1.เริ่มแรก หลังจาก Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)

2.Copy Code ด้่านล่างไปไว้ในส่วนของ CSS ไม่รู้ว่าไว้ตรงไหนดู ภาพประกอบ


/* navigation links css code      
----------------------------------------------- */       
#topnav {       
height:40px;       
}       
#topnav ul {       
float:left;       
width:100%;       
padding:0;       
margin:0;       
list-style-type:none;       
}       
#topnav a {       
padding:3px 7px 3px 7px;       
float:left;       
text-decoration:none;       
color:#000;       
margin:9px 10px 0 0;       
}       
#topnav a:hover {       
color:#666;       
}       
#topnav li {       
display:inline       
}

ไม่รู้ว่าไว้ตรงไหนดี ไว้ตามรูปภาพเลยครับ



3.กดค้นหา Code นี้ <div id='content-wrapper'> และนำ Code ด้นล่างมาว่างไว้ด้านบนของ Tag นี้
<div id='topnav'>    
<ul>     
<li><a href='/'>Home</a></li>     
<li><a href='#'>Contact</a></li>     
<li><a href='#'>Link 3</a></li>     
<li><a href='#'>Link 4</a></li>     
</ul>     
</div>
ดูภาพประกอบ ด้านล่าง ไปด้วยก็ได้ครับ



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

No comments: