Senin, 30 September 2013

CARA MEMBUAT SLIDE GAMBAR DI BLOG


As-salam.

               Baru kemarin aku belajar membuat tampilan slide gambar di blog ini. Soalnya dalam hati timbul pertanyaan ketika berkunjung ke blognya temen, "kok dia bisa menampilkan gambar slide di blog sesuai dengan gambar yang dia upload ya?" putar-puter blog walking, dapat beberapa sumber terus tak coba bereksperimen, awalnya sering eror, atau gambar slide ada tulisan loadingnya, tapi tak coba dengan cara lain lagi akhirnya bisa menampilkan slide gambar di blog sesuai dengan gambar yang aku upload.

               Berikut ini akan aku share ke sobat blogger dimanapun berada tentang Cara Membuat Slide Gambar di Blog, oke deh langsung ajah :

1. Masuk ke dashboard--> ke menu tata-letak(lay-out)
2. Tentukan letak slide yang akan ditampilkan, pilih tambah gadged (add gadged)--->pilih java script/html
3. Masukkan Script berikut :



<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="http://imageshack.us/a/img854/3974/rqn4.jpg" />
<img src="http://imageshack.us/a/img694/9703/88ii.jpg" />
<img src="http://imageshack.us/a/img32/6765/tbzk.jpg" />
</div>

Keterangan : 
Ganti yang direct link yang berwarna merah dengan direct link foto/gambar yang sudah kamu upload di media penyimpanan foto online. kalau aku upload foto ke imageshack.us

Berikut cara mendapatkan direct link foto yang kamu :

1. Masuk ke situs layanan penyimpanan foto online contoh di imageshack.us

2. Akan muncul gambar seperti di bawah ini :
masukkan alamat e-mail sobat dan pilih file yang kan diupload melalui icon browse.

3. Kalau sudah,  akan muncul gambar seperti di bawah ini :
kemudian klik icon UPLOAD NOW itu. Foto sobat akan di upload ke server web online tersebut.

4. Kemudian akan muncul gambar seperti berikut :
blok gambar mana saja yang akan di ambil direct links-nya, kemudian Klik GET DIRECT LINK yang terletak di samping kanan atas gambar itu.

5. Kemudian sobat blogger akan mendapatkan direct link, seperti gambar berikut ini : langsung copy direct link foto/gambarmu dan pasangkan ke script yang berwarna merah diatas.

         Udah sekarang di save/ simpan. Dan lihat blog sobat, Saya Ucapkan selamat !! sekarang blog sobat sudah terpasang slide gambar/foto sobat yang tadi di Upload.

         Terimakasih telah mampir dan membaca artikel tentang Cara Membuat Slide Gambar di Blog, jika sobat ada waktu berkomentar silakan isi kolom komentar di bawah ini :D

Tidak ada komentar:

Posting Komentar

Bagi yang ingin berdiskusi, bertanya, atau menambahkan, silakan komentar :)