Cara Membuat Menu Drop Down Yang SEO Terbaru ~ Wahana Informasi

Wednesday, November 13, 2013

Hay sobat blogger semuanya yang masih berada di wahana informasi ini, pada kesempatan pagi hari yang cerah, sunyi, dan dingin ini saya akan membagikan tentang tips blog, bagi sobat bloging yang ingin tampilan menunya menjadi bagus subat dapat membaca artikel ini dengan seksama dan lakukan perintahnya maka menu blog sobat akan menjadi bagus, di sini saya share yang sederhana dan dengan efec yang sederhana pula, karena kalau lebih modern akan menurunkan presentasi SEO blog, apalagi kalau menunya bagus dan artikelnya tidak seperti master blog, maka blog sobat tidak akan menjadi seo, menu drop dows yang saya beri ini sudah full seo juga, nah jika sobat ingin memodifikasi script yang saya buat juga tidak masalah, dan jika sobat tidak tahu apa yang harus di-edit maka sobat bisa mengirim pesan ke e-mail saya (yopisaputra373@gmail.com) saya usahakan akan merespon secepatnya, yang penting jangan sobat hack ya! Nah bagi sobat yang pemula maupun sudah lama bloging dan ingin memodifikasi menu blognya silahkan saya ikuti langkah-langkah yang saya berikan ini, simak baik-baik agar hasil maksimal

Cara membuat menu drop down seo

Login Blogger
Buka Dasboard blog sobat
Pilih menu Template di samping kiri lalu klik Edit HTML
Cari (Ctrl + F) code ]]></b:skin> lalu copy-paste code html di bawah ini di atas kode ]]></b:skin>, dan jika sudah paste, save template sobat

        #MenuSEO {
            background: #F9F9F9;
            width: 100%;
            height: 35px;
            font-size: 15px;
            font-family: 'Share', Arial;
            color: #000000;
            font-weight: bold;
            margin-bottom: 0px;
            padding: 0px;

        }
        #BoxSEO {
            width: 100%;

            float: left;
            margin: auto;
            padding: 0;
            box-shadow: 0px 0px 4px 0px #383737;
        }

        #punch {
            margin-left: 133px;
            padding: 0;
        }
        #punch ul {
            float: left;
            list-style: none;
            padding: 0;
        }
        #punch li {
            list-style: none;
            text-align: center;
            margin: 0;
            float: center;
        }
        #punch li a, #punch li a:link, #punch li a:visited {
            color: #004661;
            display: block;
            font-size: 16px;
            font-family: Arial;
            font-weight: normal;
            text-transform: normal;
            border-right:1px solid #b7b7b7;
            border-left:1px solid #b7b7b7;
            margin: 0;
            padding: 9px 15px 8px;
        }
        #punch li a:hover, #punch li a:active {
            background: #004661;
            color: #66bbdd;
            margin: 0;
            padding: 9px 15px 8px;
            text-decoration: none;
        }
        #punch li li a, #punch li li a:link, #punch li li a:visited {
            background: #00B7FF;
            width: 150px;
            color: #004661;
            font-size: 14px;
            font-family: Arial;
            font-weight: normal;
            text-transform: normal;
            float: none;
            margin: 0;
            padding: 7px 10px;
            border-bottom: 1px solid #FFF;
            border-left: 1px solid #FFF;
            border-right: 1px solid #FFF;
        }
        #punch li li a:hover, #punch li li a:active {
            background: #004661;
            color: #66bbdd;
            padding: 7px 10px;
        }
        #punch li {
            float: left;
            padding: 0;
        }
        #punch li ul {
            z-index: 9999;
            position: absolute;
            left: -999em;
            height: auto;
            width: 170px;
            margin: 0;
            padding: 0;
        }
        #punch li ul a {
            width: 140px;
        }
        #punch li ul ul {
            margin: -32px 0 0 171px;
        }
        #punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
            left: -999em;
        }
        #punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
            left: auto;
        }
        #punch li:hover, #punch li.sfhover {
            position: static;
        }

Cara untuk memasang menu drop down

Buka Dasboard blog sobat
Pilih menu Layout lalu add widget dimana saja terserah sobat
Akan mucul kotak baru lalu sobat klik tombol + di bagian javascript/HTML
Lalu masukkan code dibawah ini (jangan di beri judul)

    
<div id='MenuSEO'>
       <div id='BoxSEO'>
      <ul id='punch'>
        <li><a href='URL'>Nama</a></li>
        <li>
          <a href='URL'>Nama</a>
          <ul>
            <li>
              <a href='URL'>Nama</a>
              <ul>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
              </ul>
            </li>
            <li>
              <a href='URL'>Game</a>
              <ul>
                <li><a href='URL'>Nama</a></li>
                <li><a href='URL'>Nama</a></li>
              </ul>
            </li>
            <li><a href='URL'>Nama</a></li>
            <li><a href='URL'>Nama</a></li>
          </ul>
        </li>
        <li>
          <a href='URL'>Nama</a>
          <ul>
            <li><a href='URL'>Nama</a></li>
            <li><a href='URL'>Nama</a></li>
          </ul>
        </li>
        <li><a href='URL'>Nama</a></li>
        <li>
          <a href='URL'>Nama</a>
          <ul>
            <li><a href='URL'>Nama</a></li>
            <li><a href='URL'>Nama</a></li>
            <li><a href='URL'>Nama</a></li>
            <li><a href='URL'>Nama</a></li>
            <li><a href='URL'>Nama</a></li>
          </ul>
        </li>
        <li><a href='URL'>Nama</a></li>
        <li><a href='URL'>Nama</a></li>
        <li><a href='URL'>Nama</a></li>
        <li><a href='URL'>Nama</a></li>
      </ul>
    </div>
</div>
Setelah itu save dan pindah widget yang sudah kita buat tadi ke bawah header atau keatasnya terserah sobat aja
Selesai, ganti URL dengan url jutuan jika menu di klik dan ganti Nama untuk menamakan menu

Sekian dulu yang saya dapat sampaikan tentang tips blog ini, semoga dapat bermanfaat dan jangan lupa berkomentar
Terima Kasih Telam Membaca Artikel Saya