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

jQuery Simple Image Zoomer

Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.

Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.

jQuery Loader: Preload your blog

jQyery Loader bekerja di awal blog mulai di buka. Animasi menyertai desain loader ini dalam rupa fade effect yang disertai gerak membuka pada layar secara vertical. Yang sangat perlu diperhatikan ketika menggunakan jQuery loader adalah kondisi "ready to use" pada keseluruhan file, baik yang berupa image, javascript, css atau bentuk file lain seperti misalnya video (jika menggunakan). Jika salah satu saja file dalam blog dalam kondisi "mati/tidak dapat diakses" maka halaman blog tak akan mungkin terbuka. Jadi kesimpulannya sebelum menggunakan jQuery loader sebaiknya pastikan bahwa semua data blog benar-benar dalam kondisi "ready to use".

Cara Membuat jQuery Loader

Membuat Javascript-jQuery ZigZagLap Tooltip

Tooltips! Ah ..., aku sungguh sangat menyukai ini. Sebuah desain yang tidak saja bermanfaat bagi pengunjung, akan tetapi dia juga merupakan sebuah "barang berharga" yang mampu membuat sebuah blog terlihat lebih cantik, lebih keren serta mampu mencerminkan sebuah kesungguhan dalam "pribadi pengelola blog". Maaf..., itu hanya penilaian subyektif dari aku. Yang jelas bahwa toolttip memang menambah "gaya" dan "penampilan". Rasa suka akan tooltip ini membuat aku mencoba menuangkannya dalam beberapa posting. Yah ..., moga-moga saja memberi manfaat bagi para sobat blogger. Hanya perlu aku sampaikan bahwa posting "javascript tooltip-4" yang sudah aku terbitkan beberapa bulan yang lalu "tidak diperuntukkan bagi blogspot". E ..., barangkali saja ada yang ngeblog di luar blogspot dan tertarik untuk menggunakannya. O..., ya..., sebagai pelengkap koleksi tooltip, aku punya sebuah tooltip yang sangat menarik yang pada saat ini juga masih aku gunakan (23-Okt-10), mungkin sampeyan tertarik untuk memanfaatkan sebagai pelengkap blog. Silahkan coba untuk dibuat.

Javascript ZigZagLap Tooltip

Cara Membuat Recent Posts Dilengkapi Gambar Thumbnail Animasi dengan jQuery-CSS3

Judul posting semrawut seperti di atas adalah wujud bingungnya gubhug reyot ketika berusaha membuat kalimat yang tepat dan pendek. Mungkin bila dituliskan secara panjang lebar akan seperti ini:

Cara Memasang dan Membuat Recent Posts dilengkapi Gambar/Image atau Thumbnail dengan Efek Animasi Menggunakan Javascript, Kode CSS, JQuery dan CSS3 Transition-Transformation serta CSS3 yang lain!

Ha .... ha .... ha ....! Masih nggak bener juga? Ada yang salah? Uh .... biar saja, emang buat judul nggak pusing?! He .... he ....

D E M O

Mungkin ini bisa menjadi bahan baru buat blog sampeyan. Bagus, ko'! Jozhlah, pokoknya...! Coba saja lihat di DEMO. Jangan bingung carinya. Letaknya di ujung paling bawah dengan judul (ushh ... judal-judul terus!) "Recent Posts using jQuery-CSS3". Bagi sampeyan yang selama ini sudah menggunakan jQuery, maka silahkan copy javascript, kode CSS dan xHTML-nya saja. Bagi yang belum menggunakan jquery.1.3.2.min.js, silahkan copy semua kode yang ada termasuk link jquery.1.3.2.min.js-nya. Kita akan buat dengan cara yang paling mudah dengan menyimpan seluruh kode melalui Add a Gadget. Kecuali ... ini kecuali, lho.... Bagi yang mau

jQuery Vertical Accordion Menu

