Wew akhirnya saya memposting juga setelah beberapa hari
tidak mengurus blog dan akhir nya saya memposting artikel baru lagi, kali ini
saya ingin memposting tutorial membuat slideshow pada blog tepat nya di bagian
atas (header) blog ini sih pesanan 2 teman setia TKJ Community mereka bertanya
bagaimana sih cara membuat slide show pada blog ??? maka saya akan menjawab nya
di sini….
ada beberapa cara yang bias kita lakukan yaitu dengan cara Online ada sebuah situs yang menyediakan slide show otomatis , jadi kita Cuma mengupload gambar saja ke situs tersebut dan situs tersebut memberikan kita coding untuk di copy paste di gadget javascrip/HTML tapi agak di saying kan sekali bahwa situs itu menyertakan LINK balik ke situs nya di slide show yang membuat kita sedikit terganggu….. he he he jadi saya tidak bahas dengan cara praktis ini ya, kita buat sendiri slide show nya agar lebih puas dan tidak ada link kembali nya….. :D
ada beberapa cara yang bias kita lakukan yaitu dengan cara Online ada sebuah situs yang menyediakan slide show otomatis , jadi kita Cuma mengupload gambar saja ke situs tersebut dan situs tersebut memberikan kita coding untuk di copy paste di gadget javascrip/HTML tapi agak di saying kan sekali bahwa situs itu menyertakan LINK balik ke situs nya di slide show yang membuat kita sedikit terganggu….. he he he jadi saya tidak bahas dengan cara praktis ini ya, kita buat sendiri slide show nya agar lebih puas dan tidak ada link kembali nya….. :D
Banyak Orang/para blogger yang ingin memasang slide show di
blog nya entah itu untuk mempercantik blog atau pun ingin memperkenal kan foto
diri nya kepada halayak ramai. eeit..tapi tau gak sih jika kita membuat slide
showmembuat proses loading blog anda sendiri menjadi lebih berat(LEMOT). Jangan
hanya karena ingin membuat tampilan blog keren, penuh dengan widget blog yang
keren,
penuh dengan flash dan gambar bergerak lainnya justru akan
memperlambat loading blog hingga menjadi berat, hal ini bisa membuat kapok para
pengunjung loh ??? he he he JADI DI PIKIR KAN KEMBALI YA….. :D
Tapi jika hal ini sudah menjadi pertimbangan anda, silahkan
saja. Header slideshow sebenarnya bisa menggantikan header dengan flash atau
swf masalahnya hosting tempat penyimpanan / upload swf terkadang error atau
mematikan akun kita karena berbagai kebijakan, maka header swf kita menjadi
tidak bergerak alias mati, karena link pada coding embed kita sudah tidak
aktif, ada banyak tempat alamat web upload swf gratisan akan tetapi pada
kenyataannya tidak pernah menjamin akun dan file kita bertahan lama, atau
mungkin hanya memberi fasilitas TRIAL kepada kita. Atau begitu kita akan
generate 'embed' swf tersebut, kita dibawa ke halaman untuk mengisi form yang
menyediakan kolom isian type pembayaran transfer
credit card paypal
.....hahahaha...UUD (ujung-ujungnya duit) juga ya. Tapi sampai sekarang hanya ada satu tempat
upload swf yang masih terpercaya kegratisannya yaitu milik google, jika ingin
gabung ini URL nya https://sites.google.com
jika anda ingin membuat file SWF dan upload ke site google dan membuat
code embed nya, tapi kita di sini membuat slide show dengan sederhana dengan
menggabungkan beberapa photo koleksi kita untuk di buat slide show nya , dengan
bermodalkan beberapa gambar image berformat JPEG,PNG atau yang lain anda sudah
bias membuat slide show cara nya dengan mengupload gambar-gambar tersebut di
Photobucket atau di tempat upload foto yang anda percayai misal nya pisca atau
yang lain di sini saya memakai photobucket contoh nya pada halaman Home saya
slideshow di bawah header blog saya foto-foto nya saya upload ke photobucket.
1. Silahkan untuk langkah awal kunjungi dan registrasi
dihttp://www.photobucket.com
2. Buatlah beberapa gambar berformat jpeg/png (harap gambar
yang anda buat diserasikan dengan thema blog, ukuran lebar dan ukuran tinggi
header blog anda), karena header tidak membutuhkan ukuran & resolusi tinggi
silahkan anda buat beberapa gambar header anda di powerpoint atau photo shop
saja, jangan lupa tambahkan teks judul blog dan deskipsi blognya(jika ingin)
jika menggunakan power point jangan lupa untuk meng grouping agar gambar
menjadi satu lalu save dengan format image, jika pakai photoshop tidak perlu di
satukan setiap layers nya karena jika kita men save nya maka gambar akan
automatis menjadi 1
2. Setelah beberapa gambar header selesai anda buat dengan
langkah kerja diatas, silahkan anda login di photobucket kemudian silahkan
upload beberapa gambar header yang anda buat tadi, beri judul kemudian silahkan
saving file yang sudah di upload. Kemudian copy paste Dirrect link gambarnya
simpan di notepad/ms word atau sejenis nya agar anda tidak sulit unuk menghafal
link photo anda. Sampai disini anda sudah punya modal link gambar header yang
nanti akan dijadikan modal slideshow :)
3. Langkah ketiga silahkan login ke akun blog anda, masuk ke
design dan edit html.
4. Download dan backup full template anda untuk
berjaga-jaga, siapa tahu nantinya terjadi kesalahan.
5. Silahkan centang expand widget, kemudian cari kode
</head> , letakkan kode dibawah ini dengan cara copy paste, diatas kode
</head>
Gunakan ctrl + F untuk searching code </head> agar lebih mudah
Gunakan ctrl + F untuk searching code </head> agar lebih mudah
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ width: 930,height:140, navigation: false, delay: 5000 }); }); </script>
6. Keterangan width:930,height:140 adalah menunjukkan ukuran
lebar & tinggi slideshow serta ukuran gambar yang ditampilkan,sesuaikan
dengan header anda ya
7. Setelah selesai, silahkan save template anda. Kemudian
masuklah ke Design (Rancangan).
8. Lakukan Add a Gadget, pilih Add a Gadget di bagian
header, jika tidak ada maka aktifkan ulti gedget di header , setelah multi
gedget di header di aktifkan add gedget pilih HTML/Javascript. Kemudian Paste
kode dibawah ini.
<div id='coin-slider'>
<center>
<a href="imgN_url"
target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>
ISI KETERANGAN DI SINI
</span>
</a>
<a href="imgN_url"
target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>
ISI KETERANGAN DI SINI
</span>
</a>
<a href="imgN_url"
target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>
ISI KETERANGAN DI SINI
</span>
</a>
</center>
</div>
9. Jangan lupa masukkan dirrect link url gambar-gambar yang
anda simpan di notepad tadi pada area tulisan ISI KETERANGAN DI SINI
tersebut,untuk isi keterangan terserah anda bisa diisi atau anda abaikan.
10. lalu save, dan lihat hasilnya.
Jika ingin membuat di bawah header langkah yang berubah
adalah pada langkah ke 8-seterus nya, add gedget nya di bawah header atau bias
di atas postingan….. terserah anda
SEMOGA BERHASIL YA SOB….!!!!!
