Cara Membuat Gambar Slider didalam Postingan Blog

KURAZONE ~ Halo sahabat Kurazer, bagaimana kabar kalian? Masih baik-baik saja kan!? Pada kesempatan kali kita akan belajar mengenai "Cara Membuat Gambar Slider didalam Postingan Blog". Fungsi dari gambar slider ini adalah memberikan efek pada gambar yang nantinya bisa dislide ke kiri maupun ke kanan.

Oke, langsung to the point saja...
1. Buka akun Blogger >> Pilih Tema >> Edit HTML
2. Copy kode CSS dibawah ini :
lalu paste / letakkan diatas kode ]]></b:skin>
.glyphicon-chevron-left:before{content:"\f053";font-family:FontAwesome}
.glyphicon-chevron-right:before{content:"\f054";font-family:FontAwesome}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;}
.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto;}
.carousel{position:relative;}
.carousel-inner{position:relative;width:100%;overflow:hidden;}
.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left;}
.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1;}
@media all and (transform-3d),(-webkit-transform-3d){
.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px;}
.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}
.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}
.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
;}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block;}
.carousel-inner>.active{left:0;}
.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%;}
.carousel-inner>.next{left:100%;}
.carousel-inner>.prev{left:-100%;}
.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0;}
.carousel-inner>.active.left{left:-100%;}
.carousel-inner>.active.right{left:100%;}
.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5;}
.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#00000000',GradientType=1);background-repeat:repeat-x;}
.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=1);background-repeat:repeat-x;}
.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9;}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px;}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px;}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px;}
.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1;}
.carousel-control .icon-prev:before{content:'\2039';}
.carousel-control .icon-next:before{content:'\203a';}
.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none;}
.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px;}
.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff;}
.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);}
.carousel-caption .btn{text-shadow:none;}
@media screen and (min-width:768px){
  .carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px;}
  .carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px;}
  .carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px;}
  .carousel-caption{right:20%;left:20%;padding-bottom:30px;}
  .carousel-indicators{bottom:20px;}
;}

3. Copy kode ekternal Bootstrap dibawah ini : (ini dilakukan apabila didalam template kalian belum terdapat Bootstrap, fungsi dari Bootstrap ini adalah untuk mengaktifkan fitur slider agar gambar bisa digeser)
Letakkan diatas kode </body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

4. Simpan Template

5. Pindah ke menu Postingan, buat postingan baru atau edit postingan lama.
6. Buka artikel dalam keadaan mode HTML
7. Copy kode HTML dasar dibawah ini :
<div id="myCarousel" class="carousel slide" style="width:100%">
<!-- Indikator -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
<li data-target="#myCarousel" data-slide-to="3" ></li> 
</ol>

<!-- Gambar yang akan dimasukkan ke Slide -->
<div class="carousel-inner">
<div class="item active">KODE GAMBAR DISINI</div>
<div class="item ">KODE GAMBAR DISINI</div>
<div class="item ">KODE GAMBAR DISINI</div>
<div class="item ">KODE GAMBAR DISINI</div>
</div>

<!-- navigasi Kiri dan Kanan -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="color:white">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="color:white">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

-------------------------------------------
-------------------------------------------
Petunjuk :
1 Ganti teks "KODE GAMBAR DISINI" dengan kode GAMBAR milik kalian. Serta tambahkan style width 100% didalamnya.

Misal URL gambarnya adalah https://sites.google.com/site/sotazone/bgtoku.png
Maka penulisan kodenya adalah sebagai berikut :
<img src="https://sites.google.com/site/sotazone/bgtoku.png" width="100%" />

Hasilnya seperti ini :
<div class="item active"><img src="https://sites.google.com/site/sotazone/bgtoku.png" width="100%" /></div>

2 Keterangan "active" pada kode :
<div class="item active">KODE GAMBAR DISINI</div>
<div class="item ">KODE GAMBAR DISINI</div>
<div class="item ">KODE GAMBAR DISINI</div>
<div class="item ">KODE GAMBAR DISINI</div>
adalah sebagai penentu gambar mana yang ingin ditampilkan terlebih dahulu. Jadi, kalian bisa menentukan gambar mana yang terlebih dahulu untuk tampil pada Slider. Keterangan "active" ini hanya boleh dipasang pada salah satu item saja.

Misal : jika ingin gambar kedua yang ingin ditampilkan terlebih dahulu, maka keterangan "active" nya tinggal dipasangkan ke item yang kedua saja.
<div class="item">KODE GAMBAR DISINI</div>
<div class="item active">KODE GAMBAR DISINI</div>
<div class="item">KODE GAMBAR DISINI</div>
<div class="item">KODE GAMBAR DISINI</div>
Apabila kalian tidak mau ambil pusing dalam hal ini, maka kodenya dibiarkan saja sesuai tutorial ini :v

