Pembuatan Slideshow Gambar pada Postingan Blog

Pendahuluan

 

    Ada beberapa cara untuk menampilkan data di blogspot, satu diantaranya adalah dengan menampilkan gambar. Ada suatu kata-kata bijak (quotes) yang menyatakan bahwa satu gambar dapat mewakili seribu kata. hal tersebut membuat gambar memiliki peranan penting bagi yang ingin mengekspresikan diri, menyampaikan suatu pesan dan kesan, memaparkan ide dan gagasan, membuat suatu rancangan. Dalam blog apabila hanya terdapat tulisan tanpa gambar tentu akan menjadi suatu hal yang sangat membosankan. Gambar dapat mempermudah orang membaca pesan yang kita sampaikan dalam tulisan. Hasil survey singkat pada responden siswa setingkat sekolah menegah pertama menyatakan bahwa suatu tulisan bacaan pada suatu materi pelajaran yang menggunakan gambar ilustrasi lebih menarik untuk dibaca ketimbang bacaan pelajaran yang hanya berisi teks walaupun isi kedua teksnya sama. Dengan demikian maka dapat kita anggap gambar memiliki peranan yang sangat penting dalam menyebarkan informasi.

        Pada tulisan berikut, saya akan membahas cara menyajikan gambar pada postingan blog secara slide show. Agar proses pembuatan slide show pada postingan blog dapat dilakukan dengan baik. Saya menyarankan agar anda mempelajari dasar-dasar html dan css. Dan tidak lupa pula untuk mencadangkan (backup) template blogger anda. Sebelum melanjutkan silahlan cadangkan tema blog anda terlebih dahulu dengan cara Login ke Blogger buka menu "Tema" klik "Sesuaikan" pilih "cadangkan" dan simpan file *.xml di perangkat anda.

Langkah-langkah :

1. Login ke Blogger, jika sudah, buka menu "Tema" klik "Sesuaikan" pilih "edit HTML", cari "jquery.min.js" kalau tidak ditemukan cari</head> lalu ketik di sebelum </head> dengan 
   
   <script src= "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
   

2. Buat Style Slide dengan script yang dibuat Steven Wanderski dengan mengetikkan
   
   <link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />
   sebelum"</head>" pada template blog.
   
   
   
   
   
3. Tambahkan Style CSS untuk ukuran gambar slide yang ditampilkan dengan cara menambahkan :
   
   .bxslider img{
   width:100%;
   height:300px;
   }
   .bx-wrapper img {
   display: inline !important;
   }
   Sebelum"]]></b:skin>" pada template blog.
   
   
   
   
   
4. Aktifkan Slider dengan menambahkan :
   
   <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
   <script>
   $(document).ready(function() {
   $('.bxslider').bxSlider({
   auto: true,
   autoControls: true,
   captions: true
   });
   });
   </script>
   
   
   Sebelum "</head>"
   auto: true, berarti slide gambar akan bergantian secara otomatis. Jika tidak ingin gambar berputar secara otomatis maka ganti "true" dengan "false".
   autoControls: true, berarti menampilkan panah gambar selanjutnya atau sebelumnya. Jika tidak ingin menampilkan tanda panah sebelum dan sesudah maka ganti "true" dengan "false".
   captions: true, berarti menambahkan teks dibawah gambar. Jika gambar sudah memiliki tulisan atau makna tersendiri dan tidak membutuhkan caption maka ganti "true" dengan "false".
   
   
   
   
   
5. Setelah Menambahkan gambar pada postingan blog dilakukan dengan cara buat postingan lalu klik "edit html"dan tambahkan
   
   
   <ul class="bxslider">
   <li><img src="URLgambar1" title='IsiCaption' /></li>
   <li><img src="URLgambar2" title='IsiCaption' /></li>
   <li><img src="URLgambar3" title='IsiCaption' /></li>
   <li><img src="URLgambar4" title='IsiCaption' /></li>
   </ul>
   
   
   URLgambar1 diganti dengan link gambar dan IsiCaption diganti dengan Caption Gambar. Untuk menambah gambar tambah baris baru dengan "<li><img src="URLgambar4" title='IsiCaption' /></li>" sebelum </ul>.
   
   
   
   
   
6. Untuk membuat caption gambar dapat dengan mudah ditemukan google search atau pinterest isi setiap baris gambar dengan "<li><a href="LinkPostinganBlog"><img src="URLGambar" title="IsiCaption" alt="IsiTeksAlternatif" /></a></li>". Ada cara lain yaitu dengan blok gambar dengan cara klik gambar klik properties dan add "alt text" dan "title text" kemudian klik lagi gambar lalu pilih icon tautan untuk menambahkan tujuan gambar.
   
   
7. Bagi yang memahami HTML dan CSS boleh utak-atik code dari Steven Wanderski berikut :
/**
* BxSlider v4.1.2 - Fully loaded, responsive content slider
* http://bxslider.com
* Written by: Steven Wanderski, 2014
* http://stevenwanderski.com
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
left: -5px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url(images/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}

Penutup

Demikian pembahasan saya tentang pembuatan slideshow gambar pada postingan blog. Jika anda merasa postingan ini bermanfaat silahkan share postingan ini dengan menyertakan sumber aslinya http://rds-production.blogspot.com/.