July 27, 2019

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

menggunakan gagdet linklist
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.
ilustrasi navigasi menu inline dan dropdown
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 mengedit link list
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. 

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist

8 comments:

  1. gak ada perubahan mas sofyan

    ReplyDelete
  2. Yah gak ngaruh ke tampilan karena perubahannya gak akan kliatan, lebih ke optimalisasi ya

    ReplyDelete
    Replies
    1. gak mas udah sy cek, judulnya tetep aj h3

      Delete
  3. Ada dua kode yang sama, pilih salah satu. Mungkin pada templat yang sudah di edit sebelumnya ditempatkan pada posisi nomor.2

    Pada templat asli ada dibaris 2876, dan 3073.

    Punya saya mujarab kok.

    ReplyDelete
  4. Saya kemaren utak atik model gini, malah jadi eror.
    Lalu dapat yang hanya perlu ganti 1 atau 2 huruf sih :)

    ReplyDelete
  5. Tidak akan error, karena konten saya rombak total he he he

    ReplyDelete
  6. panjangnyaaaa code html ;- )

    ReplyDelete