Slider Responsive Blogger

Slider Responsive Blogger

kholilrohman 07.45
kholilrohman
Tutorial Memasang Slider Di Blog:
1. Simpan CSS ini di atas ]]></b:skin> atau </style>



How to Create a Responsive Slider In Blog




<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(http://2.bp.blogspot.com/-DCmjx6RoZr4/USE6_AtfkoI/AAAAAAAAIew/Kymik1Hv4sY/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(http://2.bp.blogspot.com/-wlQ0ByipI94/USJMy6cTt4I/AAAAAAAAIhI/0ZQk2Nw-F-Y/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(http://3.bp.blogspot.com/-0sdXIJ1gg7E/USJMx9yN_NI/AAAAAAAAIg8/_c5LEVNSzyU/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(http://4.bp.blogspot.com/-z8Ap4NNJRac/USJMxgHGlDI/AAAAAAAAIg4/wblKthAlpyQ/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://namablog.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/AVvXsEi0vd8LCCw7OdvFNfzRaFL-wmkdARCVJNGjfUu__ygtoAoWdy7XfwIJE3oQsjjHBxiZcTOjHvXT1fk_2sPwY0d4vaK6uUBhtmvcAvPlxFfVIPy5IC2hjtrB1nZsN8ZmmI2QmYc5rqC3O5Y/s1600/noimage.jpg",
tagName:false
});
});
//]]>
</script>
</div>
<div style="clear: both;">
</div>



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

Share this

Related Posts

Next
« Prev Post
Previous
Next Post »

Langganan: Posting Komentar (Atom)