Cara Membuat Sub-Menu Pada Blogger 2015
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'>
<div id='main-wrapper'>
<div id='main'>
<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 .......... /* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
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
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.