Cara Membuat Sub-Menu Pada Blogger 2015

3/29/2015 04:38:00 AM , , 0 Comments


Siapa sih Yang nggak tau Sub Menu?,Widget ini merupakan widget paling utama di blogger sobat,tentunya untuk pengunjung agar mudah melihat isi blog anda melalui menu ini.
 
Untuk membuatnya , saya ada beberapa cara ;

CARA 1 :

Melalui HTML
 1. Masuk ke Dassboard Blogger yang akan kamu beri sub menu
2. Pergi ke Template -> Edit HTML 
3. Cari Kode  : (agar lebih mudah mencarinya , tekan F3 atau Ctrl+f)
 <div class='main-outer'>

atau

<div id='main-wrapper'>

atau


<div id='main'>
Tapi yang paling umum adalah :
div class='main-outer'>

4. Setelah itu copy code di bawah ini tepat di ata Kode tadi (div class='main-outer'>)


<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='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>


 5. Klik Save

PENJELASAN SUB MENU :

1.  CARA MEMASUKAN URL :
Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda

2. CARA MEMBERI NAMA MENU ATAU SUB MENU
Ganti Tulisan warna biru dengan nama menu dan nama sub menu yang anda inginkan.

3. Cara MENGATUR LEBAR SUB MENU
  #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}---> baris ke-3. Kemudian tambahkan kode (width:900px) di antara { dan }, sehingga menjadi :
#cat-nav {background:#156994;width:900px;margin:015px;padding:0;height:35px;}
Angka 900px hanya sebagai contoh saja, silakan rubah angka 900  dengan ukuran lebar yang kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%
4. CARA MENGATUR TINGGI SUB MENU
silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang kamu mau.  

5. CARA MERUBAH WARNA SUB MENU
Perhatikan kode berikut :


<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 .......... 


 Tulisan yang berwarna hijau adalah kode untuk warna , untuk mencari warna lainnya , klik disini untuk mencari kode warna



CARA 2 :
Melalui tata letak

1. Masuk ke Dassboard Blogger
2. Klik tata letak -> Add gagdet/widget -> Html/jafastrip
3. Copy kan kode di atas tadi yang berwarna merah
4. lalu klik save , untuk merubahnya ikuti penjelasan tadi
5. Lihat hasilnya

viandwi

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 komentar:

1. Jangan lakukan Spamming
2. Saya Tidak Menerima komentar "Anonim"
3. jika Ingin Berkomentar tanpa Akun Silahkan Tekan Tombol Di Samping "Beri Komentar Sebagai :" Lalu pilih Name/URL , isi nama mu , url Tidak Diisi Juga Tidak Apa-apa lalu klik Publish.
4. Berkomentar yang Sopan
5. jangan promosi Di Komentar , Menyantumkan link Web kalian Di perbolehkan

===========Atas Perhatiannya Thanks==========
Jika ingin menambahkan Gambar,Video atau lainya silahkan copy url gambar/video mu lalu pastekan ke Conversi Html di bawah ini.