Skip to main content

Cara membuat Menu Multi Dropdown Di blog

Next postingan saya kali ini akan sesidikit berbagi kepada kalian sobat blogger, Cara membuat Menu Multi Dropdown Blog mungkin bagi sebagian pengguna blogger sudah tidak asing lagi dengan cara seperti ini, tapi tidak ada salahnya juga jika saya share kembali kepada kalian yang belum tahu cara membuatnya.

Ok sobat jika tertarik untuk menggunakannya, bisa mengikuti langkah atau cara mudah membuatnya dibawah ini, dan bagi yang sudah tahu cara membuatnya bisa menyimak saja ya.

Cara membuat Menu Multi Dropdown
Pertama silahkan kalian buka blogger > Pilih Tema > Edit Html > lalu kalian letakan code css dibawah ini tepat sebelum </style> atau juga bisa sebelum </b:skin>

/* Menu Multi Dropdown AG */ ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#000;width:100%} ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#000} ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#000; padding:0 7px 0} ul#mainmenu li:hover>ul {visibility:visible;opacity:1;} ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;} ul#mainmenu li:hover {z-index:1;} ul#mainmenu ul ul {position:absolute;left:100%;top:0;} ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;} * html ul#mainmenu li a {display:inline-block;} ul#mainmenu>li {margin:0;} ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;} ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;} ul#mainmenu ul li {float:none;margin:7px 0 0;} ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #000;} ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;} ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;} ul#mainmenu ul span {background-image:none; padding-right:5px;} ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #000;} ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#fff;} ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#000;color:#FFFFFF;}

Setelah itu kalian buat menunya seperti dibawah ini bisa kalian gunakan codenya dan sebelum menyimpan kembali template yang kalian edit silahkan kalian edit terlebih dahulu code htmlnya sesuai yang kalian inginkan.

<!-- Start menu multi dropdown-->
<nav>
<ul class='menutop' id='mainmenu'>
    <li class='menutop'><a href='#' title='Home'>Home</a>
    </li>
    <li class='menutop'><a href='#' title='Product Info'>Product info</a>
        <ul>
            <li><a href='#'>Features</a>
            </li>
            <li><a href='#' title='Installation'>Installation</a>
                <ul>
                    <li><a href='#'>Description of files</a>
                    </li>
                    <li><a href='#'>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Parameters info</a>
            </li>
            <li><a href='#' title='Supported browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class='menutop'><a href='#' title='Samples'>Samples</a>
        <ul>
            <li><a href='#'>Android template</a>
            </li>
            <li><a href='#'>Mac template</a>
            </li>
            <li><a href='#' title='Mercury template'>Mercury template</a>
                <ul>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Lilac theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Elegant template</a>
            </li>
            <li><a href='#' title='Poin Template'>Point template</a>
                <ul>
                    <li><a href='#'>Aquamarine theme</a>
                    </li>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Grey theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                    <li><a href='#'>Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#' title='Toolbars template'>Toolbars template</a>
            </li>
        </ul>
    </li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
</ul>
    </nav>
<!-- End menu multi dropdown -->

LIVE DEMO

Jika sudah kalian tinggal save atau simpan kembali template yang sudah kalian edit. lalu kalian bisa melihat langsung hasilnya di blog kalian, jika ada yang kurang pas kalian bisa seauaikan codenya sendiri.

Ok mungkin dari saya cukupkan sekian dulu selamat mencoba dan semoga bisa bermanfaat.
Labels:

Comments

Post a Comment

Popular posts from this blog

50 Situs Mendapatkan Bitcoin Gratis No SCAM

Bitcoin di tahun 2016 ini penggunaannya sudah sangat banyak, hal ini terbukti dengan harga bitcoin yang semakin hari semakin mahal saja harganya. Saya sendiri yang belum lama menggeluti bitcoin ini sejak agustus tahun 2015, harga bitcoin pada saat itu hanya sekitar Rp.5.000.000 lebih Tetapi harga bitcoin saat ini adalah sekitar Rp.7.500.000 saat di terbitkannya artikel ini dan diperkirakan harga bitcoin akan semakin naik. Harga dari tahun ke tahun yang meningkat ini tentu saja menjadi keuntungan tersendiri bagi para penikmat bitcoin, hingga bisa mendapatkan keuntungan puluhan juta rupiah. Namun tidak semudah itu untuk mendapatkan bitcoin karena kita harus memiliki sebuah alat khusus untuk menambang bitcoin serta modal yang cukup besar hanya untuk 1 bitcoin saja. Karena hal tersebut hanya sebagian orang saja yang mampu mendapatkan bitcoin. Bitcoin Gratis Tetapi bitcoin untuk kalangan tertentu saja yang bisa, bukan berarti kita yang tidak memiliki modal untuk mendapatkan bitco
Post a Comment
Read more

Penemuan Terbaru! Ingin Umur Tambah Panjang? Lakukan Olahraga Ini Secara Rutin

Magazine Daily QQ , Studi baru yang ditemukan akhir akhir ini oleh para peneliti ini menyebutkan bahwa untuk memperpanjang harapan hidup selama 7 jam kita bisa melakukan olahraga lari selama 1 jam saja. Jadi selain menyehatkan, lari juga bisa memperpanjang usia kita.  Berikut penjelasan dari para peneliti Iowa State University, Texas,  “Jika kita melakukan lari rutin selama 1 jam setiap minggu maka dapat meningkatkan harapan hidup hingga 3 tahun. Dan dalam penelitian kami ini tidak mempedulikan seberapa jauh dan cepat kalian berlari. Jika memilih tetap untuk berlari secara rutin maka risiko seseorang dari kematian dini bisa turun hingga 40%. Manfaat ini juga masih berlaku bagi yang masih merokok, mengkonsumsi minuman beralkohol dan juga yang mengalami berat badan.”  Jadi mulai sekarang kalian coba untuk lebih rutin lagi untuk berlari selama 1 jam agar usia kita lebih panjang lagi.
Post a Comment
Read more

Mengenal Lebih Dekat Fitnah, Penghasutan, dan Hoax dalam Hukum Pidana

Mumpung lagi rame soal hoax dan teman – temannya ,  Magazine Daily QQ, akan membahas secara ringan (mudah2an ya) soal ketiga istilah ini dari sisi hukum, terutama hukum pidana Pertama soal fitnah, dalam KBBI fitnah diartikan sebagai perkataan bohong atau tanpa berdasarkan kebenaran yang disebarkan dengan maksud menjelekkan orang (seperti menodai nama baik, merugikan kehormatan orang) Sementara itu, fitnah diatur dalam Pasal 311 KUHP yang berbunyi “Jika yang melakukan kejahatan pencemaran atau pencemaran tertulis dibolehkan untuk membuktikan apa yang dituduhkan itu benar, tidak membuktikannya, dan tuduhan dilakukan bertentangan dengan apa yang diketahui, maka dia diancam melakukan fitnah dengan pidana penjara paling lama empat tahun.” Fitnah dalam konteks ini terkait dengan menista yang diatur dalam Pasal 310 KUHP. Jika menista tidak mementingkan soal kebenaran pernyataan sepanjang tuduhannya untuk menyerang kehormatan dan nama baik seseorang. Jadi fitnah hanya bisa diterapkan jika yan
Post a Comment
Read more