kali ini Bung Furkon bakal kasih tutorial bagaimana cara membuat Menu bar.
pasti banyak sahabat yang masih bingung kan gimana cara buatnya?
mungkin banyak dari sahabat yang udah coba dari blog lain tapi belum bisa karena kode-kodenya ribet atau karena penjelasan nya kurang baik.
nah, kalo disini insyaallah deh dikasih cara yang paling simple, dengan penjelasan yang terjelas dan ditambah juga dengan gambar-gambar peraganya.
yuk.. mari.
sambil langsung praktek yah, kalo masih tidak bisa juga langsung tanyakan saja tak usah malu-malu lah.
di atas adalah gambar dari blog Bung Furkon, dimana dalam blog ini udah ada menu barnya. iya kan sob?
itu loh yang dibuletin dengan garis warna merah, bukan penampakan loh yah..
itu kan yang sahabat BF inginkan?
kalo iya lanjut...
langkah pertama yang harus sahabat BF lakukan adalah meluncur ke "template", lalu langsung klik edit HTML. pasti tau lah yah, kalo ga kebangetan deh haha
lalu sahabat BF sekalian langsung cari deh ini kode :
div class='main-outer'>
agar lebih cepat, mudah, dan simple sobat cari aja dengan menekan CTRL+F, lalu copy kode diatas ditempat pencarian. sudah ketemu?
kalo sudah lanjut copy kode dibawah ini tepat diatas kode yang sudah sahabat temukan tadi..
ini loh ini :
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#006400;margin:0
15px;padding:0;height:35px;}
#cat-nav a { color:#fff; text-decoration:none; text-shadow:
#228B22 0px 1px 0px;border-right:1px solid #228B22;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#006400; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif;
font-size:11px; font-style:normal; font-weight:400; color:#fff;
text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100;
margin:0; padding:0; list-style:none; line-height:1; background:#228B22; }
#secnav a { font-family:Georgia, "Times New
Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px;
display:block; z-index:100; padding:0 15px; line-height:35px;
text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul {
position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li {
height:30px; border-top:1px solid #fff; }
#secnav li ul li a {
font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px;
padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee;
}
#secnav li ul ul {
margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav
li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li
li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li
li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Menu pertama
</a></li>
<li><a href='#'>Menu kedua </a></li>
<li><a href='#'>Menu ketiga </a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub menu ketiga
A</a></li>
<li><a href='#'>Sub Menu Ketiga B
</a></li>
<li><a href='#'>Sub Menu Ketiga c
</a></li>
</ul>
</li>
<li><a href='#'>Menu keempat </a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu keempat
A</a></li>
<li><a href='#'>Sub Menu keempat
B</a></li>
</ul>
</li>
<li><a href='#'>Menu kelima</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu kelima
A</a></li>
<li><a href='#'>Sub Menu kelima B</a></li>
</ul>
</li>
<li><a href='#'>Menu keenam</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu keenam
A</a></li>
<li><a href='#'>Sub Menu keenam B
</a></li>
</ul>
</li>
</ul>
</div>
sudah belum sob? inget yah diatas kata yang tadi dicari itu loh.
setelah itu save atau boleh pratinjau template.
Lanjut yah?
ini contoh sebelum dicopy sob.
belum ada menu barnya.
Dan ini setelah kode yang banyak tadi dicopy di atas data ini div class='main-outer'>
udah ada menu barnya, kan?
Nah, kalo sudah langkah berikutnya adalah mengganti Menu bar yang ada itu sesuai dengan keinginan kita, bagaimana caranya? sahabat BF bisa langsung kembali ke tempat kode-kode tadi dan sahabat BF ganti tanda (#) dengan URL/link yang sahabat tuju dan mengganti setiap Menu dan Sub Menu dengan judul sesuai kehendak dan keinginan sahabat FB sekalian.
Contohnya kata Menu Pertama diganti beranda, dan tanda (#) sebelum menu pertama tadi diganti dengan link http://bungfurkon.blogspot.com/2015/08/ilmu-pengetahuan.html
Berikut penampakanya !!
berikut contoh penggantianya:
dan finish, shabat tinggal klik save. lalu liat deh blognya, bagaimana sob, bisa?? sudah berhasil?
ini contoh yang sudah berhasil dar proses tadi.
sekian tutorial Bung furkon tentang bagaimana cara membuat menu bar di blog mudah, jelas, dan keren.
ada pertanyaan? silahkan coret-coret komentar ya sahabat Bung Furkon, salam super hehe
Tidak ada komentar:
Posting Komentar