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
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 :
- Buat Entri Baru (atau Edit Entri)
- Masuk ke Mode HTML (Bukan Compose)
- kosongkan seluruh kode/tulisan pada mode HTML tersebut
- 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>
<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
ga bisa mas
ReplyDeletesudah saya perbaiki kang... Baca petunjuk tambahan "Catatan" Yang berada di bawah artikel
Deleteukuran slide nya bisa di rubah ga yah,jadi lebar dan jelek foto nya mas
ReplyDeleteBisa kang... itu ada angka-angka setelah width serta height tinggal di ubah-ubah aja kang...
DeleteCoba aja utak-atik angka nya... sampai ketemu angka yang cocok... :)
ngak bisa slide gan gmn vara slidex gambarx tetep itu aja setelah aq masukin gambarx
ReplyDeleteya caranya ya kaya di atas... ikuti saja petunjuknya baik2 kang.. dibaca dengan seksama dan sebenar-benarnya... :D
DeleteGan, kalau pake tombol next gmn? soalnya itu diatas otomatis pindh
ReplyDeleteitu yang di bawah ada artikel cara membuat yang bertombol
Deleteterimakasih banyak sob, sangat membantu sekali tutorialnya..
ReplyDeleteWah mantab, Saya coba dulu gan.. :)
ReplyDeleteMakasih banyak gan, :) aku coba dulu ya..
ReplyDeleteMakasih bnyk....artikenya mantap. Akan saya coba nanti..😀
ReplyDeleteterima kasih
ReplyDeletecara buat galeri video mirip facebook ada gak sob
ReplyDeleteajariin buat galeri
ReplyDeletemantabbb//...makasih y
ReplyDeleteMakasih Banyak Gan ..bermanfaat
ReplyDeletewah sangt bermanfaat kak makasi tipsnya
ReplyDeleteBro, Kalau tambah link ketika diklik per gambar perlu ditambahin apa ya?
ReplyDeleteOiya itu link source js nya http://yourjavascript.com/53816065231... permanent apa bisa hilang jg ya?
makasih sebelumnya
Belum pernag coba sih kang. tapi kalau tambahin link di gambar, ya paling tinggal kita tambahin htmlnya dengan href=.....
Deletekalau javascript permanen itu maksudnya gimana ya, saya kurang paham. hehe
bro..sy coba tapi belum bisa..yg sy bingung ganbarnya taruh dimana tempatnya biar bisa tampil ..trimakasih
ReplyDeleteCoba deh kamu pergi (bawa mouse) ke salah satu gambar di internet (blog ini khususnya). Kemudian klik kanan, kemudian pilih "buka gambar di Tab baru". nah, di atas itu URL gambar. Atau pas klik kanan, pilih aja "salin alamat gambar", kemudian kamu paste di Word. nah, itu URL gambar.
DeleteSederhananya sih, Gambarnya bisa kamu upload-uploadin dulu. Bikin artikel baru, terus upload-uploadin gambarnya. terus kalau udah publish deh. Buka halaman Artikel tersebut terus kamu ambilin URL gambarnya satu demi satu.
bang makasih infonyaa, cuma aku bingung yg "url gambar 1" itu maksudnya gimana sih? sori baru pake blog sih ehehe makasih
ReplyDeleteCoba deh kamu pergi (bawa mouse) ke salah satu gambar di internet (blog ini khususnya). Kemudian klik kanan, kemudian pilih "buka gambar di Tab baru". nah, di atas itu URL gambar. Atau pas klik kanan, pilih aja "salin alamat gambar", kemudian kamu paste di Word. nah, itu URL gambar.
DeleteSederhananya sih, Gambarnya bisa kamu upload-uploadin dulu. Bikin artikel baru, terus upload-uploadin gambarnya. terus kalau udah publish deh. Buka halaman Artikel tersebut terus kamu ambilin URL gambarnya satu demi satu.
Thank buat infonya gan..
ReplyDeleteAne pasang jadinya mantap banget
Terimkasih atas sharenya...pas ane coba hasilnya emang mantap.
ReplyDelete