Sekali lagi..., meskipun belum lama berselang kita telah bahas pembuatan Vertical Accordion Menu dengan judul "Animated jQuery Accordion Menu Serba Guna", karena salah seorang sobat blogger menanyakan tentang bagaimana membuat vertical accordion seperti yang digunakan di blog ini, maka kita akan bongkar seluruh javascript dan kode css yang membentuk fungsi vertical accordion ini agar para sobat blogger bisa membandingkan keduanya. Meskipun kalau ditilik dari fungsi sebenarnya hampir tidak banyak perbedaan, namun sebenarnya jika ditinjau dari javascriptnya, maka akan kita lihat beberapa perbedaan, baik dari bentuk script maupun besar script yang digunakan.

Javascript maupun kode CSS yang nantinya kita perlihatkan, hampir tidak ada pengurangan atau penambahan dari kode aslinya, hanya beberapa kode CSS saja yang dirubah dengan pertimbangan supaya hasil akhir bentuk accordion akan sama disemua blog. Hal yang terpaksa dilakukan karena tanpa perubahan maka hasil yang didapat pastilah akan berbeda dengan bentuk accordion seperti yang terlihat di samping (beberpa kode css secara terpadu dipekerjakan juga untuk fungsi lain di keseluruhan blog!).

JQuery-1.3.2.min.js masih menjadi pilar utama bekerjanya accordion, yang dipadukan dengan sejumlah script lain hingga dapat membentuk sebuah fungsi dinamis dengan bentuk tampilan yang terbangun sepenuhnya melalui beberapa kode css dan background image.

jquery dan Javascript pembentuk jQuery Vertical Accordion Menu

Cara Membuat Animated jQuery Accordion Menu Serba Guna

Yang praktis, cantik, irit javascript dan dapat dipadukan dengan berbagai fungsi yang lain merupakan sebuah fasilitas dan kelengkapan blog paling nyaman digunakan. Kembali kita akan memanfaatkan jQuery-1.3.2.js atau jQuery-1.3.2.min.js untuk membuat sebuah "Animated Accordion Serbaguna" yang tidak saja dapat digunakan untuk memuat seluruh daftar posting, melainkan dapat juga sampeyan gunakan untuk berbagai kepentingan di luar masalah menu. Gambar ataupun berbagai bentuk teks lainnya bisa mejadi obyek untuk accordion cantik ini.

Kembali javascript kurang dari 10 baris akan membantu membangkitkan jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain menarik. Permainan pada background image, background position serta padding, margin border serta text-shadow dan rounded corners di bagian dalam accordion mampu menghasilkan tampilan eksotik yang layak untuk dipertimbangkan sebagai satu fungsi penambah gaya dan maksimalisasi ruang. Ada dua buah desain yang bisa menjadi pilihan bagi sampeyan. Ke duanya sama-sama menarik, dan mungkin saja membuat kita kesulitan untuk menentukan pilihan. Bagaimana bentuk "Animated Accordion Serba guna ini? Silahkan arahkan cursor pada gambar di bawah ini dan sampeyan akan melihat seperti apa kira-kira bentuk tampilannya.

Cara Membuat Animated Vertical Menu Dengan jQuery

Sampeyan pasti tak akan menyangka javascript yang tak seberapa banyak ini mampu menghasilkan sebuah menu vertikal dengan bentuk animasi dan dilengkapi fade effects. Script kurang dari 10 deret ini mampu membuat setiap link title pada menu bergoyang ke kanan dan ke kiri saat mouse menyentuh setiap link. Apabila blog sudah menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, tinggal tambahkan javascript di bawahnya maka sebuah menu cantik yang sangat indah akan hadir dihalaman blog sampeyan. Boleh percaya atau tidak, tetapi silahkan lihat dulu scripnya yang hanya beberapa baris ini.

D E M O

Silahkan buka demonya agar lebih jelas bagaimana animasi yang tercipta pada vertical menu yang dibuat dengan menggabungkan kehebatan jQuery dan CSS3 ini.

