Menu Dropdown dengan Background

Menu Dropdown dengan Background - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Menu Dropdown dengan Background, saya telah menyediakan Tutorial Blog lengkap seperti Menu Dropdown dengan Background . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.

Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :

• Login ke blogger Anda, klik menu Design > Edit HTML.
• Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
• Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
  <script>
  var last_expanded = &#39;&#39;;
  function showHide(id)
  {
  var obj = document.getElementById(id);
  var status = obj.className;
  if (status == &#39;hide&#39;) {
  if (last_expanded != &#39;&#39;) {
  var last_obj = document.getElementById(last_expanded);
  last_obj.className = &#39;hide&#39;;
  }
  obj.className = &#39;show&#39;;
  last_expanded = id;
  } else {
  obj.className = &#39;hide&#39;;
  }
  }
  </script>
• Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
  .dropdown-b {
  background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
  text-align:center;
  width:165px;
  font-family: georgia, Helvetica, sans-serif;
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom: 10px;
  margin-top: 4px;
  display:block;
  text-decoration: none;
  color: #000000;
  height: 8px;
  }
  .dropdown-bg {
  background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
  text-align:center;
  width:165px;
  font-family: georgia, Helvetica, sans-serif;
  padding-left:20px;
  padding-right:20px;
  padding-top:13px;
  padding-bottom: 10px;
  display:block;
  text-decoration: none;
  color: #000000;
  height: 8px;
  }
  .hide{
  display: none;
  }
  .show{
  display: block;
  }
  a{cursor: hand}
• Lalu klik Save Template.
• Kemudian klik menu Design > Page Element > Add a Gadget.
• Pilih HTML/Javascript, lalu masukkan kode berikut ini :
  <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
  <div id="dropdown-b-1" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div>
  <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
  <div id="dropdown-b-2" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
  <div id="dropdown-b-3" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
  <div id="dropdown-b-4" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
   <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div>
• Terakhir klik tombol Save. Selesai...

Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Demikianlah Artikel Menu Dropdown dengan Background

Sekian Tutorial dari Blogrenanda Menu Dropdown dengan Background, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

Menu Dropdown dengan Background

Anda sedang membaca artikel Menu Dropdown dengan Background dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2012/02/menu-dropdown-dengan-background.html Semoga artikel ini bisa bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: