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

Tabs menu Horizontal dg Background Aneka Warna

Ada dua cara untuk membuat tabs menu horizontal blogger dengan background beraneka warna, dan ini adalah cara yang pertama. Agar setiap tab menu mempunya warna background berbeda dengan warna background menu yang lain, setiap link dibuat mempunyai class berbeda yang masing-masing mempunyai background berbeda warna. Jika anda menginginkan warna teks link berbeda disetiap menu, andapun bisa menambahkannya.

D E M O

Membuat Tanggal Posting ala Dynamic View Blogger Templates

Membuat date header/tanggal posting ala Tampilan Dinamis/Dynamic View Blogger Templates.

Berbagai macam bentuk tanggal posting dpat kita buat dan tampilkan didalam blog. Jika dibeberapa waktu sebelumnya kita sudah banyak jumpai tutorial blogger tentang "cara membuat tanggal posting dalam bentuk icon calender", maka kali ini kita akan membuat "tanggal posting atau date header ala template blogger Tampilan Dinamis/Dynamic View" seperti yang terlihat pada image/gambar disamping.

Tanggal posting seperti yang ditampilkan Dynamic View Blogger Template mempunyai bentuk yang terlihat berbeda dari bentuk tanggal posting yang lain. Jika kita arahkan cursor di atas tannggal Tanggal posting akan terjadi perubahan warna background (efek hover). Hal seperti ini bisa terjadi karena icon calendar tersebut tidak menggunakan background image namun memanfaatkan border property. Hover efek pada borderlah yang kemudian menciptakan perubahan warna background.

Buat Variable Definitions u Background, Teks & Border Blogger Threaded Comment

Sebuah cara untuk mempermudah memilih jenis font, warna teks, warna background dan border di kotak komentar blogger. Dengan membuat sebuah variable definitions yang berkaitan dengan ke empat variable di atas, maka blogger akan lebih mudah mengganti font, warna teks, background dan border kotak komentar dengan memanfaatkan fitur Ubah suaian » Perancang Template Blogger. Jika sebelumnya anda hanya bisa merubah beberapa variable deperti warna background header, body, font posting, sidebar dan beberapa yang lain, maka dengan adanya variable definitions kotak komentar akan ada tambahan item kotak komentar ("GR Kotak Komentar") yang berisi pilihan font, warna font, background dan border, seperti yang dapat anda lihat di gambar (Silahkan klik gambar untuk memperbesar)

Membuat Efek Teks Berjalan - Marquee Effect dg css3 Animation

Selama ini untuk membuat teks berjalan kita selalu menggunakan javascript atau efek marquee, kali ini kita akan membuat dengan cara berbeda. CSS3 animation yang kini telah didukung secara merata oleh hampir semua browser akan kita manfaatkan untuk membuat sebuah efek teks berjalan yang cukup menarik. Kode css juga telah dilengkapi dengan css3 transition untuk membentuk hover efek yang lebih menarik ketika cursor diarahkan diatasnya. Agar efek teks berjalan ini juga bisa dimanfaatkan sebagai teks link, maka disertakan juga sebuah fungsi yang bertujuan untuk membuat teks berhenti berjalan saat cursor berada di atas teks. Anda bisa menggunakan kode css ini dalam blog dengan menyimpan melalui "Dasboard - Page Elements - Add a Gadget - HTML/Javascript" atau di atas kode ]]></b:skin> yang dapat dilakukan melalui box Edit Template "Dasboard - Design/Rancangan - Edit HTML". Jika kode css disimpan di atas kode ]]></b:skin> silahkan hilangkan tag pembuka & penutup style-nya (<style type="text/css"> dan </style>).

Create Animation on Blog Title with css3 Animation

Menganimasikan blog title di template blogger dengan memanfaatkan css3 animation adalah proyek selanjutnya setelah kita buat efek warna pelangi pada hover link yang juga hanya menggunakan kode css3 animation. Yang kita maksudkan dengan posting kali ini adalah Cara membuat animasi pada blog title (nama blog) dengan menggunakan css3 animation" atau "Create Animation on Blog Title". Ada beberapa variasi animasi yang akan kita buat, silahkan anda pilih yang dirasa cocok. Animasi pertama hanya berupa pergerakan blog title kearah kanan & kiri, yang kedua disertai perubahan warna teks, yang ketiga disertai animasi membentuk sudut & perubahan warna, sedang yang ke empat ada penambahan animasi berupa gerak memutar (rotasi).

Hover Link Warna Pelangi - Rainbow Color Effect with css3 Animation