DEMO: jQuery animated vertical menu

Javascript Animated Vertical Menu

Javascript :

<script type="text/javascript">  
//<![CDATA[
/* gubhug reyot - Vertical Animated Menu */ 
$(document).ready(function() {  
$(".bgsGRVMnu li").hover(function(){  
$(this).find('span').animate({ opacity: 0 }, 800);        
$(this).find('a').animate({paddingLeft:"50px"}, 800); },
function(){  
$(this).find('span').animate({ opacity: 1 }, 800);  
$(this).find('a').animate({paddingLeft: "28px"}, 800);  
});
});  
//]]>
</script>

Script di atas inilah yang akan menghadirkan menu vertical indah dengan animasi menarik. Untuk memberikan hasil maksimal pada bentuk tampilan menu, kita juga manfaatkan rounded corners effects, opacity effects dan text shadow sehingga nilai lebih menu animasi ini semakin terasakan.

Screenshoot Animated Vertical Menu Menggunakan jQuery-1.3.2.min.js

The simplest post code for tooltip and image preview

Tooltip yang mampu menampilkan gambar dengan kode posting paling sederhana ini masih menggunakan jQuery-1.3.2.min.js. Javascript pembentuk tooltip dibangun dengan memanfaatkan fade effect, blink effects, text-shadow serta box shadow. Penggunaan kode yang sederhana diharapkan mampu mengurangi kepadatan kode di ruang posting atau widget. Selain itu kode yang teramat praktis ini membuat semua blogger akan dengan amat mudah menggunakannya.

Untuk membuat tooltip agar mempunyai tampilan menarik dan terlihat atraktif, kita juga memanfaatkan kode css sebagai pembentuk box tooltip. Tooltip didesain mampu menampilkan gambar dalam tiga variasi ukuran. Yang pertama dengan ukuran lebar (width) 200px, yang kedua 400px dan yang terbesar dengan ukuran gambar 600px. Penggunaan ukuran maksimal 270px dilakukan dengan pertimbangan bahwa sebuah gambar dalam tooltip dengan lebar 600px adalah sebuah ukuran yang sudah teramat besar. Karena ketinggian gambar dibuat dalam bentuk otomatis, maka apabila gambar mempunyai perbandingan 2:3 untuk width dan height, maka gambar akan terlihat dalam ukuran 600px x 900px. Sampeyan bisa melihatnya dalam DEMO berikut ini :

Link Dalam Bentuk Teks

Link Dalam Bentuk Teks

Arahkan cursor di atas gambar dan tunggu!

Cara Membuat JQuery LightBox

Meskipun ada berbagai macam cara membuat lightbox dengan berbagai javascript seperti halnya menggunakan mootool dan prototype.js, namun kita akan utamakan terlebih dahulu cara pembuatan lightbox image viewer menggunakan jquery-1.3.2.js atau jquery.1.3.2.min.js. Tujuannya tak lain adalah sebagai upaya untuk memaksimalkan fungsi jquery-1.3.2.js. Gambaran sederhana tentang light box adalah, saat kita KLIK sebuah image atau thumbnail di halaman blog, maka akan terlihat preview image dalam ukuran yang jauh lebih besar yang ditampilkan seperti layaknya pada sebuah window baru di halaman blog dengan disertai efek layar gelap (transparency effects). Beberapa controll disertakan di dalamnya seperti next, previous dan close. Beberapa lighbox yang lain bahkan menggunakan contoll baru yang berfungsi untuk mengontol fungsi slideshow yang sekaligus disertakan.

Supaya mudah untuk di aplikasikan oleh semua blogger, jquery LightBox ini akan kita buat dalam bentuk "paket langsung tempel" dengan penggunaan kode HTML posting teramat sederhana sehingga siapaun dengan mudah mampu menggunakan dan menciptakan sebuah blog yang luar biasa atraktif. Semua kode telah terupload di file hosting dan dalam bentuk link siap pakai. Silahkan pasang dan simpan di template di bawah kode <head> atau di atas kode </head> kemudian segera coba di ruang posting, terbitkan, buka blog dan nikmati cantiknya tampilan Jquery LightBox.

