Sebelumnya terima kasih sudah berkunjung di website saya, pada kesempatan
kali ini saya akan memberikan tutorial atau cara membuat tampilan menu dan sub
menu di blog agar terlihat keren.
Membuat menu-menu seperti “home, About, Alamat, dll” serta memberikan sub
menu dari setiap menu utama itu sangat
penting sekali guna mempermudah pengunjung blog kalian menemukan artikel yang
sudah kalian posting.
Sebagian besar pengguna blog juga banyak menggunakan tema blog hasil
download yang sudah tersedia tampilan
sidebar menu dan sub menu didalamnya , tetapi jika kalian terbilang baru
menjadi blogger itu mungkin akan membingungkan kalian untuk mengedit beberapa/keseluruhan dari tema
hasil download tersebut ,karena didalamnya banyak fitur-fitur yang harus dilakukan
pengeditan ulang agar bisa sesuai dengan keinginan dan kebutuhan blog kalian
masing-masing.
Saya sarankan untuk memakai tema
blog sederhana bawaan dari blog tersebut agar kalian bisa lebih mudah untuk
menyesuaikain fitur-fitur dan tampilan blog kalian menjadi lebih keren. tidak
harus menguasai koding untuk mewujudkan semua itu karena kalian bisa mencari
tahu dan belajar di mbah google mengenai fitur-fitur apa yang kalian butuhkan
untuk blog kalian.
Untuk mempermudah kalian mempraktekan cara
membuat / menambahkan menu dan sub menu
“home,about,..... pada blog kalian, saya juga akan memberikan tutorial
berupa video youtube nantinya.
Oke, langsung saja kita eksekusi , sebelum kalian memulai alangkah baiknya
sudah mempunyai blog ya , hihi ya kalo gak punya mau edit apa toh mas. Pie
toh.. (banyak omong tak geluti kaau, SEGERA MULAI !!)
Baik 😁 Ikuti
Step by step .
Langkah Pertama
(1)
1. Copy semua kode html dibawah ini:
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0
15px;padding:0;height:35px;}
#cat-nav a { color:#eee;
text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid
#156994;}
#cat-nav a:hover { color:#fff;
}
#cat-nav li:hover { background:#000; }
#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:#0d5e88; }
#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='#'>HOME</a></li>
<li><a href='#'/search/label/ABOUT>ABOUT</a></li>
<li><a href='#'/search/label/menu 3>menu 3</a>
<ul id='sub-custom-nav'>
<li><a href='#'/search/label/sub menu 3.1>sub menu 3.1</a></li>
<li><a href='#'/search/label/ sub menu 3.2>sub menu
3.2</a></li>
<li><a href='#'/search/label/ sub menu 3.3>sub menu
3.3</a></li>
<li><a href='#'/search/label/ sub menu 3.4>sub menu
3.4</a></li>
<li><a href='#'/search/label/ sub menu 3.5>sub menu 3.5</a></li>
<li><a href='#'/search/label/ sub menu 3.6>sub menu
3.6</a></li>
</ul>
</li>
<li><a href='#'/menu 4>menu 4</a>
<ul id='sub-custom-nav'>
<li><a href='#'/search/label / sub menu 4.1>sub menu 4.1</a></li>
<li><a href='#'/search/label / sub menu 4.2>sub menu 4.2</a></li>
<li><a href='#'/search/label / sub menu 4.3>sub menu 4.3</a></li>
</ul>
</li>
<li><a href='#'/search/label /menu 5>menu 5</a></li>
<li><a href='#'/search/label /menu 6>menu 6</a></li>
<li><a href='#'/search/label / menu 7>menu 7</a></li>
<li><a href='#'/search/label / menu 8>menu 8</a></li>
</ul>
</div>
Langkah ke dua
(2)
1.
Login
ke akun blog
4.
klik
kursor di sembarang tempat di dalam kode html lalu tekan CTRL+F
5.
akan
keluar kolom pencarian lalu tuliskan <div class='main-outer'> tekan
enter
6.
terlihat
code <div class='main-outer'>
yang di blog kuning, paste kode diatas tepat di atas kode tersebut
7.
Jangan
save html dulu , ubah kode diatas dengan catatan kode dibawah ini
Catatan kode :
1. Tulisan
yang berwarna biru adalah menu yang akan tampil di sidebar blog kalian, ganti sesuaikan dengan menu keinginan
kalian.
2. Tanda
#
yang berwarna merah ganti dengan url
blog kalian contoh:
3. Tulisan
yang saya tandai warna coklat adalah
label setiap postingan anda, jadi harus ditambahkan mengikuti tulisan menu yang kalian inginkan seperti saya ingin
menu TUTORIAL HP jadi :
Nanti saya akan bahas membuat label postingan setelah ini agar menu blog kalian ketika di klik aktif
4. Kode
yang berwarna hijau ganti dengan sub menu yang kalian inginkan caranya sama
seperti nomor dua (2) diatas
5. Kode
yang berwarna kuning adalah color/warna background dan tulisan menu dan sub
menu, jika
tidak di edit tidak apa-apa, tapi jika ingin disesuaikan dengan
tampilan blog kalian , ganti dengan
kode html lain (search di google kode warna
html) lalu copy > paste di kode yang
berwarn kuning
Langkah ke tiga (3)
Kita link-kan label yang
sudah kita tulis di kode dengan label postingan kita masing masing , langkah ini dilakukan
jika kalian belum membuat label pada setiap postingan . jika kalian sudah
membuat lable di setiap postingan usahakan tulisan , dan huruf besar kecilnya disamakan
dengan tulisan di kode html, simak cara berikut ini :
1. Berikan
lable kepada postingan caranya:
a.
edit artikel kalian
b.
klik label di bilah kanan atas
c.
dan tuliskan lable sesuai dengan label yang
kalian sudah letakan di code
d.
Save
label
e.
update/perbarui
postingan
f.
coba
review blog kalian apakah menu sudah ter-link ke postingan yang tadi kalian berikan label.
Jika bekerja dengan benar lanjutkan ke postingan berikutnya
g.
semoga
bermanfaat
cara di atas sama untuk sub menu
terima kasih salam blogger 😊