Dalam bulan-bulan terakhir ini Opera telah mulai support terhadap css3. Sebuah kemajuan yang sangat menggembirakan yang mampu menggugah semangat baru untuk kembali berkarya. Yah...., selama ini gubhugreyot sama sekali memang belum mempostingkan desain atau tutorial yang berkaitan dengan css3 animation, dimana penundaan posting tentang css3 ini karena belum semua browser besar mendukung secara penuh. Kini setelah Opera juga sudah support penuh (hanya tinggal IE yg belum mendukung css3), maka tak ada lagi kendala & hambatan untuk membuat tutorial ataupun desain yang melibatkan penggunaan css3 animation. Untuk mengawali posting tentang css3 animation, kita akan membuat sebuah efek warna pelangi pada hover teks link yang hanya menggunaakan kode css. tentu saja dalam hal ini adalah css3 animation. Bagi sobat-sobat blogger yang selama ini menggunakan javascript dan ingin merubahnya menjadi dalam kode css, silahkan ikuti tutorial berikut.

Cara Menyimpan Kode HTML di Template » Edit HTML "New Blogger Interface"

Perubahan tampilan baru blogger dalam bentuk "New Blogger Interface" atau "Antarmuka Blogger Baru" membawa berbagai perubahan baik bentuk, kelengkapan ataupun tata cara penggunaan fiturnya. Salah satu yang berubah adalah langkah "Edit Template" atau "Edit html". Tak terlalu banyak memang perubahan yang terjadi, namun demikian agar tutorial semakin lengkap dan tak ketinggalan jaman (selalu up to date), kita akan lengkapi juga dengan panduan langkah menyimpan kode html melalui box Edit HTML di "New Blogger Interface".

Upgrade "Old Blogger Interface" ke "New Blogger Interface"

Create 404 error page in Blogger with simple flash game - Membuat halaman error 404

Menampilkan game flash sederhana di halaman Error 404 Blogger.

Banyak hal dapat kita lakukan "di halaman dengan alamat tak jelas" atau "halaman error 404" yang juga disebut sebagai "404 error page". Halaman yang akan dijumpai di blogger ketika sebuah alamat tak bisa ditemukan karena beberapa sebab, seperti misalnya:

1. Seseorang menuliskan alamat (URL) secara tak benar.
contoh:
- http://gubhugreyot.blogspot.com/2010/08/juery-lightbox.html harusnya:
- http://gubhugreyot.blogspot.com/2010/08/create-juery-lightbox.html
2. Judul posting yang telah di hapus. Alamat sebuah posting sekalipun telah di hapus akan tetap tersimpan dalam mesin pencari google, sehingga ketika posting dihapus alamat ini akan tetap ada sedangkan postingnya takkan pernah ditemukan lagi.
Contoh silahkan buka link berikut:
- http://gubhugreyot.blogspot.com/2012/04/best-solution-when-reply-comment-button_12.html

Membuat halaman error 404 (halaman tak ditemukan) menjadi sebuah bagian yang menarik dari sebuah blog bisa membuat seorang pengunjung menjadi semakin tertarik untuk membuka lebih banyak lagi posting. Anda sebaiknya menampilkan kata-kata yang bersahabat dan membuat pengunjung merasa nyaman sekalipun halaman yang di cari tak ditemukan. menampilkan sebuah file flash dalam halaman error 404 adalah sebuah improvisasi yang bisa lebih dikembangkan lagi. Dalam posting ini telah kita sediakan kode css berikut xHTML untuk membuat halaman error 404 yang didalamnya disertakan game sederhana dalam bentuk file flash. Anda dapat memilih menggunakan kode css dan xHTML-2 atau hanya menggunakan xHTML-1. Jika anda gunakan xHTML-1, maka anda tak perlu lagi menggunakan kode css. Semua sudah tersimpan dalam javascript yang didalamnya berisi file game flash serta kode css. D E M O

Cara membuat halaman error 404 dengan game flash-1:

Playing with Animated Flying Twitter Bird » with css3 effects & animated .gif

Dengan widget Animated Flying Twitter Bird yang telah mengalami modifikasi melalui penambahan kode css3 ini anda dapat sedikit bermain-main menangkap si burung twitter terbang. Si burung twitter terbang akan tetap seperti biasanya dengan terbang mengelilingi halaman blog, hanya anda dapat mencoba menangkapnya kemudian mempertahankan agar tetap bersama cursor hingga si burung manis berhenti. Atau cobalah tangkap tepat saat berhenti. Ketika burung twitter masih terbang dan tangkapan anda tepat maka burung twitter akan berhenti dan berusaha lepas disertai effek zoom serta munculnya burung twitter berbeda berbentuk animasi gif.

