cara membuat WIDGET MENU drop down di blog

bagaimana sih cara membuat menu blog, mungkin pertanyaan berikut sering dilontarkan oleh para pegiat blogger yang aktif di dunia sosial. seperti grup facebook.

mengapa menu diperlukan??

jika anda memiliki pertanyaa seperti itu berarti anda masih belum sepenuhnya faham dalam pembuatan blog. dan jangan sampai anda beranggapan bahwa menu itu tidak penting

menu memiliki kegunaan untuk menyampaikan kepada para pembaca tentang blog kita secara garis besar .  misalkan saya membuka sebuah blog , kemudian di menu blog tersebut tercantum tentang tutorialpembuatan blog atau yang lainnya . dan saat itu sangat pas pasan dengan sesuatu yang orang  cari secara garis besar.. dan otomatis anda akan mengacak acak blog tersebut bukan.???

 acak acak disini berarti menyedot semua ilmu yang ada di blog tersebut, bukan menjadi seorang spammer.

dan jika hal itu terjadi secara otomatis traffic blog anda meningkat tajam dengan adanya link terkait yang ditanam di setiap posting.

anda masih bertanya  mengapa menu diperlukan ???

kalau anda sudah paham mari kita lanjut.

PEMBAGIAN MENU BLOG

1. MENU BUATAN SENDIRI

  buat sendiri emang bisa ????

   bisa dong, tpi jika anda belum tahu caranya  anda dapat menyimak nya di bawah ini.

cara membuat menu sendiri memang susah susah mudah .

langkah yang harus anda lakukan :

1.  pastikan anda sebelum membuat menu sudah memiliki blok ya gan. lalu buka blogger.com.

2. di bagian dash board blog pilih tata letak

3. lalu tambahkan atau edit widgede dan pilih html

4. masukan kode script di bawah ini

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#17d80d;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 #17d80d;}
#cat-nav a:hover { color:#111111; }
#cat-nav li:hover { background:#e0ff1c; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#111111; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#111111; }
#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:15px; display:block; z-index:100; padding:0 20px; line-height:40px; 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 #111111; }
#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='http://ift.tt/2soE18Q'>Beranda</a></li>
<li><a href='http://ift.tt/2soE18Q'>tips ngeblog</a>
<ul id='sub-custom-nav'>
<li><a href='http://ift.tt/2soE18Q/search/label/blog%20tips'>sub menu a 1</a></li>
<li><a href='http://ift.tt/2soE18Q'>sub menu a 1</a></li>
</ul>
</li>
<li><a href='http://ift.tt/2soE18Q'>game info</a>
<ul id='sub-custom-nav'>
<li><a href='http://ift.tt/2soE18Q'>tips game</a></li>
<li><a href='http://ift.tt/2soE18Q'>sub menu 2b</a></li>
</ul>
</li>
<li><a href='http://ift.tt/2soE18Q'>seputar android</a>
<ul id='sub-custom-nav'>
<li><a href='http://ift.tt/2soE18Q'>Sub Menu3a</a></li>
<li><a href='http://ift.tt/2soE18Q'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='http://ift.tt/2soE18Q'>seputar pc</a>
<ul id='sub-custom-nav'>
<li><a href='http://ift.tt/2soE18Q'>Sub Menu4a</a></li>
<li><a href='http://ift.tt/2soE18Q'>Sub Menu4b </a></li>
</ul>
</li></ul></div>

5. Cara pengubahan menu

1. html diats terdiri dari menu dan sub menu . masing masing menu memiliki 2 sub menu .

jika anda ingin menambahkan sub menu tinngal copy  scrift ini .<li><a href='http://ift.tt/2soE18Q'>Sub Menu4b </a></li>.  lalu taruhsbelum kata </ul> pada menu yang anda pilih . 

2.ganti  semua tulisan berwarna merah dgn  link WEBSITE ATAU BLOG anda

3. ganti tulisan hijau dengan nama menu yang akan anda tampilkan.

4. ganti tulisan kuning dgn sub menu yang akan anda perlihatkan

5. agar menu yang andabuat bisa di klik lalu terhubung ke link yang anda miliki . anda harus menambah link search label pada sub menu anda .

contoh menu ke 1. sub menu 1.

nama label bertuliskan seperti ini . contoh : tips blog berarti menjadi tips%20blog

jika anda memiliki pertanyaan seputar kesulitan dalam memasang script menu ini cantumkan di komentar.

ATAU JIKA ANDA INGIN lebih tahu secara mendalam cara mengedit menu ini

from GUARDIAN http://ift.tt/2tGRTQ0

Tweet

Subscribe to receive free email updates: