Amatlah sedikit yang diperlukan untuk membuat suatu kehidupan yang membahagiakan,

semuanya ada di dalam diri Anda, yaitu di dalam cara berpikir dan bersikap (Fred Corbett)

Home » BelajarBlog #2 - Hiasan » Cara Membuat Galeri Slideshow di Artikel Blog

Cara Membuat Galeri Slideshow di Artikel

Blog
25 Comments BelajarBlog #2 - Hiasan

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.

Cara Membuat Foto Galeri Slideshow Ber-

Tombol di artikel blog
10 Comments BelajarBlog #2 - Hiasan

Sebelumnya kita pernah membahas bagaimana membuat foto-foto di blog kita menjadi lebih menarik
dengan membuat galeri sistem slideshow dan galeri sistem scroll yang dipasang di blog yang kita miliki.
Entah itu kemudian dipasang di artikel blog, maupun dipasang di sidebar agar selalu terlihat oleh setiap
pengunjung.

Nah, pada kesempatan ini, saya akan membahas sesuatu yang lebih menarik lagi. karena sepertinya
tidak banyak blogger membahas tentang hal ini, yaitu terkait cara membuat galeri slideshow dengan
tombol next and prev di artikel blog. Sehingga dengan menggunakan tombol ini, pengunjung blog yang
melihat foto kita di blog bisa mempercepat atau memperlambat foto yang ditampilkan dengan sesuka
mereka.

Coba sahabat perhatikan Contoh Galeri Foto Ber-Tombol yang saya buat di bawah ini :
Tertarik untuk membuat galeri foto ber-tombol seperti di atas? mungkin temen-temen bisa mengikuti
langkah-langkah berikut :

Gambar di atas sebenarnya merupakan file java script yang saya dapat dari sebuah situs yang memang
bergerak dalam bidang pembuatan galeri. Silahkan temen-temen kunjungi situs Berikut Ini : Situs
Slideful Lalu buat akun disana (agar Lebih Nyaman)

Setelah kalian mengunjungi situs tersebut, upload Foto-foto yang ingin kalian masukan di dalam galeri
lalu pilih berbagai pengaturan yang ingin kalian buat. Saya yakin kalian cukup bisa mengikutinya. Tapi
jika kalian sedikit bingung, bisa kunjungi blog milik aliusmanhs yang dengan cukup jelas bagaimana
melakukan pengaturan pada situs slideful.

Tambahan : Tampilan situs berubah

Setelah kalian selesai memberikan pengaturan kalian akan menemukan tampilan halaman sebagai
berikut :

Pilih : path 1

Pilih Short HTML code

Boleh Pilih kode HTML atas maupun Bawah

Simpan code HTML yang diperoleh dari slideful untuk nanti kita masukan ke dalam artikel blog yang kita
miliki. Silahkan saja coba keduanya. barangkali salah satu kode tidak bekerja dengan baik.

Memasukan Kode HTML di artikel :

seperti biasa, pada dasarnya kita bisa menempatkan galeri foto slideshow bertombol ini di artikel
ataupun di sidebar. Jika ingin meletakannya dalam artikel, kita harus meletakan nya dalam mode HTML,
bukan compose. Setelah kita meletakan kode tersebut di mode HTML, kita tidak akan melihat hasilnya
jika kita mengubah kembali penulisannya ke mode Compose. Jadi, sebaiknya, selesaikan saja dulu
penulisan artikel nya hingga selesai. kemudian kita baru pergi ke mode HTML dan menambhakan script
kode tersebut. lalu klik Publish artikelnya.

Cek artikel kalian apakah gambar slideshow tersebut tampil dengan baik. Jika tidak tampil, coba saja
periksa apakah sript yang tadi kita letakan ada atau tidak (barangkali memang tidak ada).

Cara Membuat Galeri Foto Sistem Scroll di

Blog
13 Comments BelajarBlog #2 - Hiasan

Seperti yang telah dijelaskan sebelumnya, bahwa ketika kita ingin mengunggah banyak gambar
di artikel blog, kita akan menemui hal berupa estetika dalam penempatan. yang membuat
kumpulan gambar atau foto yang kita upluod kurang tertata rapi. Namun Hal tersebut ternyata
bisa kita atasi pada artikel sebelumnya tentang cara memasang galeri slideshow di Artikel Blog.

Tapi seandainya temen-temen tidak cocok dengan gaya slide show. Mungkin temen-temen bisa
mencoba membuat galeri foto dengan gaya Scrool di artikel Blog milik Temen-temen.

Berikut ini contoh Galeri dengan Gaya Scrool :

Dengan contoh 4 buah foton sampel
Tertarik Membuatnya ... ?
Temen-temen Bisa mengikuti tutorial membuat galeri foto sistem scroll berikut ini.

1. Masuk Ke New Entri Atau Edit Entri

2. Lalu Masuk dan tulis dalam menu HTML (Bukan Compose)
3. Copi Paste Script Berikut

<br/>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 220px; width: 380px;
text-align: left;">
pelajarterbaikupi.blogspot.com</div>
<div style="text-align: center;">
<a href="http://pelajarterbaikupi.blogspot.com/2014/08/cara-membuat-galery-foto-
sistem-scroll-di-blog.html" target="_blank"><span style="font-size: x-small;">My
Galery</span></a></div>
<br /></div>
<br/>

Temen-temen bisa ubah ukuran lebar dan tinggi kotak scroll dengan mengubah tulisan berwarna
biru diatas. Lalu Temen-temen bisa kembali ke Mode Compose dan mulai mengupload Foto di
dalam kotak tersebut. Jika sudah selesai, maka akan menjadi tampilan Scroll seperti yang ada di
contoh.