Selamat pagi menjelang siang agan-agan.Kali ini postingan saya akan kembali berbagi template blogger yang unik.Yaitu , Mozaik Photo Blogger Template Dengan JQuery.Seperti postingan saya SEBELUMNYA, template yang satu ini pun saya dedikasikan buat kekasih di RP.Aduh , emang kurang kerjaan banget deh kayaknya :D.Tapi gak papa , saya jadi termotivasi untuk lebih kreatif dalam memberikan surprise.Dan lagi , saya bisa membaginya dengan agan-agan sekalian.Lalu , seperti apakah tampilan Mozaik Photo Blogger Template tersebut !? Silahkan agan-agan cek DISINI.Bagaimana , apakah agan-agan tertarik untuk membuatnya juga !? Tenang , saya sudah menyiapkannya khusus untuk pengunjung setia Enigmatic Passion.Silahkan agan-agan download templatenya DISINI.Nah , sekarang mari kita setting template tersebut agar bisa menggunakan foto yang agan inginkan.Yang perlu di ingat adalah , ukuran foto untuk thumbnailnya ialah 125x125 , dan untuk foto satunya lagi yaitu 750x500 pixel.Lalu , untuk mengganti source foto , cari kode dibawah ini :
Ganti tiap foto dengan yang agan inginkan.Namun bila kita perhatikan pada template , foto yang di panggil hanyalah foto dengan ukuran thumbnail.Lalu , bagaimana caranya foto yang satunya lagi di panggil !? Awalnya saya juga bingung , namun akhirnya ketemu juga :) .Ternyata , kode inilah alasan kenapa hanya foto thumbnail yang di panggil :
var image_src = $prev_thumb.find('img').attr('src').replace('/thumbs','');
Silahkan anda cari kode javascript tersebut.Fungsi dari kode tersebut ialah mengedit url sebelumnya dengan cara menghapus /thumbs.Lihat url sebelum di edit :
https://sites.google.com/site/idhambayu/home/merge/images/thumbs/1.jpg
Nah , ketika user mengklik salah satu gambar , maka fungsi tadi di panggil dan url yang di panggil akan berubah menjadi berikut :
https://sites.google.com/site/idhambayu/home/merge/images/1.jpg
Artinya , foto dengan ukuran besar berada dalam folder images.Folder images pun berisi folder thumbs yang isinya foto dengan ukuran kecil.Makanya , kita harus menghosting image yang kita inginkan dengan hierarki tersebut.Masalahnya , hostingan foto seperti picasa atau imageshack tidak menyediakan fitur tersebut.Mereka cenderung memberikan url yang tidak tersusun rapi.Daftar di 000webhost pun sama saja , karena servernya USA , foto tidak dapat di tampilkan karena terlalu berat.Tapi jangan khawatir , ada solusinya kok.Silahkan daftar di google site.Tempat hostingan gratis dengan akses sangat cepat.Sayapun menyimpan semua gambarnya disitu.Bila anda belum paham cara menggunakan google site , silahkan kunjungi BLOG INI.Gak tau tuh blog siapa , tapi daripada copas mending tunjuk aja langsung , hehe.Setelah beres , upload foto dengan menempatkan foto besar dan folder thumbs di folder images , dan foto kecil di folder thumbs.Oia , agan juga boleh upload sendiri atau pake url saya untuk javascriptnya.Sekian tutorial kali ini , semoga bermanfaat.Silahkan tinggalkan komentar bila masih ada yang belum di mengerti.
0 komentar:
Posting Komentar