Cara Membuat Slider Responsive Pada Blog

How to Create a Responsive Slider In Blog : Pada kesempatan kali ini saya akan sharing salah satu Slider Responsive yang terpasang pada Blog Demo saya yang lumayan keren dan juga ringan, yang setahu saya slider ini buatan Agit Anugrah tapi entahlah betul atau tidak yang pasti saya tetap berteri makasih kepada beliau yang telah membagikannya kepada teman-teman blogger lewat situsnya www.agitanugrah.com. Jadi sebelum menuju pada tutorial di bawah, saya sampaikan apabilah ada kekurangan atau kelebihan pada tutorial ini saya mohon maaf, jadi untuk lebih jelasnya tentang tutorial ini cobalah langsung ke alamat Url sipembuat yang saya maksudkan tadi diatas. Namun apabilah ada pertanyaan nanti saya akan bantu untuk menjawab sesuai dengan kemampuan saya.

Baca Juga :

• MEMBUAT BREADCRUMBS SEO FRIENDLY DAN VALID HTML5

Ingat kata pepata sedia payung sebelum hujan jadi sebelum memasang slider ini back up terlebih dahulu template Anda untuk berjaga-jaga terjadinya kesalahan.

Tutorial Memasang Slider Di Blog:

1. Simpan CSS ini di atas ]]></b:skin> atau </style>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* Skitter Slideshow */
#skitterslideshow{padding:3px;background:#f6f7f8;border:1px solid #eee;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,.15);}
#slider{padding:0 7px 20px}
#slider-wrapper-agit{padding:0;background-color:#1274b5;box-shadow:0 1px 5px rgba(0,0,0,.15);-moz-box-shadow:0 1px 5px rgba(0,0,0,.15);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;height:310px;position:relative;z-index:8888}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden;position:relative;width:100%;height:100%}
.box_skitter .image{overflow:hidden;max-width:100%;max-height:100%;height:100%;border:none}
.box_skitter .image img{display:none;width:100%;height:100%;border:none}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.box_skitter img{max-width:none;border:none}
.box_skitter .box_clone img{position:absolute;top:0;width:619px;height:310px;max-width:630px;left:0;z-index:19}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em}
.box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75}
.box_skitter .info_slide .image_number{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.box_skitter .info_slide_thumb{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg,#555,#fff);background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333}
.box_skitter .info_slide_dots .image_number{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00;float:left;margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80;position:absolute;bottom:0;left:0;display:none}
.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:#FFF no-repeat left top;width:32px;height:32px}
.label_skitter{z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.9;background:#000}
.label_skitter p{padding:5px;margin:0}
.info_slide *{}
.box_skitter .progressbar{background:#000;position:absolute;bottom:5px;left:10px;height:5px;width:940px;z-index:99;border-radius:20px}
.preview_slide{display:none;position:absolute;z-index:999;bottom:40px;left:-40px;width:100px;height:55px;border:3px solid #111;background:rgba(0,0,0,.5);-moz-box-shadow:rgba(0,0,0,0.7) 0 0 10px;-webkit-box-shadow:rgba(0,0,0,0.7) 0 0 10px;box-shadow:rgba(0,0,0,0.7) 0 0 10px;overflow:hidden}
.preview_slide ul{width:100px;height:55px;padding:0;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0}
.preview_slide ul li{width:100px;height:55px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block}
.preview_slide ul li img{position:absolute;top:0;left:0;height:55px;width:100px}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.box_skitter_home{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArRvLyCvpLycvqo-Ch8u3ycNpFffvML771yLa8gPnL3rUHmXsMIvCL7aoTM0QIV_mCIJkG7YdaomLBoXsGeyanoFn3uiI4ImfmAXiP8PPoL0wEECOBhXHTJ486rtJxEmn-x-aflY-e_A/s1600/anim_loading_sm_082208.gif);background-position:center center;background-repeat:no-repeat}
.box_skitter_home.agit-theme .info_slide{}
.box_skitter_home.agit-theme .info_slide_dots{bottom:0;width:130px;right:10px;position:absolute;height:30px;padding:0 8px;z-index:99}
.box_skitter_home.agit-theme .info_slide_dots span{transition:background linear .3s;-webkit-transition:background linear .3s;-moz-transition:background linear .3s;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsN3rRD2Vv9JreaT_PYan9elPXjrVJwEdRub316-4j7udRsrNDn7xso_A4di_ZfqwPe09zpsweDnMxMV8Z_Cq7IU-YxHIJchcYvIBMJAbcfjmAnkrQFnxsuMt_SWvYNbIp_4a6bpEfs4/s1600/light-overlay.png);background-repeat:repeat-x;background-position:left -13px;background-color:#474747;color:#777;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border-bottom:1px solid #141414;display:block;width:10px;height:10px;text-indent:-9999px;float:left;margin:10px 6px 0 6px}
.box_skitter_home.agit-theme .info_slide_dots span:hover{background-color:#777}
.box_skitter_home.agit-theme .info_slide_dots span.image_number_select{background-color:#1484CE;border:none;width:14px;height:14px;margin:8px 3px 0 3px;box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1);-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.agit-theme .prev_button,.box_skitter_home.agit-theme .next_button{display:block;width:55px;height:22px;line-height:30px;text-decoration:none;font-size:10px;text-transform:uppercase;transition:none;-webkit-transition:none;-o-transition:none;-moz-transition:none;text-indent:0;bottom:4px;background-color:rgba(46,46,46,0.77);top:auto;color:#B4B2B2;z-index:98;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.box_skitter_home.agit-theme .prev_button:hover,.box_skitter_home.agit-theme .next_button:hover,.box_skitter_home.agit-theme .prev_button:active,.box_skitter_home.agit-theme .next_button:active{opacity:1!important}
.box_skitter_home.agit-theme .next_button{left:65px;padding-right:5px;text-align:right;line-height:22px}
.box_skitter_home.agit-theme .next_button span{padding-right:15px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtcG_ZSbF0AjRfR0d8HQsCpj96-7Ivr8zKvxMCDt7Jh-t1hx80neaG02NXAB8-HlhLzxB_p619sOJCFiFMq0gY1jt6T6or4ORgDC8GPwbEAmKCwWa627xCZdxWQ5gPpGYRroW9UWV_J0/s1600/nav-next.png) no-repeat left top;background-position:right center;padding-bottom:1px}
.box_skitter_home.agit-theme .prev_button{left:5px;padding-left:5px;text-align:left;line-height:22px}
.box_skitter_home.agit-theme .prev_button span{padding-left:15px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqldVXJY24od2b9Bx1OsFBcYf4psL0fpbYCaSISzOHDLbHzLtE4HRHKk6JZuKhfrQgn9OfFEKx12QhlrwFo9MEH0w0LWqFonVQQb58oJiQECIH1U1loSXnUx0gh82zoQffZUzFHlef9Z8/s1600/nav-prev.png) no-repeat left top;background-position:left center;padding-bottom:1px}
.box_skitter_home.agit-theme .label_skitter{background:#1484CE;width:90%;padding:5px 8px 5px;left:50%;margin-left:-49%;bottom:10%;text-align:left;height:auto;color:white}
.box_skitter_home.agit-theme .label_skitter p{padding:0;margin-top:5px;margin-bottom:5px;font-size:80%;text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.agit-theme .label_skitter h4{margin-top:0;line-height:22px!important;font-size:90%;text-shadow:0 1px 0 rgba(0,0,0,.3);color:white}
.box_skitter_home.agit-theme .label_skitter a{color:#fff;text-decoration:none}
.box_skitter_home.agit-theme .label_skitter a:hover{color:#fff}
.box_skitter_home.agit-theme .info_slide_thumb{background-color:#FFF}
.box_skitter.agit-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date,.box_skitter .container_skitter .cm{font-size:8px}
.box_skitter .container_skitter .date span{margin-right:3px}
#slider .widget{margin:0;padding:0}
#slider h2{display:none}
@media only screen and (min-width:768px) and (max-width:990px){
.box_skitter .box_clone img{width:432;;height:310px}
}
@media only screen and (max-width:767px){
#slider{padding:5px 0px 10px;margin:0 auto 10px;float:none;width:100%}
.box_skitter .box_clone img{width:480px;height:310px}
}
@media only screen and (max-width:499px){
.box_skitter .box_clone img{width:410px;height:310px}
}
@media only screen and (max-width:479px){
#slider-wrapper-agit{height:250px}
.box_skitter .box_clone img{width:270px;height:250px}
}
</style>
</b:if>

2. Selanjutnya letakkan script di bawah ini tepat di atas </head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://static-agitanugrah.googlecode.com/svn/cdn/js/skitterslideshow.js' type='text/javascript'/>

Kode yang berwarna kuning adalah kode jquery, jadi jika di template Anda sudah terdapat kode tersebut versi berapa saja, maka kode jquery tersebut di atas tidak perlu di pasang lagi.

3. Selanjutnya cari kode <b:section class='main' id='main' preferred='yes'> dan letakkan kode pemanggilnya di bawah ini di atasnya, namun karena kode pada setiap template berbeda silahkan cari saja kode id='Blog1' untuk mempercepat pencarian

<div id="slider">
<div id="skitterslideshow">
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
skitteragit({
blogURL:'http://tutorialnes.blogspot.com/',
MaxPost:5,
RandompostActive:false,
ImageSize:500,
NumCharacter:150,
idcontaint:"#skitterslideshow",
cmtext:"comments",
NoCmtext:"No Comment",
pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC7HUUfnfQQSTjsaQEVkoJhWhZgoft9_bH_Qp_KuW631SBR_Nv1yNWVKYe6Ub9n0v46eCLnjjWuANPfVX0tBBFnlOeLlI4RntP3TR9BvO7KoqszfY10bZw5FY6ULWALmLy4fwynxPLUVM/s1600/noimage.jpg",
tagName:false
});
});
//]]>
</script>
</div>
<div style="clear: both;">
</div>

Keterangan :
Silahkan ganti Url yang ditandai didalamnya dengan url Blog Anda

Demo

Sumber : http://www.agitanugrah.com/2013/06/jquery-skitter-slideshow-untuk-blogger.html