Single level dropdown menu ala Dynamic View Blogger Templates

Single level dropdown menu - blogger

Single leve; dropdown menu ala dynamic view blogger templates adalah sebuah menu horizontal dengan animasi saat membuka dan menutup yang disertai animasi putar pada arrow up/down yang terletak di menu title. Animasi pada membuka dan menutupnya anak menu dan arrow up/down dibuat menggunakan css3 transition dan css3 transform. Animasi single level dropdown ala menu template tampilan dinamis akan bekerja secara sempurna di browser yang sudah support terhadap css3. Mozilla Firefox merupakan browser yang paling sempurna menampilkan fungsi animasi single level dropdown menu ini.

D E M O

Super Animated CSS3 Navigation Menu

Membuat navigasi menu horizontal ini amatlah mudah dan cepat. Yah ... ini semua karena hanya kode CSS yang digunakan. Kode tak seberapa banyak tapi coba sampeyan lihat bentuk hasil akhirnya. Wuh ... nggak ngira, dah, klo navigasi menu ini tanpa jQuery, motool atau javascript yang lain. Animasinya, mbul ... Sangar, kata orang. Gimana? Mo lihat tampilannya? Ho ... ho ... Jangan lewatkan pokoknya. Nih, buka link demonya dan cermati sensasionalnya si menu.

D E M O

Kode CSS Super Animated CSS3 Navigation Menu

Panduan BloGGeR Cara Membuat DIV Tab View

Tab view sangat tepat digunakan blog yang mempunyai materi posting bervariasi. Tab view tak ubahnya sebuah box menu yang dibagi dalam beberapa tab. Masing-masing tab mempunyai lebar sama dengan box yang digunakan dan hal seperti ini sangat berguna karena setiap tab bisa memanfaatkan lebar kolom secara maksimal. Banyak cara bisa digunakan untuk membuat tab view, namun kali ini kita coba membuat dengan bantuan sebuah javascript yang sangat sederhana namun mampu melakukan dungsinya secara sempurna.

Tab view ini terhitung sangat irit dalam penggunaan KODE CSS ataupun script namun demikian mampu memberikan penampilan yang sangat istimewa. Tentu saja dengan iritnya penggunaan CSS dan script ini akan sangat menguntungkan terhadap stabilitas loading blog.
D E M O

Pretty Simple Tab Navigation

Banyak orang selalu mengatakan; Lihat dulu baru beli ! Prinsip seperti itu kelihatannya sangat tepat untuk Simple Tab ini. Mungkin begitu mendengar atau melihat makna dari kata tersebut yang muncul di benak pikiran adalah sebuah tab yang tak mungkin akan menarik untuk dilihat apalagi digunakan di blog. Oleh karena itu tak perlu basa-basi karena ini bukanlah ajang iklan rokok. Seperti orang bilang "tak kenal maka tak sayang", maka silahkan buka dulu lewat demo ! Tolong setelah membukanya buanglah anggapan bahwa sederhana sama artinya dengan tidak cantik dan menarik !

D E M O

Langkah untuk membuat Simple Tab :

Hidden Menu Tab Menu - Menu Tersembunyi

Meskipun Hidden Tab Menu ini hanya menggunakan KODE CSS dan CSS3, namun ternyata bisa memberikan penampilan yang sangat memuaskan. Sangat kompatible untuk semua browser dan dapat dengan cepat aplikasikan disetiap blog.

D E M O

Bullet Image Link Hover

Apabila biasanya setiap list hanya menggunakan style type circle, disc, square, huruf dan angka, melalui javascript dan CSS di bawah, maka style type list akan dengan mudah kita rubah menjadi berbentuk gambar. Satu yang menjadi kelebihan penggunaan fungsi script ini adalah setiap list dapat menggunakan gambar yang berbeda diseuaikan dengan item apa yang akan disampaikan pada setiap listnya. KLIK DEMO untuk melihat bentuk tampilan Bullet Image Link Hover!

D E M O

Cara membuat Auto Hide Box :

Horizontal List

Seperti bentuk list yang lain, horizontal list hanya berbeda karena list tersusun dalam deret horizontal, dimana dalam satu deret/baris bisa terdiri dari beberapa buah list. Anda bisa memanfaatkannya untuk memasang link, baik berupa lin menu ataupun link yang lain. Untuk menambah link, anda perlu membuat list baru mengikuti list yang sudah ada. Tambahkan tag "a" serta beberapa variable kelengkapannya agar lebih maksimal dalam penggunaan.

Horizontal Sliding Menu - Simple Larva Menu

Horizontal Sliding Menu atau simple larva menu merupakan sebuah slide menu horizontal yang terbangun dari penggabungan kinerja CSS dan javascript. Untuk sebuah slide menu, dengan penggunaan kode css dan javascript sesederhana ini menjadi sangat menarik dan ditanggung tidak akan membebani loading blog. Penekanan akan loading blog menjadi sangat perlu karena akan menjadi sangat fatal pengaruhnya apabila blog menggunakan terlalu banyak KODE dengan muatan 'nggedabyah', maka semakin lama dengan intensifnya posting ditanggung beban yang harus ditanggung saat loading menjadi semakin bertambah besar yang menjadikan loading menjadi sangat lambat. Loading yang sangat lambat tentunya akan sangat berpengaruh terhadap intensitas pembaca blog untuk mampir menikmati sajian yang dengan susah payah sudah kita postingkan. Anda tinggal menyimpan KODE CSS dan javascript di bagian head dan merubah xHTML untuk slide menu sesuai kebutuhan posting blog kemudian menyimpannya di bagian body atau bisa dilakukan dengan menyimpannya di Edit HTML -> Elemen Laman -> Tambah Gadget -> HTML/Javascript. Mungkin anda tertarik untuk melihatnya terlebih dahulu sebelum menggunakan Horizontal Sliding Menu ini ? Silahkan KLIK DEMO untuk melihatnya! (maaf masih dibuat karena demo yang lama udah di banned).

D E M O

Cara Membuat Horizontal Roll Menu

Roll Menu ini merupakan menu yang tersembunyi di atas navbar. Sebuah controll yang bertuliskan "Menu" dibuat dibagian atas-kanan halaman dan berfungsi untuk membuat menu yang tersembunyi meluncur ke bawah. Sebuah controll yang lain berfungsi membuat menu kembali meluncur menghilang. Contoll yang satu ini dibuat tak terlihat akan tetapi didesain mudah tersentuh cursor secara tak sengaja. Posisinya tepat di bawah garis terluar menu bagian bawah dengan ketinggian controll sebesar 30px. Untuk membuat roll menu diperlukan javascript, kode css, css3 dan xHTML.

Cara pembuatan Roll Menu

Cara membuat Vertical Menu with Descriptions

Vertical menu ini mampu menghadirkan deskripsi menu dengan effek css3. Effek css3 akan terlihat saat cursor berada di atas link menu. Dengan digunakannya sebuah boks deskripsi menu dengan kapasitas cukup longgar, maka anda dapat menyampaikan beberapa hal terkait menu title yang diharapkan membuat pengunjung blog merasa penasaran sehingga tergelitik untuk mengetahui isi menu tersebut.

D E M O