TEKNIK MENYULAP GAGDET LINKLIST BLOGGER MENJADI MENU NAVIGASI KEREN PADA TEMPLATE SOHO

Contoh menu navigasi meniru pexel menggunakan gagdet linklist editblogtema

Karena statusnya adalah "gadget bawaan blogger, maka navigasi menu ini akan memiliki kelebihan sebagai berikut:

1. User atau pengguna sekalipun pemula akan dengan mudah mengedit nama menu berikut urlnya melalui pengaturan tataletak blog, tidak perlu mengedit menu melalui halaman editor HTML blog samasekali
2. Gagdet linklist berubah dari bentuk list dropdown menjadi inline atau horisontal pada bar navigasi.

CARA MEMBENTUKNYA:

1. Masuk kepengaturan blogger, pilih tema, pilih edit HTML dan cari kode </head> lalu letakan kode CSS style berikut diatas kode </head> tadi:

<style>
#editblogmenu{width:100%;margin:0 auto;height:50px;position: fixed; z-index:99; background:#4169E1;}
#editblogmenu ul,#editblogmenu li{margin:0;padding:0;list-style:none;}
#editblogmenu ul{height:45px}
#editblogmenu li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:16px;
font-weight:bold;}
#editblogmenu a{display:block;line-height:45px;padding:0 16px;text-decoration:none;color:#F5F5F5;}
#editblogmenu ul li:hover a{color:#666;}
#editblogmenu input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}
#editblogmenu label{font-family:&#39;trebuchet MS&#39;;font-size:30px;font-weight:400;display:none;width:45px;height:40px;line-height:45px;text-align:center;}
#editblogmenu label span{font-size:13px;position:absolute;left:35px}
#editblogmenu ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#editblogmenu ul li ul li a{color:#fff;height:40px;line-height:40px;background:#000;width:390px;}
#editblogmenu ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#000;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#editblogmenu li:hover &gt; ul.menux{visibility:visible;opacity:1;top:55px;}
#editblogmenu a.dutt{padding:0 27px 0 14px}
#editblogmenu a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#editblogmenu a.dutt:hover::after,#editblogmenu ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#editblogmenu ul.menux li a{background:#fff;color:#000;}
#editblogmenu ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#editblogmenu li.facebook {padding:0 5px;}
@media screen and (max-width:960px) {
@media screen and (max-width:100px) {
#editblogmenu li:hover &gt; ul.menux{display:block;}
#editblogmenu ul{border:none;border-bottom:4px solid #e9e9e9;}
#editblogmenu{position:fixed;border:none;border-bottom:4px solid #e9e9e9;}
#editblogmenu ul{background:#5093C4;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#editblogmenu ul.menux{width:100%;position:static;border:none}
#editblogmenu li{display:block;float:none;width:auto;text-align:left}
#editblogmenu li a{color:#fff}
#editblogmenu li a:hover{background:#f1f1f1;color:#f9f9f9}
#editblogmenu li:hover{background:#8493a0;color:#fff;}
#editblogmenu a.dutt{font-weight: bold;}
#editblogmenu li:hover &gt; a.dutt,#editblogmenu a.dutt:hover{background:#b1b1b1;color:#fff;}
#editblogmenu input,#editblogmenu label{display:inline-block;position:absolute;right:0;top:0;}
#editblogmenu input:after,#editblogmenu label:after {content:&quot;\f00a&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#fff;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#editblogmenu input{z-index:4;}
#editblogmenu input:checked + label{color:#666;font-weight:700}
#editblogmenu input:checked ~ ul{display:block}
#editblogmenu ul li ul li a{width:100%;color:#666;}
#editblogmenu ul li ul li a:hover{background:#8493a0;color:#666;}
#editblogmenu ul.menux a{background:#fff;color:#666;}
#editblogmenu ul.menux a:hover{background:#8493a0;color:#666;}
#editblogmenu ul.menux li{background:#fff;color:#666;}
#editblogmenu ul.menux li:hover{background:#8493a0;color:#fff;}
#editblogmenu ul.menux li a{background:#fff;color:#666;}
#editblogmenu ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}

1. 2. Masih di halaman editor HTML blogger, di bawahnya kode </head> letakan kode berikut:

<div class='blog-menu'><nav id='editblogmenu'>
<b:section id='editblogmenu' name='editblogmenu' showaddelement='true'><b:section> </nav>
</div>

Save tema.

Sengaja saya membentuk section baru di dalam header blog untuk memaksa link list yang tadinya berbentuk menu dropdown agar menjadi inline/horisontal. Dan widget ini kemudian akan tampil sebagai tool dipengaturan tataletak blog. Dan ketika membentuk judul menu cukup dengan cara masuk kepengaturan tataletak dengan cara menambahkan gagdet "LinkList" dan mengedit judul berikut link URL-nya.

Cara mengedit gagdet linlist ini untuk dijadidkan menu sederhana saja, cukup masuk kepengaturan, pada section editblogmenu (tempatnya paling atas di tataletak blog) klik tambahkan gagdet lalu pilih gagdet linklist atau edit saja yang sudah ada. Cara mengditnya:

1. Kosongkan judul utama-karena kalau dikasih judul maka nama menu akan geser kebawah mengalah sama si Judul tadi.
2. Beri nama pada kolom "new site" atau situs baru dengan nama atau judul menu
3. Pastekan link atau URL terkait judul pada kolom "new url"
4. Lakukan sampai 3 buah menu saja dengan cara yang sama.
5. Save widget

Cara inilah yang paling sering dilakukan oleh desainer template template ternama di dunia ini yakni dengan cara memanfaatkan gagdet list link dan menempatkannya ke dalam bar navigasi diatas header blog.

Cara diatas masih cara dasar, simple dan ringan karena hanya memanfaatkan aba aba css,  untuk membuat menu menjadi lebih responsive dan mobile kita perlu menambahkan JavaScript functional.  Namun karena mempertimbangkan kecepatan template dan Soho juga memiliki sidebar yang dapat ditampilkan dengan mengklik menu hamburger yang muncul pada opsi homepage pada bagian atas kiri header. Maka saya hanya menampilkan menu menu yang saya rasa penting menurut misi blog saya. 

Sisanya menu menu lain saya letakan pada sidebar dengan cara kembali ke homepage blog dan mengklik menu hamburger (balok kecil susun tiga. Pemasangan menu pada sidebar sangat mudah menggunakan widget linklist juga. Menu akan tersusun dalam bentuk list dropdown. 

Jika ada pertanyaan silahkan ajukan pada bagian komentar dibawah postingan ini.