Cara Membuat Menu Dropdown Di Atas Header / Judul Blog

Pada beberapa templates blogger, terkadang, tidak dilengkapi menu navigasi. Padahal fitur menu tersebut, termasuk salah satu upaya SEO pada blog. Untuk itu, kita dapat memodifikasi template dengan memasang menu dropdown. Melalui editing sederhana pada HTML.

Berikut, salah satu langkah sederhana Cara Menambah Satu Kolom Widget Navigasi Menu di atas Header atau Judul Blog.

• Login akun blogger anda
• Klik menu template, edit html
• Paste kan code di bawah tepat di atas ]]></b:skin>

/*The top Menu*/ #top{ margin:auto; padding: 0; width: 100%; background:#000000; border-bottom:1px solid #373127; } #top-wrap{ margin:auto; padding: 0; width: 960px; background:#000000; } #navwrap {margin: 0px auto; width:560px; float:left;background:#080705;} .topnav ul {list-style:none;margin:0;padding:0px; float:left;} .topnav li {float:left;margin:0;text-align:center;} .topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;} .topnav li a {background:none; } .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;} /*The top Menu*/ #med{ margin:auto; padding: 0; width: 100%; background:#000000; } #med-wrap{ margin:auto; padding: 0; width: 960px; } .mednav ul {list-style:none;margin:0;padding:0px; float:left;} .mednav li {float:left;margin:0;text-align:center;} .mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;} .mednav li a {background:none; } .mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;} #navbar-iframe { display: none !important; }

• Kemudian paste kan code di bawah ini tepat di bawah <div id='main-wrapper'>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://redaksiexpo2012.blogspot.com/p/contact-us.html'>Contact</a></li>
<li><a href='http://redaksiexpo2012.blogspot.com/p/site-map.html'>Sitemap</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

• ganti tulisan yang berwarna merah dengan url tujuan anda
• ganti tulisan yang berwarna biru dengan judul anda

• Klik simpan template , dan selesai ..

  Demikian Cara Membuat Menu Dropdown Di Atas Header/Judul Blog. Jika anda berminat memasang menu drop down keren diblog dapat click disini, semoga bermanfaat.

Share :