Javascriptnya silahkan anda copy melalui link di bawah ini dan segera simpan melalui add a gadget atau bisa juga diletakkan di bawah ]]></b:skin> atau di atas <head> atau di atas </body>

Widget Burung Twitter Terbang dg Effect css3

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu PON, April, 14, 2012

» Happy Blogging - gubhugreyot «

Sumber:

- Autor : Florian Buenzli, 2010
- For blogger by : Harrys, http://www.way2blogging.org, 2011
- With css3 effects by : gubhugreyot, http://gubhugreyot.blogdetik.com, April 2012

Solusi jitu ketika button reply comment tak berfungsi - Blogger New Threaded Comments

Kasus tidak berfunginya button reply comment di New Blogger Threaded Comment ternyata tak hanya dialami oleh satu atau dua blogger saja. Sangat banyak yang mengeluhkan permasalahan ini, termasuk satu diantaranya 'gubhugreyot sendiri". Salah satu blog yang aku gunakan selama hampir dua bulan aku biarkan tanpa fungsi reply comment yang normal fungsinya. Button teks reply comment memang tetap "nyanggong" di tempatnya, tapi ketika di klik tak ada reaksi apapun yang muncul. Button reply comment Blogger New Threaded Comments tersebut tetap diam membisu "sekalipun di embat pakai martil". He ... benar-benar bikin jengkel dan putus asa! Dus ... akhirnya setelah dua bulan satu solusi akhirnya aku temukan juga. Javascript Threaded Commentlah yang menjadi masalah mengapa si button reply tak dapat bekerja dan diam membisu sekalipun "di klik beribu kali".

CSS only: Displays "Admin and Signature" on Author Comment in Blogger New Threaded Comments

Mengembangkan apa yang sudah terpostingkan sebelumnya tentang "Cara membuat background berbeda pada Author Comment di Blogger Threaded Comments menggunakan kode css (Only CSS: Hightlight Author Comment in Blogger Threaded Comments)", kali ini kita akan menambahkan sebuah background image yang berupa teks "Admin" atau "tanda tangan pemilik blog". Penambahan "Admin" atau "Tanda Tangan Author" pada Author Comment akan membuat setiap tanggapan komentar yang diberikan author (pemilik blog-penulis) mempunyai warna background berbeda dan disertai "teks Admin" atau "tanda tangan" di sisi sebelah kanan bawah. Anda bisa melihat contohnya (demo) dengan membuat sebuah komentar di posting ini dan kemudian melihat tanggapan komentar yang nantinya akan kami berikan.

CSS Only: Highlight Author Comment Blogger's New Threaded Comments

