Energy Saving Mode CSS3 dg Kode CSS & Efek Lebih Simpel

Energy Saving mode yang dibuat menggunakan css3 ini mempunyai kode sekaligus efek lebih sederhana dibandingkan yang telah kita launcing pada bulan Oktober 2010. Cara membuatnya masih sama persis dengan posting terdahulu, hanya anda perlu mengganti seluruh kode CSS dengan yang baru. Satu lagi yang berbeda adalah pada penggunaan background image. Energy Saving Mode CSS3 kali sama sekali tidak menggunakan background image karena telah kita ganti dengan css3 background gradient.

D E M O

Energy saving mode pada demo menggunakan background gradient berwarna hijau, sedangkan yang akan kita buat berwarna hitam. penggunaan warna background hitam polos dimaksudkan memberi efek transformasi dan transisi warna saat energy saving mode terbuka (tersentuh cursor).

Demo : Energy Saving Mode CSS3 dg Kode dan Efek Lebih Sederhana

Trick Pasang Jam Digital di Header Blogger Template Designer

Jika pada beberapa saat yang lalu telah dibahas "Cara buat dan pasang jam digital di header blog" pada "Template Tata Letak", namun karena pada saat ini hampir semua blogger menggunakan "Blogger Template Designer (Perancang Template Blogger)", oleh karena itu agar lebih mudah dan cepat dipahami serta dapat segera terpasang di blog sampeyan, kita membahasnya sekali lagi.

D E M O

Buka link demo di bawah ini agar anda dapat melihat bagaimana jam digital ini mampu memberikan sensasi yang cukup menarik untuk sebuah blog.

Demo Jam digital di header blog

Menampilkan tips (tooltip) di widget Blog Archive - Blogger

Jika blog anda mempunyai lebar sidebar terlalu sempit dan widget Blog Archive terletak di situ maka teks link arsip blog akan bertumpuk-tumpuk karena lebar tak tercukupi. Atau mungkin teks link arsip blog menggunakan font berukuran kecil hingga untuk membaca setiap link harus memelototkan mata? Mengapa tidak anda coba menggunakan tooltip agar semua daftar posting di arsip blog terbaca dengan mudah?! Banyak keuntungan yang diperoleh dengan menampilkan tips di arsip blog. Selain pengunjung merasa lebih nyaman, andapun akan lebih mudah melakukan penataan widget archive. Mungkin saja widget tersebut dapat anda tambahkan properti css white-space:nowrap; agar teks link tidak bertumpuk ketika ruang archive sempit? Atau mungkin saja memang anda perlu memperkecil ukuran font-nya agar terlihat rapi?! Dalam gambar disamping (letakkan cursor di atas gambar untuk perbesar!) kita bisa lihat salah satu masalah yang terjadi saat widget blog arhive mempunyai lebar terlalu sempit. Setiap daftar posting menjadi bertumpuk sehingga daftar arsip tampak berderet begitu tinggi.

Ada dua kemungkinan berkaitan dengan upaya menampilkan tips di widget Blog Archive:

Membuat Header Blog dengan 3 Elemen

Header blog dengan 3 elemen akan lebih mempermudah pengguna saat ingin menampilkan berbagai widget (gadget), iklan, teks, image atau kode html lain ke dalam box header. 3 elemen header terdiri atas elemen header default yang berisi blog title dan blog description, elemen header kiri (baru) serta elemen header kanan (baru). Lebar elemen dapat dibuat sesuai selera dan kebutuhan dan diperhitungkan dalam persen. Elemen header baru kanan dan kiri akan mempunyai fungsi dan kegunaan tak berbeda seperti elemen-elemen yang telah tersedia sebelumnya, seperti elemen sidebar, main, crosscol atau footer.

Arahkan cursor ke arah screenshoot di atas maka akan terlihat 2 widget (slideshow dan profil) yang berada disamping kiri dan kanan header default blogger yang berisi blog title dan description title. Ke-2 buah widget (gadget) berhasil ditampilkan dengan sangat mudah setelah 2 elemen baru header kita buat. Bentuk penambahan elemen baru yang terdapat di Page Elements (Elemen Laman) bisa terlihat dalam screenshoot di samping!

