Blogger: Cara Customize Navigation Bar

Seperti kita lihat, navigasi bar adalah suatu keharusan bagi template Blogger modern. Namun, perlu pengetahuan web tertentu untuk menyesuaikan dan ini menjadi masalah umum bagi banyak Blogger.

Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana untuk menyesuaikan bar navigasi mudah dengan latar belakang konsep yang komprehensif. Anda tidak perlu tahu apa-apa sulit, hanya belajar untuk mengenali kode dan Anda dapat menyesuaikan hampir semua panel navigasi dari Blogger template!

Latar Belakang Konsep

Semua navigasi kode bar yang sama

Mari saya perkenalkan kode bar navigasi dari beberapa Blogger templates:

Green Light-Dasar bar navigasi tanpa bentuk dan gaya yang diterapkan

Dan kode yang menghasilkan bar navigasi ini:

<ul>
<li id='current'> <a expr:href='data:blog.homepageUrl'> Home </ a> </ li>
<li> <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'> Posts RSS </ a> </ li>
<li> <a expr:href='data:blog.homepageUrl + "feeds/comments/default"'> Komentar RSS </ a>
</ li>
<li> <a href='#'> Edit </ a> </ li>
</ ul>

NB : Tolong jangan mencoba untuk memahami hal-hal menjijikkan ini, mari kita beralih pada bar navigasi sebelah.

Notepad Chaos-A stylish namun rumit bar navigasi

Dan kode yang menghasilkan bar navigasi ini:

<ul id='menu'>
<li id='home'> <a href='/'> Home </ a> </ li>
<li id='about'> <a href='/'> Tentang </ a> </ li>
<li id='archives'> <a href='/'> Archives </ a> </ li>
</ ul>

Apakah Anda melihat sesuatu yang serupa?

Kesamaan antara kedua kode bar navigasi adalah:

<ul='/'>
<li> <a href='/'> </ a> </ li>
<li> <a href='/'> </ a> </ li>
<li> <a href='/'> </ a> </ li>
</ ul>

Bisakah Anda mendapatkan apa yang saya maksud? Tidak peduli bagaimana panel navigasi terlihat seperti, kode yang menghasilkan bar yang hampir sama, dan semuanya terlihat seperti kode di atas.

Jadi yang perlu anda peduli adalah kalimat ini:

<li> <a href='INI ADALAH LINK's menampilkan URL'> INI JUDUL </ a> </ li>

Mari kita memiliki sebuah contoh. Anda terkesan dengan tutorial dan memutuskan untuk menaruh link pada situs Anda panel navigasi. Oleh karena itu, yang perlu anda lakukan hanyalah akses ke panel kontrol account, pergi ke 'tata letak' dan di bawah 'Edit HTML' tab, temukan kalimat di atas dan mengubah kode menjadi ini:

<li> <a href='http://www.kinarakinari.blogspot.com'> Kinarakinari </ a> </ li>

Maka output akan terlihat seperti ini:

Selesai dan nikmatilah link Anda!

Advanced Customization

Ada lebih banyak hal yang dapat Anda lakukan dengan panel navigasi. Berikut adalah beberapa kode untuk penyesuaian lanjutan:

Untuk memberikan id for the link:

<li id='Kinarakinari'> <a href='http://www.kinarakinari.blogspot.com'> Kinarakinari </ li>

Untuk memberikan gambaran ketika pointer melayang-layang di atas link:

<li> <a href='http://www.kinarakinari.blogspot.com' title='Free Blogger template'> Kinarakinari </ li>

Untuk membuka link dalam tab baru:

<li> <a target='_blank'>Kinara href='http://www.kinarakinari.blogspot.com' kinari </ li>

Untuk mengatur Blog Blog situs dengan judul:

<li> <a expr:href='data:blog.homepageUrl'> Home </ a> </ li>

Nikmati menyesuaikan panel navigasi
Jadi, sekarang Anda tahu bahwa Anda dapat dengan mudah menjadi editor template profesional, bahkan jika Anda tidak tahu tentang pemrograman web stuff! Hidup akan selalu menjadi lebih mudah jika Anda dapat menangkap irama dari fenomena. Saya harap Anda menikmati belajar tutorial ini dan jika mungkin, silakan tinggalkan komentar untuk menceritakan apa yang Anda pikirkan, terima kasih atas pandangan Anda!