Setelah beberapa waktu berkutat dengan keruwetan "Bloggers New Threaded Comments", akhirnya ketemu juga sebuah solusi untuk membuat warna background berbeda pada Author Comment di sistem Threaded Comments Blogger yang baru. Jika pada beberapa tutorial yang kini banyak dipostingkan oleh blogger sejagad dibuat menggunakan jQuery (jQuery Highlight Author Comment Blogger's Threaded Comments - dibuat oleh blogger India?), melalui gubhugreyot "Tutorial Blogger | gubhugreyot ini kita akan membuatnya hanya menggunakan kode CSS.

Menggunakan kode CSS untuk membuat "Highlight Author Comment Blogger's New Threaded Comments" tak hanya sekedar untuk membuat warna background berbeda pada author comment. Dengan menggabungkan sebuah image (background image) dapat juga ditampilkan "kata Admin" atau berbagai teks lain seperti misalnya "tanda tangan author", baik dalam bentuk teks ataupun image (melalui background image). Bahkan kode css ini masih bisa dikembangkan lagi dengan menggabungkan css2 dan css3 untuk menciptakan beberapa bentuk animasi melalui hover effect. Satu hal nyata yang membuat penggunaan kode css mempunyai nilai lebih atau keunggulan dibandingkan jika menggunakan jQuery adalah pada pembebanan loading blog. jQuery akan menambah beban blog jauh lebih besar dibandingkan kode css. Diluar hal tersebut "mengembangkan penggunaan kode CSS akan jauh lebih mudah dilakukan siapapun dibandingkan javascript". Dari pertimbangan di atas, kini menjadi hak anda untuk menentukan dan memilih di antara keduanya. Mo pakai jQuery atau yang hanya menggunakan kode CSS?!

Jika anda ingin melihat hasilnya, silahkan coba berikan komentar di posting ini dan untuk selanjutnya akan kita berikan tanggapan komentar agar anda bisa melihat seperti apakah tampilan "Highlight Author Comment Blogger's New Threaded Comments" yang dibuat hanya dengan kode css.

Trick Buat Blog/Template jadi Threaded Comments

Yang dimaksud membuat template atau blog menjadi blog dengan system threaded comment adalah apabila blog/template yang anda gunakan belum dilengkapi dengan button teks yang berfungsi untuk "membalas komentar". Button teks ini terletak tepat di bawah komentar dalam comment box. Threaded Comment adalah barang yang masih cukup baru bagi blogger/blogspot. Threaded Comment kini membuat comment box blogger menjadi sama seperti yang ada di wordpress.

Threaded comment sudah disertakan pada Blogger Template Designer (New Blogger Template). Untuk Template Tata Letak (Layout Template) dan Template Klasik dan beberapa template diluar template blogger (hasil download free blogger template) masih belum menggunakan system threaded comment. Agar template menjadi threaded comment beberapa kode css dan xHTML harus di tambahkan (modifikasi template).

D E M O

Anda bisa melihat dan sekaligus mencoba threaded comment hasil modifikasi yang dilakukan terhadap blog ini dengan cara memberi tanggapan komentar melalui button text "balas" (Modifikasi dilakukan terhadap Template Tata Letak - Layout Template - Template Lama yang sudah digunakan sejak tahun 2009).

Template non-Threaded Comment :

Buat Widget Related Posts: Pancing Pengunjung Buka Lebih Banyak Posting

Widget Related Post bekerja berdasarkan label yang dibuat blogger saat posting, sehingga ketika sebuah label digunakan pada banyak posting maka "related posts" akan memuat semakin banyak daftar posting terkait. Hal seperti ini membuat sebuah widget related posts menjadi terasa "sangat pantas dan layak" karena dapat "menjadi salah satu sumber dibukanya lebih banyak posting oleh pengunjung". Jika banyak posting anda mempunyai kwalitas yang baik, dapat dipastikan salah satu atau beberapa link yang terdapat di boks related posts akan "di klik". Menggunakan widget related posts juga memberi nilai lebh sepanjang posting terkait yang ditampilkan tidak terlalu banyak karena akan semakin memudahkan pengunjung memilih posting.

Membuat widget related posts sebenarnya tidaklah sulit. Yang terutama diperlukan adalah ketelatenan untuk memasang dan menyimpan kode yang digunakan, terutama xHTML yang harus disimpan di bagian body diantara tag pembuka dan penutup body (<body> dan </body>). Jika anda menginginkan lebih banyak lagi posting dibaca pengunjung, silahkan ikuti panduan cara menggunakannya di bawah ini:

O..., ya ..., sebelum dilanjut silahkan buka demonya terlebih dahulu. Lihat di kolom posting bagian terbawah (di atas box komentar!

D E M O - 1D E M O - 2

Pasang icon di post-author, post-labels, post-timestamp dan post-comment-link

Jika anda mencermati di dalam box yang terletak di bawah posting maka akan kita lihat bahwa disana terdapat beberapa data yang berkaitan dengan posting.

1. Data post autor :
   Berisi nama si penulis posting atau pemilik blog.
2. Data penerbitan posting:
   Berisi data waktu dan/atau tanggal posting.
3. Komentar (Comments) :
   Berisi data jumlah komentar posting.
4. Labels :
   Label berisikan data label yang ditentukan penulis sebelumnya ketika posting dibuat dan diterbitkan.

Seluruh item data inilah yang akan kita tambah dengan 4 buah icon dengan posisi icon tepat di depan teks. Silahkan anda arahkan cursor ke screenshoot di atas untuk memperbesar gambar. Atau mungkin akan lebih jelas lagi apabila anda buka demo melalui link di bawah ini:

D E M O

Membuat Icon dg Efek css3 di Link List Label Blogger

Link pada widget label blogger biasanya ditampilkan apa adanya dengan penanda link hanya berupa sebuah penada default yang dihasilkan dari sebuah kode css "list style". Penanda ini biasanya berbentuk cyrcle, disc atau square. Ada cara untuk memberi penanda setiap link list widget label agar berbeda dan bisa dibuat seasuai selera. Sebuah background image dapat kita manfaatkan dan anda dapat secara bebas membuatnya dalam rupa apapun. Icon kecil ini sebaiknya berukuran 10px (height) hingga 16px (height) dengan perhitungan font yang digunakan sebesar 12px atau 11px.

D E M O

Sekalipun dengan merubah penanda link dalam bentuk icon sudah mampu memberi citarasa berbeda, namun apabila kita sedikit menambah kode css3 ke dalamnya tentunya kan menjadi lebih menarik lagi. Efek gerak serupa animasi yang tercipta melalui css3 transition akan membuat icon bergeser ke arah kanan ketika cursor diarahkan di atasnya dan kemudian kembali lagi ketempat semula ketika cursor dipindahkan. Gerak animasi icon link list seperi ini dihasilkan dengan mempermainkan padding atau margin dan css3 transition. Kode css yang digunakan sebagai berikut:

Menampilkan Profil Pengunjung dg Hover Effect

Hoo... ho.... sobat2 blogger tercinta. Kali ini kita akan bermain dengan kode css. Beberapa properti css akan kita manfaatkan dalam sebuah efek hover. Efek yang akan kita dapat cukup mengejutkan sekaligus menghibur, Javascript tidak kita butuhkan, hanya kode css saja bersama beberapa xHTML. Pada intinya, melalui hover effect kita mencoba mengubah atau menukar sebuah image agar ditampilkan sebuah image berbeda. Ya ... ini sangat menarik dan pasti membuat kalian suka atau mungkin saja tertawa sambil geleng-geleng kepala. Ya ... mungkin saja ... atau he ... he ... bisa jadi kalian justru malahan mengumpat nggak karuan. Yahh ... memang bisa2 saja karena segala kemungkinan bisa terjadi.

Sebelum lihat demo berikut kode css dan xhtml serta satu sampel xhtml yang sudah lengkap dengan imagenya, sebaiknya persiapkan dulu cara menyimpan kode css atau xhtml-nya dengan membuka Spesial Tutorials yang terletak disebelah kiri halaman. Anda bisa mempelajari cara backup template, cara cepat cari kode html ataupun berbagai cara menyimpan kode di template. O ... ya ..., setelah buka demo dan mencoba hover effeknya, sampeyan jangan kaget jika image profil sampeyan terpampang dengan cantiknya di halaman blog. Yaaahh... pokoknya jangan marah klo lihat photo sampeyan hilang satu gara-gara tercuri dan tiba-tiba saja bisa muncul melalui efek hover. He ... jangan marah, ya?! Ha.... ha .... ha ...

D E M O

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Kamis    KLIWON, Maret, 08, 2012

» Happy Blogging - gubhugreyot «

Auto Post Thumbnail - Auto Readmore with CSS3 Effects

Auto read more pastinya akan sangan bermanfaat bagi semuanya. Dengan auto readmore yang berfungsi secara otomatis menciptakan read more berdasarkan jumlah karakter ini, maka tak perlu lagi ada kata, Aduh ...., read more-nya kelupaan!" Kata yang paling sering terdengar saat posting selesai dan diterbitkan.

Readmore otomatis ini juga tak sekedar read more biasa karena mengikut sertakan javascript yang berfungsi secara otomatis akan menampilkan thumbnail (image berukuran kecil) di setiap box posting dimana read more berada. Anda dapat mengatur ukuran thumbnail dengan merubah nilai width pada javascript. Jika anda menghendaki pengaturan ini sebaiknya lakukan pada desain yang pertama (standart). O,...ya,.. perlu diketahui bahwa kita akan buat 3 macam tampilan thumbnail yang berbeda.

Pilihan tampilan auto post thumbnail:

Cursor Circling Text Trail Teks Berputar

Cursor ini sebenarnya sangat menarik karena animasinya yang cantik serta mudahnya pengguna melakukan beberapa pengaturan ulang agar circling text trail dapat ditampilkan sesuai keinginan. Hanya satu hal yang terasa amat mengganggu, bahwa circling text trail yang berputar mengitari cursor terlalu sering jadi pengganggu ketika pengunjung mecoba melakukan aktivitas penting seperti copy atau membuka link.

Dalam posting ini kita telah lakukan sedikit perubahan pada javascript agar animasi yang tercipta tidak terlalu berlebihan sekaligus kita juga telah rubah posisi teks terhadap cursor agar sekalipun teks berputar ini selalu setia mengikuti cursor namun tidak lagi menjadi pengganggu yang merugikan. Anda bisa melihat dalam demo dimana terlihat animasi teks berputar sudah berpindah di bawah cursor.

D E M O