Friday, August 1, 2014

Cara Membuat Galeri Slideshow di Artikel Blog

Terkadang, ketika kita membuat artikel di blog kita ingin sekali mengupload banyak sekali foto di dalamnya. karena artikel yang sedang ingin kita share adalah tentang kumpulan dokumentasi yang kita miliki. Hanya saja, ketika kita memgupload foto foto kita di blog dokumentasi yang umumnya kita akan dapati adalah kumpulan kumpulan Foto yang akan di deretkan ke bawah.

Berbagai macam ukuran foto membuat Estetika Artikel yang kita miliki kadang menjadi berkurang. Beberapa foto berukuran panjang. beberapa foto lebih lebar. ada Foto posisi lounscape, ada juga yang potret.

Nah, sebagai Bahan Pertimbangan, mungkin temen-temen Bisa Membuat Kumpulan Foto-foto yang temen-temen Miliki Menjadi Galery Slideshow Seperti berikut ini :

Contoh Galery Slideshow
Dengan 4 Foto Sampel


Temen-temen Tertarik membuatnya.... ?
Mungkin Temen-temen Bisa ikuti cara membuat galery slideshow di postinga (artikel blog) berikut ini :
  1. Buat Entri Baru (atau Edit Entri)
  2. Masuk ke Mode HTML (Bukan Compose)
  3. kosongkan seluruh kode/tulisan pada mode HTML tersebut
  4. Copi Paste Script Berikut ini :
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<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="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
<img src="URL Foto 5" />
<img src="URL Foto 6" />
</div>
<div style="text-align: center;">
<a href="http://pelajarterbaikupi.blogspot.com/2014/08/cara-membuat-galery-slideshow-artikel-posting-blog.html" target="_blank"><span style="font-size: x-small;">My Galery</span></a></div>
<br /></div>
<br /></div>

Temen-temen cukup ganti tulisan berwarna biru dengan URL gambar yang temen-temen kehendaki.
Temen-temen juga bisa menambah atau mengurangi jumlah foto sesuai kehendak. Tidak hanya sebatas 6 Foto saja seperti yang di contohkan.

Jika merasa sudah cukup, temen-temen bisa kembali menulis artikel ke mode compose. Lalu Publish/publikasikan artikel yang telah temen-temen buat.

Catatan :
Jika tidak bisa atau gagal di publish. Untuk memperbaki kode-kode agar benar. Tulislah artikel menjadi mode Compose (agar tag pembuka dan penutup atau semacamnya akan secara otomatis memperbaiki) lalu kembali ke mode HTML.
kemudian Klik lagi menjadi mode compose. Jika benar maka ketika sahabat sekarang berada di mode compose. URL URl gambar yang tadi sahabat pasang, akan ditampilkan berjejer.

Baca Juga :
Cara Membuat Galeri Slideshow Ber-Tombol di artikel blog
Cara Membuat Galeri Slideshow di artikel Blog
Cara Membuat Galeri Foto Scroll di artikel Blog
Cara Mendapat dolar di blog
Membuat Buku Tamu di Blog dengan Cbox
Daftar Artikel Blog

No comments:

Post a Comment