Cara membuat JQuery LightBox

JQuery Image Zoomer: Panduan BloGGeR JQuery

Image Zoomer biasa disebut juga sebagai zoom effects, magic zoom, image zoom, magic magnify dan masih banyak istilah yang lain. JQuery.1.3.2.js sanggup melakukan ini dengan sangat sempurna. Inilah salah satu keandalan JQuery.1.3.2.js. Ya..., apapun bisa dilakukan dengannya. Sebuah effect zoom yang sangat fantastic dan mampu memberikan efek zoom secara maksimal dapat dilakukan hanya dengan menambahkan sedikit javascript. Copy Javascript dan Link jQuery.1.3.2.min.js kemudian simpan di bawah tag <head> atau tepatnya di

Vertical Scrollable with Effects

Vertical Scrollable sebenarnya hampir sama fungsinya dengan Vertical Slider. Keduanya berfungsi menampilkan teks atau gambar, atau sekaligus keduanya. Penggunaan Scrollable terutama dimaksudkan untuk effisiensi ruang. Beberapa bentuk gambar atau teks dapat sekaligus terwadahi dalam ruang tunggal dengan ukuran yang disesuaikan dengan ketersediaan ruang. tentu saja penggunaan scrollable juga sekaligus harus dimanfaatkan untuk menambah daya tarik blog. Scrollable yang satu ini sekalipun bentuknya mungil namun didesain untuk mampu menampilkan image dan beberapa variasi teks untuk lebih menajamkan setiap ungkapan yang disampaikan. Link yang tersedia berfungsi untuk memberi mengarahkan pembaca apabila menginginkan artikel lengkapnya.

Panduan:

JQuery Image Slider with Description

Deskripsi gambar dari slider ini berada di sebelah kanan gambar. Deskripsi berfungsi untuk menyampaikan informasi sekaligus memuat link yang berkaitan dengan gambar/image yang ditampilkan. Teks deskripsi gambar harus dibuat seminimal mungkin (seperlunya saja) karena daya tampung ruang yang memang sangat kecil. Anda bisa memasukkan link untuk deskripsi/penjelasan yang lebih detail sehingga pembaca akan terpuaskan.

Keterangan/Catatan:

1. Kecepatan slider dapat diatur dengan melakukan perubahan pada javascript (intervalObject --> countDown, 400: semakin besar semakin lama/lambat).
2. Anda dapat mengaturnya juga di var totalSec.
3. Untuk membuatnya lakukan pengamanan template terlebih dahulu. Caranya lihat di sini.
4. Setelah selesai mengamankan template lanjutkan dengan menyimpan KODE CSS di atas KODE ]]></b:skin>
5. Simpan JQuery.1.3.2.min.js dan javascript di bawah KODE <head> secara berurutan.
6. xHTML digunakan dibagian body atau di ruang posting.

jQuery Image Effect-1 - zoom effect

Image effect yang akan kita buat merupakan efek zoom dengan memanfaatkan fungsi jQuery.1.3.2.min.js yang di dalamnya memang ditanam berbagai fungsi yang dapat dikembangkan oleh penggunanya. Untuk menciptakan efek zoom ini kita perlu menambahkan sedikit javascript dan kode CSS sebagai pembangun dan pengendali. Anda dapat mengatur seberapa besar effek zoom bekerja dengan melakukan perubahan di javascript.

Carousel Slide Show

Carousel slideshow dibuat menggunakan jQuery. Slideshow berisikan image, teks, link dan title. Link bisa digunakan sebagai readmore atau dalam bentuk yang lain. Penulisan teks juga harus dibatasi karena box slideshow juga ketinggiannya telah ditentukan. Anda bisa menggunakannya seperti ketika memasang readmore saat posting. Agar lebih jelas silahkan buka link demo yang ada di bawah ini:

