Cara Membuat Garis Pemisah di Menu Navigasi Blog

Anirocksite.com - Pada tutorial kali ini saya akan membagikan bagaimana cara membuat garis pemisah menu navigasi pada header blog.

Banyak yang bertanya kepada saya bagaimana cara membuat garis pemisah pada menu navigasi blog, padahal membuat garis navigasi tersebut sangatlah mudah karna hanya menggunakan CSS Properti. Memasang garis pemisah sebenarnya cukup berguna agar pengunjung yang membuka blog kita dapat dengan mudah membedakan mana navigasi A atau navigasi B.

Nah bagi kamu yang ingin tau bagaimana Cara Membuat Garis Pemisah di Menu Navigasi Blog yuk ikuti tutorial dibawah ini.

Cara Membuat Garis Pemisah di Menu Navigasi Blog

1. Pertama, login terlebih dahulu ke Blogger,
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian, cari kode seperti ini </b:skin> atau </style>, lalu copy kode CSS garis pemisah ini dan letakkan tepat diatas kode yang disebutkan tadi,

Perhatikan!! ID navigasi yang saya beri highlighter gradient, biasanya setiap template memiliki kode navigasi yang berbeda, silahkan ganti dengan kode navigasi milikmu.

#cssmenu > ul > li {
border-left: 1px solid rgba(0,0,0,0.08);
border-right: 1px solid rgba(255,255,255,0.12);
float: left;
margin: 0;
}

Bagaimana Jika template yang digunakan merupakan Side Navigasi (Navigasi Yang Berada Disamping) ? Yaa kamu juga bisa membuat garis pemisahnya, karna hanya perlu mengubah border-left/right menjadi border-bottom/top. Kurang paham ? bisa lihat CSS dibawah ini.

#cssmenu > ul > li {
border-top: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(255,255,255,0.12);
float: left;
margin: 0;
}

4. Terakhir simpan atau save template.

Bagaimana ? mudah bukan membuat garis pemisah di menu navigasi blog di header maupun side navigasi.

Sekian tutorial bagaimana Cara Membuat Garis Pemisah di Menu Navigasi Blog, semoga dengan adanya artikel ini dapat membantu teman teman untuk mengelola atau mengembangkan blognya menjadi lebih bagus, dan Semoga bermanfaat :D.