Cara menjadikan widget pagelist menjadi menu navigasi blogger

Selamat datang di editblogtema, situs yang membahas trik trik memodifikasi template blogger. Tutorial kami mencakup trick CSS, HTML, bahkan Hack yang diterapkan kedalam template blogger. 

Mari kita mencoba membuat navigasi menu blogger cantik dan praktis memanfaatkan widget halaman atau page Blogger tanpa menambah elemen baru. 

Dan setiap template bawaan (default) memiliki widget halaman atau page atau Pagelist ini. Kami menganggap sekalipun kalian blogger pemula setidaknya telah memahami hal ini.

Untuk sementara ini kami terapkan ke salah satu template terbaru, yakni emporio seperti yang sedang kami pergunakan sekarang. Saya berpendapat sayang sekali fitur ini jika di abaikan. Padahal ia akan menjadi sebuah menu navigasi blogger yang sangat keren dengan ujungnya yang memiliki dropdown yang unik. Widget ini sendiri adalah bawaan empat template blogger terbaru: Page/Halaman dengan fitur dropdown!

1. MENEMPATKAN KODE PENGATURAN CSS SECARA OVERRADE

Bahkan kalian tidak perlu menambahkan apa apa termasuk kode CSS berikut di bawah ini yang telah saya modifikasi sumbernya 100% dari template emporio itu sendiri:

.top-nav .PageList ul li a{

border: solid; border-color: grey; border-radius: 10%;

background-color:$(tabs.background.color);

color:$(tabs.text.color);

display:block;

height:$(tabs.text.font.size + 2 * 16px);

line-height:$(tabs.text.font.size + 2 * 16px);

overflow:hidden;

padding:0 22px;

text-overflow:ellipsis;

vertical-align:middle

}

Kalian hanya perlu mengkopinya lalu meletakakannya ke dalam kotak blanko CSS pada pengaturan Tema Desainer Blogger Caranya:

1. Masuk kepengaturan blogger
2. Pilih Tema
3. Pilih Sesuaikan
4. Pilih lanjutkan
5. Pilih Tambahkan CSS

Pada blanko kosong kotak dialog CSS tambahkan kode CSS di atas tadi kedalamnya.

Save.

Cara di atas namannya menimpakan kode CSS atau 'overrade'.

 Sedangkan untuk mengganti ikon dropdown bawaan blogger yang "tiga titik bersusun" dari atas ke bawah kalian cari kode svg berikut:

'verticalMoreIcon' di dalam halaman HTML blogger hapus dan ganti dengan: 'chevronDownIcon'

Setelah itu jangan kuatir, kalian tetap bisa mengatur ukuran huruf, warna huruf dan warna latar bar Navigasi Menu Pagelist tersebut melalui pengaturan blogger.

Cara memasang widget Page atau Halaman adalah sebagai berikut:

1. Masuk kepengaturan blogger
2. Pilih Tataletak
3. Pilih tambahkan Gagdet
4. Pilih Page atau Halaman.

Dan atur halaman dengan cara:

Pada template template terbaru letaknya ada di bagian atas  layout body atau di bawah bagian layout header.

Lihat Demo

Sebagai catatan pada emporio menu navigasi hanya tampil pada halaman awal (Homepage) dan pada halaman postingan tampilan navigasinya disembunyikan, banyak yang tidak menyukai ini, namun kami sendiri berpendapat hal ini justeru bagus untuk memaksimalkan tampilan halaman postingan itu sendiri.

2. MEROBAH IKON DROPDOWN 'TITIK TIGA' BAWAAN DI UJUNG NAVIGASI MENU

Nah ini salah satu kelebihan template template terbaru blogger yang memiliki menu dropdown khas yang sangat responsif dan mobile friendly pada ujung navigasi yang di buat berdasarkan Pagelist ini. 

Ini terjadi jika kalian menambahkan lebih banyak sub-menu menu dengan cara mengklik dan berulang ulang 'Tambahkan Link Eksternal' untuk menambahkan Judul menu pada bagian kolom atas dan melengkapinya dengan link yang terkait Judul atau menu tersebut tanpa batas. Fitur ini jelas sekali luarbiasa bahkan menurut saya jauh lebih baik daripada navbar atau menu navigasi template template berbeli premium pada umumnya, terutama karena strukturnya yang baik memiliki kecepatan, responsivitas, dan mobilitasnya yang sangat tinggi.

Namun jika kalian tidak menyukai ikon dropdown yang telah ada kalian bisa merombaknya dengan cara:

1. Masuk kepengaturan blogger
2. Pilih Tema
3. Pilih Edit HTML

Dan pada halaman editor HTML blogger yang muncul atau telah terbuka cari kode berikut:

verticalMoreIcon

Hapus dan ganti dengan:

chevronDownIcon

Baca: 

Cara menuliskannya harus benar huruf kecil dan huruf besarnya, karena jika tidak bagian librarynya jaringan server web tidak akan mengenalinya. 

Demikian cara membuat navbar atau navigasi menu blogger memanfaatkan elemen asli blogger itu sendiri..

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini, kalian tidak akan rugi...