Demo Penggunaan Elemen Baru di Header Blog

Dalam demo akan bisa dilihat sebuah gadget blogger (Tampilan slide - Album web Picasa) berhasil ditambahkan di header berkat elemen baru yang dibuat di bagian header. Blog demo ini menggunakan 1 buah elemen header baru di sebelah kanan!

Trick Buat & Ciptakan Page peel di Blogger

Mengapa aku katakan sebagai tips atau trik buat & ciptakan page peel? Mengapa tidak kita sebut saja "Tutorial Blogger cara membuat page peel di Blogger Template Designer?" atau mungkin "Panduan cara membuat dan memasang page peel?" He... he.. sampeyan tak perlu memikirkannya terlalu dalam. Ini hanyalah sekedar tips dan trick saja agar lebih banyak "teks" yang dapat dibaca mesin pencari. Bukankah lebih banyak diantara sampeyan semua yang menggunakan kata atau kalimat seperti "tutorial", "cara membuat" , "cara pasang" dan "panduan ....." saat melakukan pencarian (browsing)? Diluar itu ...? Ha... ha... tentu saja memang ada trick yang harus dipatuhi untuk membuat page peel.

Page peel yang pada dasarnya merupakan sebuah halaman berisi link dan biasa diletakkan pada pojok blog (atas, kanan, bawah, kiri) disertai animasi gerak melalui image dan file flash ini memang tak sekedar desain biasa. Desain page peel yang dibuat dalam bentuk iframe seperti yang akan kita buat ini memang membutuhkan penanganan khusus.

1. Harus menggunakan image dengan ukuran yang tepat.
2. Semua file flash (.swf) dan image harus diupload di file hosting. Anda bisa gunakan google sites (untuk file flash) dan di halaman posting blogger (file image).
3. Javascript yang digunakan harus dalam bentuk link sehingga sampeyan harus mengupload javascriptnya terlebih dahulu di file hosting (dapat dilakukan di google code atau google sites ).
   

D E M O

Agar lebih jelas bagaimana sebenarnya page peel yang akan kita buat, sampeyan bisa lihat demo-nya. Dalam demo telah disertakan juga javascript beserta link file flash dan image yang diperlukan untuk membangun page peel secara lengkap. Silahkan download file-file teersebut kemudian upload untuk digunakan di blog.

DEMO Page peel

Trick Spesial Buat Tab Menu Horizontal di Atas Header Blog

Selama ini jika sampeyan menggunakan widget blogger yang berfungsi sebagai tab menu horizontal (seperti widget Blog List, Link List dan Pages) letaknya pasti di antara header blog dan box posting serta sidebar. Memindahkannya ke bagian lain, seperti di atas header memang bisa dilakukan setelah elemen header dirubah menjadi maxwidgets='2' showaddelement='yes', namun hasil yang didapatkan tak akan sama dengan ketika widget tetap berada ditempat semestinya, yaitu di bawah header. Memaksakan pemindahan widget tab menu horizontal di atas header blog justru akan membuat tab menu terlihat dalam bentuk deret vertical dengan tampilan yang jauh dari semestinya. Hal seperti ini terjadi karena pada elemen header tidak menyertakan beberapa kode css yang berfungsi membangun sebuah horizontal tab menu.

Ada sebuah cara untuk membuat widget yang berfungsi sebagai tab menu horizontal tersebut agar bisa ditempatkan di atas header blog. Satu-satunya jalan adalah dengan membuat sebuah elemen baru yang dilengkapi dengan komponen pembangun tab dengan posisi di atas header. Dengan elemen baru ini nantinya di dalam elemen laman (page elemen) blog anda akan bertambah satu elemen baru tepat di atas header blog dengan kemampuan untuk mendefinisikan kode html yang terdapat pada widget blogger yang berupa horizontal tab menu, seperti halnya elemen yang terdapat di bawah header. Screenshoot disamping memperlihatkan pada elemen laman telah bertambah dengan 1 (satu) elemen baru di atas header.

