Cara Membuat Menubar Multi Dropdown Di Blog
Cara Membuat Menubar Multi Dropdown Di Blog. Sobat blogger, kembali lagi untuk berbagi tutorial, kali ini saya akan membagikan sebuah tutorial bagaiman cara membuat menubar multi dropdown di blog,tutorial ini saya ambil dari blog mbak Arlina, :) dan terimakasih sebelumnya buat mbak arlina yang sudah berbagi, sobat blogger menubar ini selain tampilannya elegant juga di desain menjadi responsive oleh mbak arlina tentu dengan kelebihan multi dropdown menu atau multi sub menu.
Menu multi dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau bisa juga untuk meringkas artikle yang terkait yang di masukan ke menubar tersebut. jika anda ingin menerapkan menubar ini di blog anda,silahkan ikuti tutorialnya.
Cara Membuat Menubar Multi Dropdown Di Blog
DEMO
Baca Juga : Cara Membuat Popular Post Simple Keren
Cara Membuat Menu Bar Multi Dropdown.
1. Buka akun blogger anda.
2. Pilih menu template > klik Edit Html
3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>
nav {
display: block;
margin-top: 100px;
background: #374147;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: #9ca3da;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer {
background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap {
width: 768px;
}
.menu ul {
top: 37px;
}
.menu li a {
font-size: 12px;
}
a.homer {
background: #374147;
}
}
@media (max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
}
.menu {
display: none;
}
.responsive-menu {
display: block;
margin-top: 100px;
}
nav {
margin: 0;
background: none;
}
.menu li {
display: block;
margin: 0;
}
.menu li a {
background: #fff;
color: #797979;
}
.menu li a:hover,.menu li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}
5. Selanjutnya letakan kode html di bawah ini tepat di bawah kode </header>
<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>
<ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
<li><a href="#">Sub-Menu 3</a></li>
<li><a href="#">Sub-Menu 4</a></li>
<li><a href="#">Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
</ul>
</nav>
5. Langkah terakhir simpan kode di bawah ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var touch = $('#resp-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
//]]>
</script>
6. Jika sudah, silahkan klik pertinjau terlebih dahulu,kalo sudah ok, save template anda.
Oke sobat saya rasa sudah selesai di tutorial cara membuat menubar multi dropdown di blog,untuk lebih dan kurangnya saya mohon maaf,semoga sukses. :)
http://www.madamvia.web.id/2015/01/cara-membuat-menubar-multi-dropdown-di-blog.html
Cara Membuat Menu Navigasi Drop Down di Blogspot
POSTED BY ALI MUAKHOR POSTED ON THURSDAY, JANUARY 15, 2015 WITH 7 COMMENTS
Pada tutorial terdahulu sudah saya jelaskan cara membuat menu navigasi biasa, cara membut menu pages dan cara membuat gabungan menu vagiasi dan pages, pada tutorial kali ini saya akan menjelaskan cara membuat menu navigasi drop down atau menu sub navigasi. Sebelumnya akan saya jelaskan apa itu menu vaigasi drop down. Dalam terjemahan bahasa Indonesia drop down dapat di artikan turun kebawah jadi menu navigasi drop down adalah menu yang di fungsikan untuk mengelompokkan suatu artikel ke dalam sub kategori tertentu menjadi lebih terperinci sesuai dengan kategori artikel dan di susun kebawah berdasarkan menu utama. Sebagai contohnya Anda ingin membuat menu artikel dengan tema Smartphone di mana di dalamnya Anda kelompkkan lagi menjadi lebih terperinci dengan menambah sub menu seperti Android, iOS, Windows Phone atau Blackberry.
Fungsi menu drop down pada dasarnya untuk lebih memudahkan pembaca blog Anda membaca artikel tertentu yang sudah Anda buat sebelumnya, jadi jika ada pengunjung blog Anda yang kebetulan adalah pemilik Smartphone Android maka akan lebih memudahkan pembaca blog Anda membaca semua artikel berdasarkan sub kategori dari Smartphone yaitu Android.
Sama seperti artikel sebelumnya untuk memudahkan memahami artikel Cara Membuat Menu Navigasi Drop Down di Blogspot ini saya gunakan template blog yang saya pasang dalam blog ini. Karena tutorial ini adalah lanjutan dari tutorial sebelumnya, maka Saya sarankan Anda untuk membaca terlebih dahulu tutorialnya di sini, agar mudah dalam mempelajari tutorial lanjutan dalam artikel ini. Template blog ini merupakan template hasil download (template editan) bukan template bawaan dari blogspot. Pada tutorial kali ini Saya akan mengedit menu pada kategori Smartphone untuk saya spesifikkan lagi ke dalam kategori sub menu Android, Blackberry dan iOS. Sebelum saya rubah saya akan memberikan gambar agar perubahan dapat di lihat setelah saya edit. Gambar menu sebelum di edit bisa di lihat pada gambar di bawah ini.
Menu Navigasi Smartphone sebelum di edit
Menu navigasi pada gambar di atas jika dilihat dari kode HTMLnya adalah seperti pada gambar di bawah ini,
Menu Smartphone sebelum di edit
Cara menambah sub kategori pada menu Smartphone pada blog saya ini langkah-langkahnya adalah sebagai berikut. Masuk ke menu Blogspot, kemudian pilih Template selanjutnya pilih menu Edit HTML. Lihat gambar di bawah ini untuk lebih jelasnya.
Khusus pada menu Smartphone pada menu edit HTML pada menu blog ini akan saya tambahkan beberapa kode yang nantinya akan lebih spesifik sesuai dengan kategori yang akan saya buat.
Menu Smartphone setelah di edit
Untuk memudahkan akan saya jabarkan edit HTML sebelum dan sesudah di edit, bandingkan perubahan mana saja yang terjadi untuk memudahkan membedakanya. Yang pertama adalah menu Smartphone sebelum di edit kode HTML nya sebagai berikut
<li><a href='http://kupastutorial.blogspot.com/search/label/NEWS'>NEWS<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SMART PHONE'><a/>SMART PHONE</li>
<li><a href='http://kupastutorial.blogspot.com/search/label/WEBSITE'>WEBSITE<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SOSIAL MEDIA'>SOSIAL MEDIA<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/PHOTOSHOP'>PHOTOSHOP<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/KOMPUTER'>KOMPUTER<a/></li>
</ul>
Setelah menu Smartphone saya edit berubah menjadi seperti pada kode HTML di bawah ini :
<li><a href='http://kupastutorial.blogspot.com/search/label/NEWS'>NEWS</a></li>
<li><a href='http://kupastutorial.blogspot.com/#'>SMART PHONE</a>
<ul>
<li><a href='http://kupastutorial.blogspot.com/search/label/Android'>Android</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/Blackberry'>Blackberry</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/iOS'>iOS</a></li>
</ul>
</li>
<li><a href='http://kupastutorial.blogspot.com/search/label/WEBSITE'>WEBSITE</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SOSIAL MEDIA'>SOSIAL MEDIA</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/PHOTOSHOP'>PHOTOSHOP</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/KOMPUTER'>KOMPUTER</a></li>
</ul>
Perhatikan baik-baik kode sebelum dan sesudah di edit pada kode HTML ini di atas terutama pada tulisan yang saya beri tanda warna hitam. Pada menu setelah di edit atau perunahan menu Smartphone berubah menjadi <li><a href='http://kupastutorial.blogspot.com/#'>SMART PHONE</a>. Fungsi ini untuk menampilkan statis atau ketika di klik tidak akan terjadi perubahan apa-apa. Jangan lupa tambahkan kode <ul> pada sub menu dan akhiri dengan kode </ul> untuk menutup kode pada sub menu kategori sub Smartphone.
Prose selanjutnya edit kembali artikel yang sudah Anda buat sebelumnya, buat kategori sesuai dengan sub menu yang anda buat sebelumnya, proses ini butuh waktu karena harus mengedit satu persatu perartikel, jadi Saya sarankan sebelum membuat banyak artikel sebaiknya sub menu navigasi harus di buat sebelumnya. Hasil menu Smartphone setelah di edit dengan membuat sub menu bisa di lihat pada gambar di bawah ini
Proses membuat sub menu navigasi selesai, selamat mencoba, jika terdapat kesulitan silahkan tinggalkan komentar.
https://kupastutorial.blogspot.co.id/2015/01/cara-membuat-menu-navigasi-drop-down-di.html
Cara Membuat Menu Dropdown atau Menu Menurun pada Blog
OLEH CHOYYRUL A. FRIDAY, 9 JANUARY 2015
Bagikan :
Cara membuat menu dropdown atau menurun pada Blogspot atau website. Bagi kalian yang baru membuat sebuah blog atau website, pastinya kalian tahu dengan salah satu menu ini. Menu Dropdown digunakan untuk membuat menu menurun, maksudnya menu yang mempunyai sub menu. Fungsi dari menu ini yaitu untuk membuat menu yang lebih efektif. Untuk lebih jelasnya, silahkan lihat gambar dibawah ini ..
http://darikomputer.blogspot.com/2015/01/cara-membuat-menu-menurun-di-blog.html
Dari gambar diatas terdapat menu KOMPUTER yang mempunyai sub menu Hardware, Software dan Tutorial. Pembuatan menu dropdown akan lebih mempermudah pengunjung blog atau website dalam menjelajahi blog atau website kita.
Ikutilah langkah - langkah dibawah ini untuk pembuatan Menu Dropdown :
1. Masukkah ke akun blogger kamu,
2. Pilih Template, letaknya ada di pojok kiri bawah,
http://darikomputer.blogspot.com/2015/01/cara-membuat-menu-menurun-di-blog.html
3. Setelah masuk ke Template, seperti gambar di atas, pilihlah Edit Html,
4. Kemudian anda akan dibawa masuk ke halaman Edit Template,
5. Lakukanlah pencarian Menu yang akan kamu buat menjadi Menu Dropdown. Disini saya akan membuat Menu KOMPUTER yang mempunyai sub menu Hardware, Software dan Tutorial.
6. Untuk melakukan pencarian tekan tombol CTRL+F,
7. Masukkan kata pencarian, lihat gambar dibawah ini.
http://darikomputer.blogspot.com/2015/01/cara-membuat-menu-menurun-di-blog.html
8. Untuk membuat Menu Dropdown, tambah kan kode dibawah ini :
<li><a href='#'>KOMPUTER</a>
<ul>
<li><a href='#'>Hardware</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Tutorial</a></li>
</ul>
</li>
Penjelasan kodenya adalah :
<li><a href='#'>KOMPUTER</a>
Digunakan untuk membuat Menu Utama, tambahkan tanda # di Menu Utama.
<ul>
<li><a href='#'>Hardware</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Tutorial</a></li>
</ul>
Kode di atas digunakan untuk membuat Sub Menu.
Pada Sub Menu, ganti tanda # dengan alamat URL blog kamu.
9. Terakhir klik Save Template untuk menyimpan template.
10. Selesai. Jika ada pertanyaan, silahkan melalui komentar dibawah ini.
http://darikomputer.blogspot.co.id/2015/01/cara-membuat-menu-menurun-di-blog.html
CARA MEMBUAT DROP DOWN MENU DI BLOGSPOT
hengki kristianto November 4, 2013 blogspot
cara membuat drop down menu di blogspot
Cara membuat drop down menu di blog ~ Banyak sekali blogger yang sudah memasang drop down menu di blog atau disebut juga menu bar untuk mengatur tampilan blog, Umumnya memasang menu drop down secara horizontal diletakkan di bawah header sesuai dengan keinginan admin blog.
Kali ini saya akan memberikan cara membuat menu drop down horizontal menggunakan CSS secara sederhana saja, ikuti saja langkah-langkah di bawah ini untuk memasang menu drop down horizontal tersebut:
Cara memasang CSS menu drop down horizontal di blog
1. login ke account blogger anda
2. Klik Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
5. Copy kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>
cssmenu ul {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(overlay.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#cssmenu a,
#cssmenu a:link {
font-weight: bold;
font-size: 13px;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
background: #000;
color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
background: #979797 url(overlay.png) repeat-x 0 -40px;
background: #666666 url(overlay.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
background: #7d7d7d url(overlay.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url(overlay.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#cssmenu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #cssmenu ul {
height: 1%;
}
6. Klik Simpan Template
Nah, kode CSS di atas sudah tersimpan di dalam template anda, masih ada 1 langkah lagi yang harus anda lakukan agar menu drop down horizontal blog anda siap untuk digunakan.
artikel terkait : cara membuat menu scroll
Cara memasang kode HTML menu drop down pada tata letak blog
1. Klik Tata Letak di menu blogger
2. Klik Tambah Gadget
3. Pilih HTML / Javascript
4. Copy code di bawah ini, kemudian paste pada gadget tersebut. Kolom judul gadget jangan diisi / kosongkan saja.
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li class='last'><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
5. Silahkan edit dan ganti kode # dengan alamat url tujuan yang sesuai keinginan anda dan klik Simpan
6. Aturlah posisi widget menu drop down horizontal sesuai dengan tempat yang anda inginkan, biasanya diletakkan di bawah header blog,.silahkan anda coba geser-geser letaknya sendiri jika sudah mantap maka klik simpan atau save. Contoh menu drop down bisa anda lihat seperti yang saya gunakan di blog ini.
Demikianlah cara membuat menu drop down, mudah-mudahan dapat memberikan manfaat untuk anda, salam blogger.
http://hengkikristiantoateng.blogspot.com/2013/11/cara-membuat-drop-down-menu-di-blogspot.html
0 Response to "Cara Membuat Menu Drop Down Versi Dekstop Pada Blog"
Post a Comment