Bismillah,
Desain header yang keren, cantik pada sebuah blog tentu akan menambah sesuatu gitu.
Nah pada kesempatan ini saya akan berbagi script slide animasi yang
sudah sedikit di modifikasi dan cocok untuk membuat header animasi
yang cukup keren, sebenarnya kalau anda pernah mempraktikan tutorial Membuat Slide Show Gambar dengan JQuery di Blogger
tutorial ini sama saja, hanya ada sedikit perubahan pada kode CSS yang
ada pada animasi slide tersebut.
Okeh langsung saja, silahkan anda ikuti tutorial berikut dengan seksama, sebagai batasanya script dibawah ini di buat untuk membuat header animasi dengan ukuran gambar 850px X 175px,
tapi nanti anda bisa dengan mudah merubah untuk ukuran header sesuai
dengan lebar template anda, sedangkan untuk jenis templatenya saya
anggap sudah tersedia fasilitas untuk menambahkan gadget html/javascript
dibawah/ diatas header blog anda, contoh tata letak template yang saya
maksudkan seperti pada gambar dibawah ini, tata letak seperti ini banyak
anda jumpai kalau menggunakan template yang disediakan oleh
ourblogtemplates.com, tapi jika anda menginginkan menggunakan template
anda sekarang, mungkin anda harus merubah dan menambahkan kolom dibawah header anda, untuk tutorialnya silahkan anda searching di google.
- Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home
- Langsung tuju ke halaman Template, dan klik edit html (Jangan lupa seperti biasa, backup dulu template anda)
- Beri centang pada expand Template widget
- Letakkan kode berikut di atas kode ]]></b:skin>
- Letakkan kode dibawah ini diatas kode </head>
Width: 850 dan height: 175, silahkan anda sesuaikan dengan ukuran gambar yang akan dijadikan header animasi pada blog anda. - Simpan, kemudian klik tata letak.
- Tambahkan gadget html/java script dan letakan di bagian header template anda, kemudian copas kode berikut:
Silahkan ganti Link lokasi gambar dengan lokasi penyimpanan gambar anda,
tutorial cara mendapatkan lokasi penyimpanan gambar bisa anda baca DISINI
Simpan dan silahkan nikmati hasilnya.
Untuk hasil terbaik, desain header anda menggunakan software desain
grafis seperti Photoshop, desain dengan ukuran yang tepat agar tampil
maksimal.
Demikian, semoga bermanfaat.
thanks banget! :D
BalasHapus