Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang - Sahabatku pembaca Setia Blakkotang, Saat ini anda sedang membaca pembahasan tentang Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang , saya hanya seorang newbie yang berbagi, dan mudah mudahan artikel ini bisa membantu sahabat semua dan tentunya anda bisa memahami dan menerapkanya ,bila ada kekurangan atau kesalahan harap di maklumi dan di beri saran ya... .

Judul : Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang
Membahas artikel tentang : Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang

Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang

Artikel Tutorial Blogspot,

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.

Begitulah Pembahasan tentang artikel ini Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang

Mungkin itu saja yang bisa saya jelaskan Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang , Dan semoga artikel ini bisa sedikit membantu untuk para sahabat blakkotang .

Sahabat sedang membaca pembahasan tentang Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang Pembahasan ini url permalinknya adalah http://blakkotang.blogspot.com/2012/02/tips-dan-trik-menu-dropdown-dengan.html Dan semoga pembahasan Mengenai Tips Dan Trik Menu Dropdown dengan Background- Blak Kotang , Bisa Membantu Dan semoga juga artikel ini bisa bermanfaat, dan bila arikel ini menurut sahabat blakkotang bermanfaat silahkan di bagikan kepada teman atau sahabat-sahabat lainya, terimakasih ,

ARTIKEL BERIKUTNYA :

.

Tweet