OPINI

CARA MEMBUAT MENU TOMBOL DROP DOWN

LANGSUNG AJA BIAR NGK PAKE LAMA.
KITA BAHAS TUNTAS HEEE.
KOPI DAN PASTEKAN KODE SCRIPT DI BAWAH INI PADA GATGED HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
nav {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 0;
  margin: 0px auto; /*for display only*/
  width: 117px;
  -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
     -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
          box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
}
.menu-item {
  background: #111111;
  width: 117px;
}
/*Menu Header Styles 1*/
.menu-item  {
  color: #111111;
  font-size: 11px;
  font-weight: 118;
  padding: 0px 0px;
  background: #111111;
}
.menu-item  a {
  color: #111111;
  display: block;
  text-decoration: none;
  width: 117px;
}
/*Menu Header Styles 2*/
.menu-item  {
  border-bottom: 0px solid rgba(0,0,0,0.1);
  border-top: 0px solid rgba(200,200,200,0.1);
  color: #111111;
  font-size: 11px;
  font-weight: 117;
  padding: 0px 0px;
  background: #111111; /* Old browsers */
  background: -moz-linear-gradient(top, #111111 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111111), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #111111 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #111111 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #111111 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #111111 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item :hover {
  background: #111111; /* Old browsers */
  background: -moz-linear-gradient(top,  #111111 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111111), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #111111 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #111111 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #111111 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #111111 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
  font-size: 11px;
  padding: 0px 0px;
  color: #111111;
}
/*ul Styles*/
.menu-item ul {
  background: #111111;
  font-size: 11px;
  line-height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item ul a {
  margin-left: 0px;
  text-decoration: none;
  color: #111111;
  display: block;
  width: 117px;
}
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #111111;
}
.menu-item li:hover {
  background: #111111;
}
/*ul Styles*/
.menu-item ul {
  background: #111111;
  font-size: 11px;
  line-height: 0px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
/*ul Styles*/
.menu-item ul {
  background: #111111;
  font-size: 11px;
  line-height: 0px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
  height: 400px;
}
</style><br />
<div class="menu-item">
<img alt="BIMBINGAN IBADAH SHALAT" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13ZH8dZ-GWHKqlllAngr43VMoWv_PIEEUxaeSvU0wXwLvXhYHuMG30EA7VJ9HWMiAssiphF6tB2ARoI7pFJLNOH6dhfhhieq4JCVVXRiOrUqKEkB2SEYzZO3DalLjVQKJys5a1MSwgT5L/s1600/button+(51).png" height="26" title="BIMBINGAN IBADAH SHALAT" width="120" /><br />
<br />
<br />
<ul>
<li><br />
<a href="http://00000i.blogspot.com/2013/07/thoharoh.html"><img alt="BAB 1 TOHAHAROH" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8QXEq4uMFh8iI77xBlDMLmzQODL7POH3EThEt9oe5Xgc5SXw-n9q6Op-9YLp83zf8ZY8lopw5g4JoB5ixN8hRsLXQ_bVhQDtHdi9dWoIh5rA0SppMdR9PaY6kOrdE578lMWI7MNM_fiS/s1600/button+(1).png" height="22" title="BAB 1 TOHAHAROH" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/2013/07/najis.html"><img alt="BAB 2 NAJIS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXh-em3dowBDJeBuKnZyOiVMiChmeYF9OmIbrun_5Gh3z1GLMVYx-6VcHAOQFzZO9sFsHU173t-M4nJS9KfwMecuzRVd0Uh8TPQmFc1rbYTaLAokrNC_IN3K8U0zpMMHwdtuc1yO7N-447/s320/button+(2).png" height="22" title="BAB 2 NAJIS" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/2013/07/wudhu.html"><img alt="BAB 3 WUDHU" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaQGtuPAGXt3rMRMW4gpJXCIQe3KxmZrHKYuqaeYHJ0StoLSlk9PnjJWgKzom_sy3HSDRYqadlXerPqu5POHrHBmAgwYiMDWlU3fFVophTgrfUge-vYiQpIkP3BuQzhbgz3OfBQV3Id2rG/s1600/button+(3).png" height="22" title="BAB 3 WUDHU" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/2013/07/mandi-wajib.html"><img alt="BAB 4 MANDI WAJIB" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNvwJfOW1zQky9o1WtKPfzyfk3F6uJmi21xGVIwJbdxtwEOCxxEOdghvcg9zGUD0WS7OUTEshyphenhyphenFrMyUVYDHMakH2yohDuiJKaaGvcDe3L6M3bXJfI_kdbT1_l5CMSPlyrxfVi5HSdis1Ee/s1600/button+(4).png" height="22" title="BAB 4 MANDI WAJIB" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/search/label/BAB%20V"><img alt="BAB 5 SHALAT" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfS6-FQXJtBe_FEBOsCA9BbHQnOfUPa4dahJ2uYj7lYSH-02vVz4G2SPXf5V46MTpXvD3aHmnyUSdz4RFDbfLNFFXVFN6IECe0DqTqaouEZi9t7jiyRGrs3YoUsXoj_tU8Khd-j_HKi51x/s1600/button+(11).png" height="22" title="BAB 5 SHALAT" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/search/label/BAB%20VI%20DOA"><img alt="BAB 6 RANGKUMAN DOA" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRNGNxJsveYRMafbwVMAAamikKjH7vEX5Z0YLeW91O250ERkafKjUNRnN-OBIrV4bJMpKnWCJjNI7TkEBvt7FgDSgsFAVXNSBmB1na1CPbK04Kb7rxK3luMdSsqvvc6zpOWBAIuO0aDRBi/s1600/button+(5).png" height="22" title="BAB 6 RANGKUMAN DOA" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/2013/07/adab-pemberian-nama-yang-baik_12.html"><img alt="ADAB PEMBERIAN NAMA ANAK" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9kc5trC0aiGrNc9aymumUuTcSoUZCHhoMqsc5gHq5o5QSOoLFSGTtRlQOuvcDsMQEaZSL5GPIcgmmEWHPEcn-nwySANHPPHuSSXgHEBHezctRpSHyydmq8ld9bXn3ErwJq_ZtfgcaYaQe/s400/button+(6).png" height="22" title="ADAB PEMBERIAN NAMA ANAK" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/search/label/ARTIKEL%20UMUM."><img alt="ARTIKEL UMUM" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xRIG3TnbTuN2h-Rf3D2iT6rCiNr3I7zSjIzyLvZBA_ltf8bWFTNY73LP-H3wxYG_2vo24UEhfj5fyagQoC9KEGEn9B6LpoOSPAIaCmON5_bu5VPl4MToNSfP7a7uoGfdl6WPZmSDvcAF/s400/button+(7).png" height="22" title="ARTIKEL UMUM" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/search/label/BERANDA%20ILMU"><img alt="ARTIKEL BERANDA ILMU" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrAXJZNuUvsLUrZEmsZ835pFOYbq4-x2Jhma5zKS9thV9dIQKEHWXALMut1a3MgIJXHzub0Ok4NolyDbprAq-ruJ3ZLuoMPw37hVOq3FSZqLSeGjLK5P0IgF6iM-8c-Ul9v3jvkNK-y8VK/s400/button+(8).png" height="22" title="ARTIKEL BERANDA ILMU" width="120" /></a><br />
</li>
<li><br />
<a href="http://00000i.blogspot.com/search/label/PUISI%20-%20SYAIR%20-%20CERITA%20-%20CINTA"><img alt="PUISI SAYIR CERITA CINTA" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1sU4tBTLv68759fiLd5mMpKAR5Yl9FCBpAKm9a8Rso1LpC-UJtyxpuMZ_IwmzUwcUaCjBqBgpYduSa6outYDH7jLvLl9_oc_9KGQjbYWnBcUPT2-9ER9q6TzT7rp5a84RYFFTeSSUyPky/s400/button+(9).png" height="22" title="PUISI SAYIR CERITA CINTA" width="120" /></a><br />
</li>
<li><br />
<a href="http://rsjoi.blogspot.com/2014/10/alutista-mesin-pembunuh.html"><img alt="GAMBAR KENDARAAN PERANG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVKok-cPoMr_y52FN6C5P8GEHvqBqYPtYS0XG5528Z9HC0I_E9VTGcRPzEyZe0ijNcCXtStkL_-wMustK_dJGk65EsKk2LN98m2P85Xb4_WseglLuOU99ArcsgdjlEqOk6ypwrCln3Pmq/s400/button+(10).png" height="22" title="GAMBAR KENDARAAN PERANG" width="120" /></a><br />
</li>
</ul>
</div>
</div>

KODE SCRIPT DIATAS TELAH DIMODIFIKASI. UNTUK MEMPERMUDAH SOBAT.
UNTUK ITU SAYA TELAH MEMBERI CONTOH TOMBOL BOTTON MENU. DAN DAFTAR ISI.
SEBAGAI PANDUAN.

UNTUK MENAMBAHKAN SILAHKAN SOBAT TAMBAHKAN SENDIRI.
PADA MENU DAFTAR ISI
SOBAT HANYA DAPAT MENAMBAH 11 TOMBOL LINK BERGAMBAR.
UNTUK DAPAT LEBIH SILAHKAN GANTI [ height: 400px; ]
DENGAN KEBUTUHAN SOBAT.

TAPI PERLU DIINGAT PENYESUAI'AN UKURAN AKAN BERPENGARUH PADA MENU. SEHINGGA JIKA KODE SCRIPT DIGUNAKAN UNTUK BEBERAPA TAMPILAN MENU AKAN MENGHASILKAN UKURAN YANG SAMA PADA GATGED.

SEKARANG TINGGGAL BAGAIMANA CARA MENDAPATKAN TOMBOL BOTTON GRATIS YANG BAGUS. HEEE
CONTOH GAMBAR : TRIK TIP BLOG

UNTUK MENDAPATKANNYA SECARA GERATIS
MASUK PADA ALAMAT LINK : http://dabuttonfactory.com
SETELAH MASUK PADA MENU
SAYA SARANKAN UNTUK KLIK DULU TULISAN [ Examples ]
PADA BUTTON MENU ATAS.
KARNA DI BAGIAN ITU KITA DAPAT MENENTUKAN POLA YANG BERAGAM.

KEMUDIAN TENTUKAN BESAR UKURAN TEXT.
POLA WARNA PADA GAMBAR. ATAU MEMILIH UNTUK MEMAKAI GAMBAR SENDIRI UNTUK LATAR TOMBOL BOTTON.

DICOBA-COBA AJA SOB.
SAMPAI KAMU MENDAPAT HASIL YANG PUAS HEE.

YANG PERLU DIINGAT SETELAH MENDAPAT POLA BUTTON YANG KAMU INGINKAN. SETIAP KALI MEMBERI TEXT PADA BUTTON.
KLIK DOWNLOAD ATAU KOPI DAN PASTEKAN PADA NOTE.
DAN JANGAN UBAH POLA BUTTON KARNA AKAN BERPENGARUH KESERAGAMAN UKURAN PADA MENU BUTTON. NANTINYA.

SEMOGA MANFA'AT.. BANG -Oi

OPINI

CARA MUDAH BUAT MENU TOMBOL DROP DOWN TANPA EDITE TEMPLATE

No comments:

Labels