Cara Memasang Menu Navigasi Dropdown Pada Blog

  Cara Membuat Menu Navigasi Dropdown Pada Blog - Apa perbedaan antara menu navigasi dropdown dengan menu navigasi biasanya? jika dilihat dari tampilan kedua menu navigasi tersebut tidak ada bedanya namun ketika cursor atau mouse anda arahkan ke menu navigasi dropdown maka menu ini akan menampilkan sub-menu yang tersedia dalam sebuah blog.

Jenis menu seperti ini bisa menjadi alternatif anda dengan blog berbagai macam kategori. Dengan Responsivitasnya tentu sangat memudahkan viewers pengunjung blog anda. Anda juga bisa menghapus menu navigasi bawaan dari template anda apabila anda merasa menu tersebut tidak cocok dengan blog dan menggantinya dengan menu navigasi selera anda. Salah satunya menu dropdown yang akan kita pasang berikut.

Cara Memasang Menu Navigasi Dropdown Pada Blog

1. Login ke akun Dasbor Blogger anda.

2. Pilih Laman Edit Template.

3. Cari kode Css ]]></b::skin> atau bisa juga </style>

4. Lalu Letakkan Kode dibawah ini tepat diatas salah satu kode tersebut.

nav { display:block; margin-top:100px; background:#374147; border-bottom:4px solid #07ACEC; } .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:#07ACEC; } .menu ul { visibility:hidden; opacity:0; margin:0; padding:0; width:150px; position:absolute; left:0; 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:#07ACEC; color:#fff; } .menu li:hover>ul { visibility:visible; opacity:1; transform:translate(0,0); } .menu ul ul { left:149px; top:0; 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:#07ACEC; } @media (min-width:768px) and (max-width:979px) { .mainWrap { width:768px; } .menu ul { top:37px; } .menu li a { font-size:12px; } a.homer { background:#07ACEC; } } @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:#07ACEC; 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; } }


5. Langkah berikutnya carilah kode </head> didalam template anda tadi.
6. Letakkan kode berikut tepat di atas kode tersebut.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <script type="text/javascript"> $(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>


7. Apabila Template yang anda gunakan belum ada menu navigasi sekali letakkan kode berikut di atas <div class='main-outer'> namun kalupun ada anda bisa menghapusnya lalu gantikan dengan kode dibawah ini.


<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> >


Simpan setelan Template dan lihat hasilnya.

Note: Ganti tanda '#' dengan link yang anda inginkan.

Tweet

Postingan terkait:

Ditulis Unknown — Friday, April 29, 2016 — Add Comment — Tutorial Blog