D E MO

Tanpa melihat demo beberapa sobat blogger mungkin masih kurang memahami apa yang tersampaikan di atas. Agar lebih jelas bagaimana bentuk tab menu horizontal hasil penambahan widget Blog List blogger yang dibuat melalui Add a Gadget dengan posisi di atas header, silahkan buka dengan klik link demo di bawah ini.

D E M O widget Blog List di atas Header Blog

Trick Ampuh Pastikan Ukuran Background Header Blogger Template Designer

Membuat background image di header blog "gampang-gampang susah", tetapi juga "susah-susah gampang". Memilih dan menentukan "image (gambar)" yang akan dijadikan background header jelas-jelas adalah awal "munculnya penyakit bingung" yang bikin kepala mot-mot-an. Banyak memang gambar yang dapat kita cari dan temukan. He.... bagus-bagus lagi! Tapi, begitu saatnya harus menentukan satu yang dirasa cocok dan pas...., uah.... bingun (he..he... bingung, broer!). Mo yang bentuk gambar pemandangan, bunga nyang bru mo mekar, lukisan abstrak, photo monyet menari, kerbau lagi berak atau ..... gambar ayam jago ma betina nyang lagi main-kejar-kejaran? He... kalian ... nggak usah terlalu njelimet mikirnya. Ambil satu gambar, buat ukurannya yang pas lalu upload di blogger dan ... segera lihat hasilnya! And .... klo bosan ... he ... buat lagi yang baru! Hiii... gampang, toh. Satu persoalan nyang bikin bingun (e...eh ... kok bingun lagi, sory ... sory ...!!) teratasi sudah. Kemudian masih ada lagi persoalan baru. Gimana, ya, cara pasangnya?! Hoo... ini mah gampang. Login aja ke blogger kemudian lakukan "Edit pada elemen header di Page Elements (Elemen Laman)". Habis ini baru satu lagi persoalan baru muncul dan benar-benar bikin kepala sedikit "mo pecah". Berapa sih sebenarnya ukuran width dan height yang diperlukan untuk "si background header blog?".

Bagi kalian yang sudah terbiasa pakai "Adobe Photoshop" memang bukan lagi jadi persoalan serius (meski mungkin tetap nggak bakalan sekali jadi membuatnya) namun bagi beberapa sobat blogger yang lain pasti ini akan jadi persoalan besar yang "akhirnya lebih sering jadi pembangkit keputusasaan". Satu yang terpenting ketika akan membuat background image di header Blogger Template Designer (Perancang Template Blogger) adalah "Jangan sekali-kali gunakan tool Susutkan agar sesuai atau dalam bahasa londo-nya Shrink to fit". Menggunakan tool ini hampir tak ada manfaatnya karena background header tak akan pernah sesuai dengan lebar dan tinggi header sesungguhnya. Jika sampeyan pernah mencobanya pasti akan tahu betapa justru blog jadi kacau balau nggak karuan.

Mengatasi persoalan menentukan width dan height background header "dengan tingkat akurasi 99,99% dapat kita lakukan dengan bantuan jQuery dan sedikit script. Sampeyan tak perlu menyimpan kodenya secara permanen karena hanya dibutuhkan untuk sekali penggunaan. Cukup copy seluruh kode kemudian simpan melalui widget HTML/Javascript (Elemen Laman | Add a Gadget | HTML/Javascript). Lanjukan dengan buka blog dan yang terakhir cari serta klik button pencari lebar dan tinggi header blog. Lha.... setelah ketemu tinggi dan lebar header-inner yang dibutuhkan untuk membuat background image, segera hapus kembali jQuery dan scriptnya.

Cara menggunakan kode

Agar lebih cepat dalam membuat background image di header blog, silahkan buka yang ini terlebih dahulu.

Tips & Trick membuat background image header blog