Langsung ke konten utama

Menu Dropdown dengan Background

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.

Komentar

Postingan populer dari blog ini

ILMU TEKNIK : Jenis Kikir, Bagian Kikir beserta Cara Pemegangan dan Posisi Pengikiran yang Benar

Nama Bagian dan Bentuk Kikir Mengikir adalah salah satu dari banyak macam kerja bangku yang penting dan juga sulit untuk mencapai hasil yang tepat. Pada umumnya untuk pekerjaan-pekerjaan yang sederhana mengikir akan lebih ekonomis, baik biaya maupun waktunya, dibandingkan dengan menggunakan mesin-mesin modern. Kikir terbuat dari baja karbon tinggi yang ditempa, dan dibedakan menurut panjang, bentuk penampang, jenis dan kekasaran gigi pemotongnya Bentuk penampang kikir yang sering digunakan pada pekerjaan logam adalah bentuk rata, segi empat, segi tiga, bulat, setengah bulat, bujur sangkar, dan ellip. Jenis Gigi Kikir Kikir dapat diklasifikasikan menjadi dua jenis berdasarkan pada jenis gigi pemotongnya, yaitu kikir bergigi tunggal dan kikir bergigi kembar/dua. Kikir dengan gigi potong tunggal digunakan untuk pemotongan benda kerja secara halus. Artinya pemotongan tidak dapat dilaksanakan secara tepat, tetapi hasil pengikiran pada permukaan benda kerja menjadi lebih halus. Kikir bergigi...

ILMU TURBIN : Pengertian dan Komponen Turbin Gas

Pengertian dan Komponen Turbin Gas Turbin gas merupakan sebuah mesin atau alat pembangkit yang memanfaatkan ekspansi gas berkecepatan tinggi yang akan mendorong sudu-sudu sehingga menghasilkan gerakan putar pada rotornya. Putaran pada rotor ini lah yang nantiya digunakan untuk menggerakkan generator listrik. Media kerja yang digunakan oleh turbin gas yaitu udara atmosfir. Udara atmosfir ini akan dihisap oleh kompressor dan akan dimampatkan hingga mendapatkan tekanan tertentu. Pada umumnya tekanan akhir pada sudu kompresor mencapai 30 kali dari tekanan inlet kompresor. Selanjutnya udara bertekanan ini akan masuk difuser untuk ditingkatkan kembali tekanannya.  Udara bertekanan dari kompresor akan diteruskan masuk ke area pembakaran atau combustion chamber, pada bagian ini bahan bakar akan diinjeksikan sehingga memicu terjadinya pembakaran bahan bakar. Pembakaran ini mengakibatkan ekspansi di udara sehingga volume dan temperaturnya meningkat juga. Adanya kenaikan suhu udara hasil pemb...

ILMU DESAIN : DESAIN MESIN PENGAYAK PASIR DENGAN AUTODESK INVENTOR 2016

Capek harus mengayak pasir secara manual ? terasa lama ? Ini dia solusinya Mesin Pengayak Pasir, mesin ini didesain khusus untuk mengatasi masalah saat proses pengayaan pasir. Mesin pengayak pasir ini mampu mempercepat proses pembangunan rumah anda dll. Kami menyediakan desain mesin pengayak pasir, pendesainan ini mengunakan bantuan program autodesk inventor 2016. Jika anda berminat mendapatkan desain mesin pengayak pasir diatas maka anda cukup menghubungi kami via INSTAGRAM  @iteknik_official