Cara Membuat Dropdown Menu Blog

Menu pada media online website, blog, dan lain-lain merupakan satu dari sekian sarana yang dipergunakan untuk menggambarkan kepada pengunjung tentang eksistensi dari website, blog yang memasang menu tersebut.

Dalam dunia webisite/blog bentuk menu yang banyak dipergunakan oleh pengelola media online adalah Menu Horizontal dan Dropdown menu.

Kedua macam menu ini mempunyai fungsi yang sama yaitu tempat menulis dan membuat teks url (link) untuk menampilkan halaman posting sesuai teks yang ditetapkan tersebut. Perbedaan kedua menu ini yaitu Dropdown Menu walaupun letak Tab untuk membuat teks Urlnya horizontal (sejajar) tetapi dapat menjorok (menurun) ke bawah bila disorot dengan pointer mouse sedangkan Menu Horizonntal sebaliknya (tidak dapat menjorok kebawah).

Bentuk dropdown menu yang dimaksud dapat memperhatikan gambar di bawah ini

Cara membuat Dropdown menu blog/website dapat dilakukan dengan langkah-langkah sebagai berikut, yaitu

1. Sign in di blog
2. Klick Rancangan
3. Klick Edit HTML
4. Download Template lengkap untuk mengamankan template.
5. Cari kode: ]]></b:skin>
6. Copy dibawah ini lalu tempatkan di atas kode ]]></b:skin> Ini kode yang di copy:

.menu{
      border:none;
      border:0px;
      margin:0px;
      padding:0px;
      font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
      font-size:14px;
      font-weight:bold;
      }
  .menu ul{
      background:#333333;
      height:10px;
      list-style:none;
      margin:0;
      padding:0;
      }      
  .menu li{
          float:left;
          padding:0px;
          }
      .menu li a{
          background:#333333;
          color:#cccccc;
          display:block;
          font-weight:normal;
          line-height:2px;
          margin:0px;
          padding:0px 1px;
          text-align:center;
          text-decoration:none;
          }
          .menu li a:hover, .menu ul li:hover a{
              background: #2580a2;
              color:#FFFFFF;
              text-decoration:none;
              }
      .menu li ul{
          background:#333333;
          display:none;
          height:auto;
          padding:0px;
          margin:0px;
          border:0px;
          position:absolute;
          width:130px;
          z-index:248;
          /*top:0.8em;
          /*left:0;*/
          }      
.menu li:hover ul{
          display:block;
                  }
      .menu li li {
          background:#07131B;
          display:block;
          float:none;
          margin:0px;
          padding:0px;
          width:130px;
          }
      .menu li:hover li a{
          background:none;
          }
      .menu li ul a{
          display:block;
          height:10px;
          font-size:12px;
          font-style:normal;
          margin:0px;
          padding:0px 1px 0px 1px;
          text-align:left;
          }
          .menu li ul a:hover, .menu li ul li:hover a{
              background:#07131B;
              border:0px;
              color:#ffffff;
              text-decoration:none;
              }
      .menu p{ clear:left; }

7. Klick Simpan Template untuk menyimpan perubahan

Setelah melakukan 7 (tujuh) langkah di atas bukan berarti dropdown menunya sudah jadi. Untuk menfinalkan membuatnya ikuti langkah-langkah berikut ini.

1. Klick Add gadget/tambah gadget
2. Pilih HTML/JavaScript.
3.Tulis kode Url Link seperti berikut ini

4. Paste pada gadget HTML/Javascript
5. Ganti newsternet.blogspot.com dengan url serta judul posting anda
6. Klick Simpan untuk menyimpan
7. Klick Lihat untuk melihat hasilnya Sedangkan apabila masih ingin menambah lagi menu url link dropdown lagi dapat membuatnya seperti contoh penulisan di bawah ini:

<li><a href="http://newsternet.blogspot.com/2011/11/nama-nama-kecamatan-di-kabupaten-bima.html">BIMA</a>
<ul>
<li><a href="http://newsternet.blogspot.com">PEMILU KADA</a></li>
<li><a href="http://newsternet.blogspot.com">KECAMATAN</a></li>
<li><a href="http://newsternet.blogspot.com/2011/11/kecamatan-langgudu-kabupaten-bima-nusa.html">PESISIR</a></li>
</ul>
</li>

Keterangan: Ganti newsternet.blogspot.com dengan url judul posting serta teks link sesuai kebutuhan anda

0 komentar:

Pemberitahuan

News Internet tidak menerima dan bersedia menampilkan komentar url media online intenet penayang khusus promosi atau iklan kecuali ada perjanjian kerjasama mengikat. Terima kasih atas perhatiannya dan semoga dapat dimaklumi.

Posting Komentar

Terima kasih atas kunjungan anda. Silahkan berikan komentar tentang artikel ini. Akan tetapi perlu dimaklumi bahwa Komentar yang tergolong iseng tidak akan ditampilkan. Untuk mendapatkan jawaban langsung pada kotak masuk Email anda, klick teks Subscribe by Email. Atas atensi dan partisipasinya terima kasih.