Senin, 25 Juni 2012

Membuat Header Slide Pada Blog

     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
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
3. 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 :)
4. Langkah ketiga silahkan login ke akun blog anda, masuk ke design dan edit html.
5. Download dan backup full template anda untuk berjaga-jaga, siapa tahu nantinya terjadi kesalahan.
6. 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
<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() { $(&#39;#coin-slider&#39;).coinslider({ width: 930,height:140, navigation: false, delay: 5000 }); }); </script>
7. Keterangan width:930,height:140 adalah menunjukkan ukuran lebar & tinggi slideshow serta ukuran gambar yang ditampilkan,sesuaikan dengan header anda ya
8. Setelah selesai, silahkan save template anda. Kemudian masuklah ke Design (Rancangan).
9. 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>
10. 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.
11. lalu save, dan lihat hasilnya.
Jika ingin membuat di bawah header langkah yang berubah adalah pada langkah ke 9-seterus nya, add gedget nya di bawah header atau bias di atas postingan….. terserah anda
SEMOGA BERHASIL YA SOB….!!!!!

Tidak ada komentar:

Poskan Komentar