Memasang Slider Di Blog ~ .:: Cavalier Juhik ::.

Title : Memasang Slider Di Blog | Category : Blogging

Nah bagi sobat blogger yang ingin memperindah tampilan blog sobat sekalian, malam ini saya share sebuah widgget yang sangat menarik dan bagus jika di pasang pada blog sobat sekalian. langsung aja nih tutornya :

Masuk/Login ke akun blogger sobat
Klik Rancangan → Edit HTML
Jangan lupa centang Expand Template Widget
Cari kata ]]></b:skin>
Letakkan code di bawah ini, tepat diatas kata ]]></b:skin> :

/*-----START Default Theme ----------------------------------------*/ .theme-default .nivoSlider { position:relative; background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a; } .theme-default .nivoSlider img { position:absolute;top:0px;left:0px;display:none; } .theme-default .nivoSlider a { border:0;display:block; } .theme-default .nivo-controlNav { position:absolute;left:50%;bottom:-42px; margin-left:-40px; /* Tweak this to center bullets */ } .theme-default .nivo-controlNav a { display:block;width:22px;height:22px; background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat; text-indent:-9999px;border:0;margin-right:3px;float:left; } .theme-default .nivo-controlNav a.active { background-position:0 -22px; } .theme-default .nivo-directionNav a { display:block;width:30px;height:30px; background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat; text-indent:-9999px;border:0; } .theme-default a.nivo-nextNav { background-position:-30px 0;right:15px; } .theme-default a.nivo-prevNav { left:15px; } .theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a { color:#fff; border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover { color:#fff; } /*----- END Default Theme ----------------------------------------*/ /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute;top:0px;left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute;top:0px;left:0px;width:100%;height:100%;border:0; padding:0;margin:0;z-index:6;display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } .theme-default #slider { margin:100px auto 50px auto; width:618px; /* Make sure your images are the same size */ height:246px; /* Make sure your images are the same size */ } .theme-pascal.slider-wrapper, .theme-orman.slider-wrapper { margin-top:150px; } .clear { clear:both; }

Kemudian cari kata </body>
Letakkan code di bawah ini, tepat diatas kata </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modivied.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider#39;).nivoSlider();
});
</script>

Simpan Template !!!
Kembali ke Elemen Laman
Klik Tambah Gatget → HTML/Javascript
Masukkan code berikut:

<div class="slider-wrapper theme-default"
<div class="ribbon"></div>
<script style="text/javasript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javasript">
var numposts_gal = 6; //number of posts
var image_height = 246; //image height
var image_width = 618; //image width
</script>
<script src="http://cavalierjuhik.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>