Cara Membuat Widget Page Berubah Menjadi Navigation Bar Keren

Setelah artikel tidak jelas saya yang sebelumnya, kali ini saya benar-benar akan melakukan sesuatu yang menambah wawasan kita. Pada artikel yang diberi judul Cara Membuat Widget Pages Berubah Menjadi Navigation Bar Keren ini hanya memerlukan widget Pages, JavaScript dan CSS (Cascading Style Sheet).
Perlu diketahui Navigation Bar Top ini tidaklah menggunakan Dropdown dan semua CSS dan JavaScript berasal dari w3school hanya saja ini telah dirubah sedemikian rupa

Langkah pertama tentunya kamu perlu menambahkan widget Pages terlebih dahulu. Letaknya berada di (Nama Blog) > Layout > Add a Gadget > Pages
Masukkan CSS berikut ini pada kata < style> Disini < /style> atau pada letak < b:skin> Disini < /b:skin> ul.topnav li.selected{background:#55AB55}ul.topnav{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}ul.topnav li{float:left}ul.topnav li a{display:inline-block;color:#f2f2f2;text-align:center;padding:14px 16px;text-decoration:none;transition:.3s;font-size:17px}ul.topnav li a:hover{background-color:#555!important}ul.topnav li.icon{font-weight:600;display:none}}
Dan tambahkan CSS berikut agar membuatnya responsive.@media screen and (max-width :480px){ul.topnav li{display:none}ul.topnav{background:0 0}ul.topnav li.icon{display:block;width:100%}ul.topnav li.icon a{background:#55ab55}}@media screen and (max-width:480px){ul.topnav.responsive{position:relative;background:0 0}ul.topnav.responsive li.icon{margin:0}ul.topnav.responsive li{float:none;display:inline}ul.topnav.responsive li a{display:block;background:#333}ul.topnav.responsive li.icon a{background:#55ab55;max-width:24.2%}}

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

Dan pada langkah terakhirnya cari lokasi dari PageList pada tempat Edit Template dan temukan < ul> yang tidak jauh letaknya dari kata yang seperti < b:widget id='PageList1' locked='false' title='Pages' type='PageList' version='1' visible='true'>. tambahkan kata class='topnav' id='myTopnav' pada < ul>. Jadinya akan seperti berikut ini.<ul class='topnav' id='myTopnav'> Eittss... belum selesai, tambahkan kode berikut ini tepat dibawah kode diatas. <li class='icon'> <a href='javascript:void(0);' onclick='myFunction()'>≡ Menu</a> </li>

Dan selesai lah sudah Cara Membuat Widget Pages Berubah Menjadi Navigation Bar Keren. Semoga kita berjumpa lagi dipertemuan yang akan datang dan jika ada kesulitan dalam mencerna penjelasan saya silahkan bertanya di

Ngoredtxt

Friday, December 23, 2016

Cara Membuat Widget Page Berubah Menjadi Navigation Bar Keren