Cara Membuat Slider Gambar Ringan Responsive Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial blogger sederhana tentang bagaimana cara membuat slider gambar sederhana, ringan, dan responsive di blogger. Slider gambar ini sangat berguna. Pengunjung dapat melihat artikel menarik yang kita tampilkan di sana. Langsung saja, berikut ini adalah sedikit previewnya :

Demo

Bagaimana? Kalian tertarik? Langsung saja. Berikut ini adalah cara membuatnya :

• Pertama masuk ke dasboard blog kalian.
• Masuk ke Tata Letak.
• Pastikan ada Tambahkan Gadget di atas widget Blog Posts kalian.
• Jika belum ada, masuk ke Template.
• Pilih Edit HTML.
• Cari kode <b:section class='main' id='main' showaddelement='no'>.
• Ganti no dengan yes.
• Jika sudah, sekarang akan ada Tambahkan Gadget di atas widget Blog Posts kalian.
• Klik Tambahkan Gadget.
• Pilih HTML/JavaScript.
• Masukkan kode di bawah ini :

<style type="text/css">
.slider-box { background:none repeat scroll 0 0 #eff0ef;  margin:0 auto; margin-bottom:-100px; width:100%; overflow:hidden; }
#slider-wrapper { margin:0 auto; padding:10px; }
#jslider-container { border:2px solid #FFFFFF; max-width:100%; position:relative; text-align:left; z-index:90; }
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin,latin-ext");
* html #jslider-container{ width: 100% }
.slider-box {
    background: none repeat scroll 0 0 #eff0ef;
    margin: 0 auto;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #34495e;
    max-width: 100%;
    position: relative;
    text-align: left;
    z-index: 90;
}
#jslider-container .jslider_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#jslider-container .jslider_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#jslider-container .jslider_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#jslider-container .jslider_images a{
width:100%;
display:block;
color:transparent;
}
#jslider-container img{
max-width: none !important;
}
#jslider-container .jslider_images img{
width:100%;
border:none 0;
max-width: none;
padding:0;
}
#jslider-container a{
text-decoration: none;
outline: none;
border: none;
}
#jslider-container  .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#jslider-container  .ws_bullets div{
position:relative;
float:left;
}
#jslider-container  a.wsl{
display:none;
}
#jslider-container  .ws_bullets {
padding: 10px;
}
#jslider-container .ws_bullets a {
margin-left:4px;
width:9px;
height:9px;
background: url(./bullet.png) left 50% no-repeat;
float: left;
text-indent: -4000px;
position:relative;
color:transparent;
}
#jslider-container .ws_bullets a.ws_selbull, #jslider-container .ws_bullets a:hover{
background-position: right 50%;
}
#jslider-container a.ws_next, #jslider-container a.ws_prev {
position:absolute;
display:none;
top:50%;
margin-top:-28px;
z-index:60;
height: 48px;
width: 48px;
background-image: url(../images/arrows.png);
}
#jslider-container a.ws_next{
background-position: 100% 0;
right:5px;
}
#jslider-container a.ws_prev {
left:5px;
background-position: 0 0;
}
#jslider-container a.ws_next:hover{
background-position: 100% 100%;
}
#jslider-container a.ws_prev:hover {
background-position: 0 100%;
}
* html #jslider-container a.ws_next,* html #jslider-container a.ws_prev{display:block}
#jslider-container:hover a.ws_next, #jslider-container:hover a.ws_prev {display:block}
/* bottom center */
#jslider-container .ws_bullets {
top:0;
    right: 0;
}
/* separate */
#jslider-container .ws-title{
position: absolute;
display:block;
bottom:20px;
left:25px;
margin-right:25px;
z-index: 50;
color: #6E7476;     font-family: 'Source Sans Pro',Arial,sans-serif;
font-size: 22px;
line-height: 24pxpx;
}
#jslider-container .ws-title div,#jslider-container .ws-title span{
display:inline-block;
margin-top:10px;
padding: 7px;
background:#FFFFFF;
font-weight: normal; border-radius:0;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
#jslider-container .ws-title div{
display:block;
margin-top:10px;
background:#6cbe42; color: #FFFFFF;
}
#jslider-container  .jslider_thumbs {
font-size: 0px;
position:absolute;
overflow:auto;
z-index:70;
}
#jslider-container .jslider_thumbs a {
position:relative;
text-indent: -4000px;
color:transparent;
opacity:0.85;
}
#jslider-container .jslider_thumbs a:hover{
opacity:1;
}
#jslider-container .jslider_thumbs a:hover img{
visibility:visible;
}
#jslider-container  .jslider_thumbs {
    right: -106px;
    top: 0;
