Elemen Baru untuk membuat Menu Horizontal di Blogger

Mungkin anda termasuk salah satu blogger yang sedang kebingungan atau mungkin "pernah kebingungan" yang hingga detik inipun "kebingungan itu belum terpecahkan". Sebuah persoalan "Bagaimana cara membuat sebuah horizontal dropdown menu di blogger?". Banyak sudah keluhan terhadap permasalahan ini, terutama akibat menu yang sudah terlihat dan berhasil dibuat tidak mampu bekerja sesuai harapan. Persoalan yang banyak ditemui adalah "anak menu yang diharapkan bisa terlihat ternyata tetap tak mau nongol karena hilang akibat terpotong".

Tabs Menu Horizontal Blogger dengan Animasi css3 transition

CSS3 transition memungkinkan dibuatnya berbagai animasi tanpa perlu menggunakan javascript ataupun bantuan gambar animasi berekstensi gif. Dengan kode css yang disertakan di bawah, sebuah tabs menu horizontal blogger beranimasi dapat dibuat untuk menggantikan blogger tabs/navigasi menu horizontal default blogger.
Ada beberapa kode baru (tag, id dan kode css) yang perlu ditambahkan agar tabs baru berfungsi secara optimal. Penambahan dilakukan di antara tag pembuka dan penutup head (di atas kode ]]></b:skin>) serta di antara tag pembuka dan penutup body melalui "Expand Template Widget".

Animated Horizontal Navigation Bar (Blogger Tabs)-2

Tab yang terlihat di atas adalah sebuah tab blogger beranimasi (animated blogger tabs) yang dibuat dengan menggunakan kode css3 transition. Animasi tercipta melalui permainan pada padding, opacity, top position dan background. Background image sama sekali tidak dipergunakan, karena untuk memperoleh efek gradasi warna kita hanya menggunakan css background gradient.
Blogger Tabs atau Blogger Horizontal navigation bar yang seperti terlihat di atas harus dibuat dengan menambahkan kode css baru dan sedikit merubah xhtml default blogger karena menggunakan tag baru sebagai tambahan agar tercipta efek animasi yang diinginkan. Anda harus menyelipkan tag span diantara tag pembuka li (<li>) dan tag pembuka "a" (<a href="...">).

Animated Blogger Tab with css3 Transition

Animated tab merupakan sebuah tabs ,menu horizontal yang dapat digunakan untuk mengganti tab menu horizontal default blogger. Disebut sebagai tab animasi karena ketika cursor diarahkan diatas menu maka menu akan bergeser dengan bentu pergeseran dalam durasi tertentu yang diatur dengan css transition. Anda dapat menggunakan tabs ini untuk menggantikan tabs default yang ada di blog anda. Ada beberapa yang harus dilakukan agar tabs bisa bekerja secara sempurna.

Blogger Tabs with css3 Animation

Blogger tabs ini memang memanfaatkan css3 animation serta multiple background image untuk mendapatkan efek hover yang terlihat seperti sorotan cahaya. Anda bisa memanfaatkan tab horizontal atau navigasi horizontal ini untuk menggantikan tabs horizontal default blogger. Image yang digunakan sebagai background dapat anda upload diblogger untuk mengganti URL yang telah disertakan di kode css. Pernggantian background dengan milik anda sendiri (hasil upload) semata-mata untuk menjaga berbagai kemungkinan yang tak diharapkan.

CSS Reset Blogger Tabs

Blogger memang telah menyedialan sebuah fitur yang memungkinkan penggunanya untuk membuat sebuah tabs horizontal dan vertical. Tab hoizontal akan terpasang di bawah header blog atau di atas post title. Sayangnya kode yang digunakan untuk tabs blogger (navigasi menu) menciptakan sedikit problema baru bagi penggunanya. Banyak masalah bermunculan saat pengguna mencoba untuk membuat menu horizontal baru dengan kode yang dibuat sendiri akibat kurang puas dengan tampilan tabs horizontal default blogger. Disamping banyak variable yang tak diharapkan muncul di tabs/menu yang kita buat, seperti background dan border, namun jika kita sedikit lebih cermat maka akan merasakan betapa sebuah horizontal drop menu atau horizontal dropdown menu tak dapat dibuat karena anak menu atau anak-anak menu yang seharusnya meluncur ke bawah tiba-tiba terlihat terpotong tanpa sanggup melewati post title. Sungguh situasi yang sangat tidak mengenakkan dan sering membuat pengguna putus asa. Bahkan...