D E M O

Cara membuat carousel slideshow

Cara membuat dan memasang Auto Reverse Image Slider

Slider spesial ini mampu secara otomatis memngulang kembali tampilan setiap gambar/image dengan membalik kembali posisi gambar seperti posisi awalnya. JQuery 1.3.2.min.js kembali kita manfaatkan dengan pertimbangan karena hampir bisa diyakini bahwa sebagian besar blogger memanfaatkannya sehingga kita tidak perlu lagi menambah javascript dengan kapasitas besar hanya untuk membuat sebuah slider dengan kwalitas sangat memenuhi standar dan layak ditampilkan sebagai pelengkap blog. Slider ini didesain untuk mengulang setiap 5 (lima image) dalam setiap periode dengan kecepatan rotasi yang dapat di atur. Image yang digunakan mempunyai ukuran 160px x 180px (width x height. Perubahan yang dilakukan terhadap ukuran gambar/image harus disertai dengan penyesuaian desain slider karena perubahan sekecil apapun (terutama width) akan sangat berpengaruh terhadap penampilan slider yang harus mempunyai kepresisian tinggi berkaitan dengan ketepatan setiap bagian slider terhadap image yang ditampilkan.

Simple Ticker: Cara Membuat dan Memasang Simple Ticker di Blog

Simple Ticker merupakan sebuah ticker yang dibangun menggunakan jquery/1.3.2/jquery.min.js dan sedikit CSS serta javascript. Penggunaan jQuery.1.3.2.min.js menjadikan ticker ini layak dipertimbangkan untuk dibuat sebagai salah satu pelengkap blog karena jQuery.1.3.2.min.js mempunyai kompabilitas tinggi dan sangat umum digunakan pada web ataupun blog.
Silahkan KLIK DEMO untuk melihat Simple Ticker.

D E M O

Autohide Box

Auto hide boxs berfungsi untuk menyampaikan pesan ataupun konten lain yang berupa teks dan gambar yang hanya muncul di halaman blog pada saat blog mulai dibuka. Durasi kemunculan box bisa disesuaikan dengan kebutuhan dan keinginan blogger yang disesuaikan dengan seberapa penting pesan atau iklan yang ingin ditampilkan dan diatur melalui javascript. Menggunakan jQuery.1.3.2.min.js untuk fungsi ini tidak akan merugikan buat pengguna karena biasanya hampir semua blogger pasti menggunakannya untuk beberapa fungsi yang lain. Untuk melihat bagaimana Auto Hide Box bekerja, silahkan KLIK DEMO.
D E M O

jQuery-CSS3 Scroll To Top Controll

jQuery Scroll to top Controll berfungsi sebagai sebuah penggulung halaman otomatis yang disertai pengaturan kecepatan menggulung (scroll). Kecepatan scroll bersifat dinamis, dimana semakin jauh jarak ke atas halaman maka kecepatan scroll akan semakin bertambah. Contoll back to top dapat dibuat dalam bentuk bentuk teks link dengan posisi berpindah-pindah dengan jumlah tak terbatas, namun dapat juga dibuat sebagai controll statis dengan posisi selalu terlihat di halaman blog. Posisi controll dapat diatur disudut kanan-bawah, kiri-bawah, kanan-atas, kiri-atas atau berbagai tempat yang lain dengan melakukan pengaturan pada javascript (offsetx:5, offsety:5). Berbeda dengan jQuery Scroll to top controll yang lain, pada scroll to top contoll yang akan kita buat ini telah menyertakan beberapa effek dari css3 serta penambahan kode css2 untuk menggantikan tips/tooltip default. Tentu saja perubahan ini membawa pengaruh yang sangat besar hingga memperlihatkan perubahan tampilan jauh berbeda.

D E M O

Cara Membuat :