width:101px;
height:100%;
}
#jslider-container  .jslider_thumbs div{
position:relative;
width:100%;
}
#jslider-container .jslider_thumbs .ws_selthumb img{
border-color:#6cbe42;
}
#jslider-container .jslider_thumbs  a img{
margin:3px;
text-indent:0;
    border: 5px solid #FFFFFF;
max-width:none;
}
#jslider-container .jslider_images ul{
animation: wsBasic 24s infinite;
-moz-animation: wsBasic 24s infinite;
-webkit-animation: wsBasic 24s infinite;
}
@keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
@-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
@-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
#jslider-container .ws_bullets  a img{
text-indent:0;
display:block;
top:16px;
left:-43px;
visibility:hidden;
position:absolute;
    border: 5px solid #FFFFFF;
max-width:none;
}
#jslider-container .ws_bullets a:hover img{
visibility:visible;
}
#jslider-container .ws_bulframe div div{
height:48px;
overflow:visible;
position:relative;
}
#jslider-container .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:85px;
background-color:#DEDEDE;
}
#jslider-container  .ws_bullets .ws_bulframe{
display:none;
top:15px;
overflow:visible;
position:absolute;
cursor:pointer;
    border: 5px solid #FFFFFF;
}
#jslider-container .ws_bulframe span{
display:block;
position:absolute;
top:-11px;
margin-left:-7px;
left:43px;
background: url(triangle.png);
width:13px;
height:7px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box"><div id="slider-wrapper"><div id="jslider-container"><div class="jslider_images"><ul><li><a href="http://zenydroid.blogspot.com/search/label/Wallpaper"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir8MyRH0cF5JWm22x_d9GxfIWMybkT63ttDJESrqdoY_j24E66r-OcrMdduQba12wDklhV3cTKelMEy2cmFACQ5yfI2qxlIIR0s5TnjPOqvWwUSngAE4WWdijWiXf125lt4YgDVd4MCJU/s1600/sample3.png" title="Download Kumpulan Wallpaper Keren"/></a></li><li><a href="http://zenydroid.blogspot.com/2015/05/mezamashi-manager-apk-untuk-android.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikQc2fveRB9XKm4evGLO934M-idsgpaoi_BhTnJQZCnABadw6vykpyEpMnVipEBLl20o3Fag81t2EtmxvB30HDlwCHwzaDNKIoIjc0Z394DA2WMfcCvnpAoxfJtF8Ud9mRmFgLDjv_3Y/s1600/sample31.png" title="Download Mezamashi Manager Apk"/></a></li>
<li><a href="http://zenydroid.blogspot.com/2015/05/sao-launcher-sword-art-online-v304-pro.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0qG6UtlxPBlwxexlmp1MT33gBXOt65d3NW7t0fgs_iuQtFFmmfiG5KdIYZqMrKx6ocafX6hFcMkdn3v5GB57BmQkysgrvl_8eHXnbHsmh06crwTRQYfin6CBTdwtErcwfxpfobEfE88/s1600/sample3111.png" title="Download SAO Launcer Untuk Android"/></a></li><li><a href="http://zenydroid.blogspot.com/search/label/Lock%20Screen"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYPMM4Ktb_pacWq-CB1mlvdSwntChgguIUmxEfb5X40vMK04qa8jD90pwRlpPGmhMUQVuBYdoFQUQiRcyEy8paiPfqdkApRl4MVujBESXmUl8_pOyq8RWAsOqGbuSKFANYbHC_wAclF0/s1600/sample311.png" title="Download Kumpulan Lock Screen Anime"/></a></li></ul></div></div></div></div>

• Terakhir tinggal disimpan.

Keterangan :

Ganti kode yang berwarna ORANGE dengan link url postingan atau halaman kalian.

Ganti kode yang berwarna BIRU dengan link url gambar yang ingin ditampilkan.

Ganti kode yang berwarna UNGU dengan judul.

Jika kalian ingin Slider hanya tampil di halaman utama saja, kalian bisa mengikuti langkah berikut :

• Masih di dasboard, pilih Template.
• Masuk ke Edit HTML.
• Cari kode yang mirip seperti kode di bawah ini :

<b:widget id='HTML5' locked='false' title='' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
          </b:widget>

 Keterangan :

Kode yang berwarna CYAN adalah ID widget yang tadi kalian buat untuk slider.

• Letakkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah <b:includable id='main'> dan </b:if> di atas kode </b:includable> seperti berikut :

<b:widget id='HTML5' locked='false' title='' type='HTML'>            <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->  <b:if cond='data:title != &quot;&quot;'>    <h2 class='title'><data:title/></h2>  </b:if>  <div class='widget-content'>    <data:content/>  </div>  <b:include name='quickedit'/></b:if>
</b:includable>          </b:widget>

• Terakhir tinggal disimpan.

Bagaimana? Agak ribet ya? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Share :

Facebook Google+ Twitter