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>

<li><a href='#'/search/label/ABOUT>ABOUT</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Langkah ke dua (2)

1. Login ke akun blog

2. Pilih menu Tema

3. Pilih Edit HTML

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 😊

ADS New Step

Saturday, April 28, 2018

Cara Membuat menu dan sub menu “home, About, dan seterusnya” pada tema blog

No comments: