Horizontal Tab menu with Search Form

Horizontal tab menu ini telah dilengkapi dengan sebuah search form yang terpadu. Posisi search form ada disisi sebelah kanan dan search form ini dibangun dengan menggunakan kode css3 transition yang berfungsi membentuk animasi saat search form di klik. Untuk melakukan pencarian tuliskan kata yang berkaitan dengan topik yang akan anda cari kemudian lanjutkan dengan klik "enter".

Horizontal Menu 3 dimensi

Cukup fantastis untuk sebuah menu yang hanya menggunakan kode css. Inilah yang bisa kita lakukan saat ini setelah css3 transition, css3 transform dan css3 animation makin mendapat dukungan dari browser. Berbagai desain menarik yang hanya dibuat dengan kode css (tanpa satupun javascript!) akan banyak kita temukan. Dengan hanya enggunakan kode css tentu saja akan sangat berpengaruh terhadap beban kinerja loading blog. Jauh lebih enteng dan lebih cepat dibanding dengan menggunakan javascript bertumpuk.

Slide/Larva menu css3

Mungkin anda pernah melihat atau bahkan menggunakan sebuah menu horizontal yang sering disebut sebagai larva menu atau slide menu. Jika sebelumnya kita harus menggunakan jQuery, maka kali ini kita hanya butuh css3 animation dan css3 transition. Tak banyak kode css yang digunakan namun hasil yang diperoleh sangatlah menakjubkan. Anda boleh membandingkannya dengan yang dibuat menggunakan javascript atau jQuery!

Animated Single Level dropdown menu (2) with css3 transition

Animated single level dropdown menu ini sekalipun terlihat hampir sama dengan menu sebelumnya (Animated Single Level dropdown menu (1) ), namun sebenarnya menggunakan teknik dan trik pengolahan kode css yang sedikit berbeda. Jika anda cermati dengan baik, maka akan sedikit terlihat juga hasil yang berbeda. Anda akan melihatnya ketika cursor diarahkan kesetiap menu dengan berbagai perpindahan. Mungkin anda sedikit bingung melihat perbedaannya, namun jika lebih cermat dan seksama pasti akan kelihatan juga. Mana yang lebih baik di antara kedua menu ini? Ha... tentu saja terserah anda karena semua tergantung selera!

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".

Animated Single Level dropdown menu for blogger (1)

Single level dropdown menu merupakan menu horizontal yang dilengkapi dengan animasi yang dibuat dengan css3 transition dan css3 transform. Sebuah single dropdown menu yang hanya dibuat dengan kode css (tanpa javascript). Anda bisa menlihat dan mencoba animasi yang tercipta dengan mengarahkan cursor di setiap link horizontal menu yang ada di atas posting.

Create a horizontal tab menu with colorful background

Ada beberapa cara untuk membuat tab menu horizontal di blogger menjadi tab menu horizontal/navigasi menu horizontal dengan background beraneka warna seperti yang terlihat di atas. Salah satunya adalah dengan mengggunakan css selector (:nth-child(n)). Memanfaatkan css selector membuat penggunaan kode menjadi lebih simpel dan praktis karena tak perlu melakukan perubahan atau penambahan pada xHTML default template. Modifikasi hanya dilakukan dengan menambahkan kode css di atas kode ]]></b:skin>. Sangat mudah dan dapat dilakukan oleh siapapun karena tingkat kesulitan yang relatif sangat kecil.

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="...">).

Blogger Tabs with Bouncing Effect

Bloggertabs dengan efek bounce merupakan pengembangan dari animated tab with css3 transition dan Colorful tabs. Anda bis melihat kedua macam tab tersebut melalui link di bawah ini:

• Animated Blogger Tabs with css3 transition
• Colorful Tabs on Blogger

Bouncing effect dibuatmenggunakan css3 animation sehingga tabs ini bisa dibilang bebas javascript tapi penuh efek dan animasi serta colorfull

Animated horizontal tab menu with colorful background

Yang membedakan tab ini dengan tab sebelumnya (Animated Blogger Tabs with css3 transition) adalah pada warna background setiap tab yang berbeda. Perbedaan background tab tidak dilakukan dengan menambahkan sebuah class baru, namun memanfaatkan css selector. Anda dapat melihat kodenya dan melakukan perubahan background pada kode css yang disertakan di bawah (jika menginginkan warna background tabs berbeda!).

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.

Multilevel Dropdown menu model click-1

Hanya dengan kode css dan yang berbeda dari multilevel dropdown menu ini adalah penggunaan fungsi klik untuk mengaktifkan menu. Anak menu akan terlihat bukan melalui model hover, seperti yang sudah biasa kita buat dan lihat, namun dengan cara "klik" di menu "induknya". Metode klik ini sama sekali tanpa javascript. Tetap menggunakan kode css. CSS dan CSS3 menjadi kunci terbangunnya menu spesial ini.

Demo menu bisa anda lihat tepat di atas posting ini!

CSS3 Accordion

Sebuah vertical Accordion dengan kode css & css3 yang sangat luar biasa. Memanfaatkan click function untuk membuka setiap bagian accordion sehingga accordion ini menjadi sangat mempunyai nilai lebih karena animasi saat membuka dan menutup-nya tak ubahnya seperti sebuah accordioan yang dibuat dengan javascript, jQuery atau mootool.

Multilevel dropdown horizontal menu for blogger-4

CSS Multilevel dropdownmenu dengan efek animasiyang dibuat melalui css3 transition. Menu dropdown multilevel ini menggunakan ukuran font sebesar 14px. Dengan dropdown menu ini anda dapat memuat puluhan menu hingga ratusan menu bergantung pada pengembangan penggunaan dan fungsi menu. Jika anda menghendaki bentuk menu yang lebih sempit, anda dapat menggunakan font dengan ukuran yang lebih kecil. Ketinggian menu juga dapat anda sesuaikan dengan merubah variable css yang berhubungan dengan tinggi menu.

Multilevel dropdown horizontal menu for blogger-3

Masih mengandalkan kode css tanpa satupun javascript, namun tetap menarik dan penuh pesona. Inilah css meultilevel dropdown menu yang mengandalkan permainan background gradien css3.
Warna hover menu dapat anda rubah dengan sedikit merubah warna background dan class yang digunakan. Anda bisa lihat pada kode berikut dan kode yang bertanda warna merah :

Multilevel dropdown horizontal menu for blogger-2

CSS multilevel dropdown menu dengan backgrund hover yang dengan mudah dapat dirubah. Anda tinggal merubah class dan menambah warna yang diinginkan maka sebuah background dengan warna berbeda pada hover setiap menu segera dapat terlihat.
Bentuk kode css yang harus dirubah :
.GRmultileveldd03agst12.lime li:hover > a {background-color:lime;}
Bentuk kode html yang harus disesuaikan:
<div class="GRmultileveldd03agst12 lime">

Multilevel dropdown horizontal menu for blogger-1

Sebuah dropdown menu css yang sangat cantik dilengkapi animasi melalui hover css3 transition. Dropdown mwnu horizontal ini terbilang sederhana dalam penggunaan kode css namun memberikan hasil yang cukup otimal dengan tampilan sangat menarik.

Demo dapat anda lihat di bawah header blog (di atas posting).

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.

Horizontal Dropdown menu for blogger-2

Dropdown horizontal menu for blogger-2 hanya menggunakan kode css dan merupakan dropdown menu horizontal 2 tingkat. Dropdown menu dilengkapi kode css3 transition untuk memberi sedikit efek pada hover. Dua buah backgound image berfungsi untuk memberi penampilan yang lebih menarik dan untuk fungsi di IE. Anda dapat membuat anak menu jatuh di posisi sebelah kiri atau di kanan agar dapat menyesuaikan menu dengan lebar halaman blog. Pada dasarnya setiap kelompok menu dibuat terlihat disebelah kanan, namun dalam menu dropdown ini juga ditambah sebuah class "kiwo" untuk membuat kelompok menu keluar di sebelah kiri ketika hover bekerja. Kode css dan xHTML| disertakan di bawah ini.

Multilevel dd menu for blogger-1

Multilevel dd menu for blogger-1 merupakan dropdown menu dengan menggunakan kode css. Memanfaatkan secara maksimal listing li dan ul serta didukung dengan penggunaan kode css3 seperti border-radius dan css3 transition. Dengan penggunaan background yang sangat minimalis dari background rgba sehingga menampilkan efek transparansi. Menu horizontal ini sudah dilengkapi dengan css reset untuk tab blogger yang bertujuan untuk mendapatkan fungsi dropdown secara penuh. Dengan css reset maka anda tak akan kesulitan untuk mendapatkan hasil optimal tanpa terhalang kode css default tabs blogger yang sering menjadi pengganggu untuk membuat menu dropdown horizontal di bawah header blog.

Menu Horizontal alaTemplate Dynamic View

Jika anda pernah menggunakan template dynamic view, anda pasti akan mengenali horizontal dropdown menu yang disertakan di dalamnya. Menu ini sangat sedrhana namun cukup menarik untuk digunakan sebagai pelengkap blog. Jika di Template dynamic view atau tampilan dynamis mungkin dibuat menggunakan javascript, dalam dropdown menu yang akan kita buat hanya menggunakan kode css. Anda bisa melihat bentuk dan tampilan serta cara kerja menu ini dengan mengarahkan cursor anda di atas posting, di bawah header blog.

Simple CSS dropdown menu for blogger-1

Ini adalah sebuah dropdown menu sederhana yang cantik untuk melengkapi blog anda. Hanya menggunakan kode css yang dipadu dengan css3. Tak banyak kode yang digunakan. Jika selama ini anda mengalami kesulitan untuk memasang dropdown menu di bawah header blog, inilah menu yang tepat yang langsung bisa berfungsi dengan baik tanpa kendala. Anda dapat memasang menu setinggi yang anda suka tanpa perlu kuwatir anak menu tak muncul atau hilang ketika menyentuh halaman posting.

Untuk menggunakan menu ini anda harus mengcopy css reset untuk blogger tabs yang ada di posting sebelumnya. Anda bisa buka link di bawah ini untuk membuka postingnya:
CSS Reset For Blogger Tabs

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...

Blogger Horizontal Tab Menu

Ada beberapa cara untuk membuat navigasi menu horizontal menu di blogger. Satu diantarannya adalah menggunakan fitur "Laman/Pages" yang terletak di Basbor/Dasboard. Melalui fitur ini anda dapat menampilkan sebuah alamat web/blog, alamat posting di post page dan posting yang dibuat di halaman statis. Setiap menu akan berisikan nama/judul/title yang dibuat melalui fitur "laman/page" yang di dalamnya berisi URL/alamat tertentu sesuai dengan alamat yang disimpan/digunakan.

D E M O

Anda bisa melihat tab horizontal yang dibuat melalui "fitur Laman/Pages" tepat di atas posting ini. Tab menu berisikan beberapa alamat web dan alamat posting di halaman statis. Coba klik untuk mengetahui kinerja tab menu horizontal (navigasi horizontal) tersebut.