3 Gambar yang dimasukkan alangkah baiknya memiliki ukuran dimensi yang sama, jadi apabila kalian menggunakan gambar berukuran 750x400 pixel maka gambar yang lainnya sebaiknya juga memiliki ukuran yang sama, yaitu 750x400 pixel.
-------------------------------------------
-------------------------------------------

8. Publikasi postingan kalian dan lihat hasilnya. Selesai
#PENTING
Kode ini sebaiknya dipasang pada tahap akhir setelah artikel siap dipublikasi, karena pemasangannya harus mode HTML. Ketika kode ini sudah siap, maka langsung dipublikasi saja (jangan pindah ke mode Compose)

Berikut ini adalah demo / hasil jadinya :

Silakan klik sisi kiri/kanan pada gambar dibawah ini

SOLUSI :
Apabila kalian menjumpai tampilan Gambar Slider yang seperti ini :

Permasalahan tersebut akibat dari settingan artikel yang menggunakan pengaturan seperti dibawah ini:


Maka, untuk mengatasi hal tersebut adalah cukup dengan menghapus ketiga bagian ini :
1. Keterangan <!-- Indikator -->
2. Sebuah (ENTER)
3. Keterangan <!-- Gambar yang akan dimasukkan ke Slide -->


Sehingga setelah ketiga bagian terebut dihapus, akan menghasilkan penampakan kode seperti dibawah ini :


TAMBAHAN :
Mengganti ikon tombol Next dan Previous
(ini sih penting gak penting sih sebenarnya :v)

Apabila kalian ingin mengganti ikon tombol Next dan Previous nya, maka kalian bisa masuk ke template blog dan cari kode ini :
.glyphicon-chevron-left:before atau .glyphicon-chevron-right:before
dari kedua kode tersebut kalian akan menjumpai content:"\f053" dan content:"\f054"
.glyphicon-chevron-left:before{content:"\f053";font-family:FontAwesome}
.glyphicon-chevron-right:before{content:"\f054";font-family:FontAwesome}
*property \f053 dan \f054 disebut dengan Unicode.

Cara menggantinya adalah :

1. Buka situs FontAwesome (https://fontawesome.com/v4.7.0/icons/)
2. Tulis dikolom pencarian FontAwesome, misalnya "Next"
3. Pilih / Klik salah satu FontAwesome yang akan dijadikan sebagai icon Next. Misalnya ikon jari telunjuk.

4. Lihat keterangan Unicode nya. Dalam contoh kali ini, Unicode tersebut adalah f0a4. Copy Unicode tersebut.


5. Masukkan kedalam property .glyphicon-chevron-right:before, hasilnya akan menjadi seperti ini
.glyphicon-chevron-right:before{content:"\f0a4";font-family:FontAwesome}
6. Simpan Template (untuk yang Previous, caranya juga sama)
#Pada saat mensetting bagian ini jangan sampai salah pasang ya.
- Left untuk Previous
- Right untuk Next

Mengedit Indikator Lingkaran

Pada tutorial ini, letak indikator lingkarannya berada didalam Slider dengan warna putih. Apabila ingin memindahkan posisinya sekaligus mengganti warnanya, maka kalian bisa mensetting berdasarkan kategori indikatornya.

1. Memindahkan posisi indikator

Cari kode ini :
.carousel-indicators
Fungsi property pada CSS .carousel-indicators ini adalah untuk menentukan posisi indikator lingkarannya, jadi jika ingin mengatur posisi indikatornya cukup main di kode ini saja. Ubah bottom nya menjadi seperti dibawah ini : 
bottom: -50px !important;
Semakin tinggi minus nya maka semakin kebawah posisi indikator lingkarannya.


2. Mengubah warna indikator

Warna pada indikator ini terbagi menjadi 2, yaitu warna border dan warna background.

a. Mengganti warna border
Cari kode ini :
.carousel-indicators li
ganti property border menjadi warna yang kalian inginkan
border: 1px solid #fff;
Misalnya : border: 1px solid red;

b. Mengganti warna background
Cari kode ini :
.carousel-indicators .active
ganti property background menjadi warna yang kalian inginkan
background-color: #fff;
Misalnya : background-color: blue;

HASILNYA AKAN NAMPAK SEPERTI DIBAWAH INI

Contoh warna border RED dan background BLUE
Nah, sisanya bisa kalian kembangkan sendiri.

KUNGGULAN :
  1. Dapat mempertahankan Pengunjung untuk lebih berlama-lama melihat postingan kita, jika mereka tertarik dengan fitur ini maka mereka akan bermain dengan tombol Next dan Previous nya.
  2. Mengurangi Bounce Rate
  3. Responsive
  4. Meningkatkan kualitas artikel
  5. Terkesan Pro
  6. Cocok untuk blog download yang ingin menggunakan fitur Gambar Slider layaknya PlayStore
Itulah informasi mengenai "Cara Membuat Gambar Slider didalam Postingan Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!






Lebih baru Lebih lama