Membuat Menu CSS Seo Horizontal Drop down di Blog

Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog
Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan Kang Roni jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo?

Alasan kang roni memberi nama CSS Seo karena menu Horizontal Drop down ini sangat ringan dan salah satu tehnik Optimasi seo blog adalah membuat blog seringan mungkin,selain ringan juga sangat simpel dan mudah akan tetapi sangat bagus untuk mempercantik blog karena anda bisa merubah warna Menu CSS Seo Horizontal Drop down sesuai dengan blog yang anda punya .

Tehnik Membuat Menu CSS Seo Horizontal Drop down

1.LOG IN Blogger.com > Masuk ke Template > Klik Edit HTML.
2.Cari kode ]]></b:skin> kemudian taruh kode css dibawah ini tepat di atas kode ]]></b:skin> tadi.

/*Page menu*/
#foxmenucontainer{
    height:35px;
    display:block;
    padding:40px 0 0px 0px;
    font: 11px Tahoma,Century gothic,verdana, Arial, sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    overflow:hidden;
    width:530px;
    margin:0px 0px 0px 0px;
    float:right;
    }
#menu{
    margin: 0px;
    padding: 0px 10px;
    width:680px;
    height:35px;
    }
  
#menu ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#menu li {
    float:left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#menu li a, #menu li a:link, #menu li a:visited {
    color: #578cbf;
    display: block;
    margin: 0px;
    padding: 12px 10px 11px 10px;
    }

#menu li a:hover, #menu li a:active, #menu li.current_page_item a{
    color: #fff;
    margin: 0px;
    padding: 12px 10px 11px 10px;
    text-decoration: none;
    }

/* Category menu*/
#catmenucontainer{
    height:32px;
    background:#3017170;
    display:block;
    padding:0px 0 0px 0px;
    font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    overflow:hidden;
    border-left:1px solid #6cb80c;
    border-right:1px solid #6cb80c;
}
      
#catmenu{
    margin: 0px;
    padding: 0px 1px;
    width:998px;
    background:#0055EA;
    height:32px;
    }
  
#catmenu ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#catmenu li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
    color: #bfe195;
    display: block;
    margin: 0px;
    padding: 10px 10px 10px 10px;
    }

#catmenu li a:hover, #catmenu li a:active {
    background:#D90808;
    color: #fff;
    margin: 0px;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    }
  
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
    background:#567DB0 ;
    width: 150px;
    color: #bfe195;
    font-family:Tahoma,century gothic,Georgia,  sans-serif;
    font-weight: normal;
    float: none;
    margin: 0px;
    padding: 9px 10px 9px 10px;
    border-bottom: 1px solid #5E9F09;
    }
  
#catmenu li li a:hover, #catmenu li li a:active {
    background:#FC8C3D;
    color: #fff;
    padding: 9px 10px 9px 10px;
    }

#catmenu li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px;
    }

#catmenu li li {
    }

#catmenu li ul a {
    width: 140px;
    }

#catmenu li ul a:hover, #catmenu li ul a:active {
    }

#catmenu li ul ul {
    margin: -31px 0 0 170px;
    }

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
    left: -999em;
    }

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
    left: auto;
    }

#catmenu li:hover, #catmenu li.sfhover {
    position: static;
    }
Ket: 
-Untuk mencari kode supaya lebih cepat silahkan anda klik didalam kolom edit template kemudian tekan tombol keyboard Ctrl+F kemudian taruh kode yang akan dicari kedalam kolom pencarian yang ada di pojok kanan atas kolom template dan enter.
-Untuk kode yang diberi background dengan warna yang berbeda di atas adalah kode warna yang bisa anda ubah.

3.Selanjutnya cari kode  <div id='content-wrapper'>  kemudian taruh kode dibawah ini tepat di atas kode tadi.

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>

<li><a href='#'>Featured</a></li>

<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>

<li><a href='#'>Uncategorized</a></li>
      
</ul>
</div>
</div>
Ket:
-Untuk tanda # (pagar) silahkan ganti dengan link halaman tujuan anda.
-Untuk kalimat yang ditulis dengan warna merah silahkan diganti dengan kalimat yang sesuai tema blog anda.
-Selanjutnya simpan untuk melihat Menu CSS Seo Horizontal Drop down di Blog anda.

Related Post:

22 comments:

Jona Rendra said...

owh ini yang seo ya?
saya coba terapkan ke blog saya ya

Iqra mullah said...

Mas bagaimana untuk membuat menu drop down,,, saya masih kurang mengerti tentang menu drop down,, tolong pencerahan nya,,,,

Kangroniblog said...

sobat tinggal LOG IN Blogger.com > Masuk ke Template > Klik Edit HTML disitu nanti akan tampak semua kode template blogger setelah itu sobat bisa menerapkan langkah kedua di atas.

Selanjutnya sobat bisa mengcopy kode pada langkah ke-3 diatas yg panjang itu lho...terus buka Tata letak scroll kebawah pilih HTMLJavaScript kemudian paste kode tadi kedalam kolom...jgn lupa pada mode html

SEO Killer said...

Artikel yang sangat bermanfaat, ..mantap, Eitss jngn lupa daftar di sini ya AutoTraffic Exchange dan SEO Killer

Saud Karrysta said...

Artikel yang bagus dan super SEO. Sangat berguna sekali buat saya salam Mas Roni terima kasih atas Ilmu dan penemuan nya..
visit : http://karristaent.blogspot.com

PutraPande Cloud said...

gan lq ]]> ga ketemu gmna?

PutraPande Cloud said...

Mampir Gan

Agung Krisna Wijaya said...

wah... bagus bgt gan... lihat di blog saya...
http://bloggisaya.blogspot.com/

Kangroniblog said...

utk mencari kodenya sobat klik dikolom edit template kemudian tekan tombol ctrl+F scr bersamaan kemudian akan keluar kolom pencarian,trus sobat masukin aja kode yg akan dicari lalu enter.

Paling Asik said...

langsung di coba bro, terima kasih banyak

Jafar Sidiq said...

terimakasih bang, atas info/ilmu nya,
bermanfaat banget bagi saya.

luangkan juga waktu nya untuk mampir di : http://kutempel.blogspot.com

FRILYA NAFTHALIN said...

susah mw cari ]]> sampai lebaran monyet gk akan ketemu!!

cara mengencangkan payudara said...

terimakasih, nice post. sangat bermanfaat sekali, gan. keren..

Trik Mudah Desain SEO panduan terpadu blogs said...

ijin coba sob , menunya untu di blog saya...

Toni said...

hasilnya nanti seperti apa ya ? bisa kasih tahu demonya tidak ?
trims

pelangsing ampuh said...

wah artikelnya sangat bagus sekali gan sangat menarik sukses slalu

rika kustia said...

- Alat Bantu Sex
- Alat Bantu Sex Pria
- Alat Bantu Sex Wanita
- Obat Pembesar Penis
- Obat Perangsang Wanita

manfaat tomat said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali lagi thanks.

Penyebab Payudara Kendur dan Cara Mengatasinya said...

teirma kasih banyak karena sudah berbagi berita yang sangat menarik. zaman sekarang sudah jarang menemukan blog yang isinya penuh manfaat seperti ini, keren!!

obat tahan lama tradisional said...

terima kasih atas informasinya. Sukses ya..!! Dan Terimakasih banyak telah berbagi informasnya, Semoga Makin Keren selalu untuk info beserta websitenya,,

perawatan payudara said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali lagi thanks.

DIET KOLESTEROL TINGGI said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali lagi thanks.

Post a Comment