Caranya adalah sebagai berikut:
Pertama log in ke blogger anda trus klik >>> layout >>> edit html >>> centeng expand widget template
Kedua cari code ]]></b:skin> dan letakkan code ini diatasnya :
Ketiga cari code </body> dan letakkan code dibawah ini diatas code tersebut :
Kemudian save ...
Kembali ke template anda klik add gadget dan masukkan code ini di dalam html/java script anda
dan masukkan code dibawah ini di dalamnya
<div id="slider-wrap"> <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-FeaturedContentSlider.js"></script> <script style="text/javascript"> var numposts_gal = 6; //recommended var numchars_gal = 150; var random_posts = false; // random posts </script> <script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>
Note : http://abu-farhan-demo.blogspot.com ganti dengan url blog anda SELESAI and ENJOY
Thanks for abu farhan
Pertama log in ke blogger anda trus klik >>> layout >>> edit html >>> centeng expand widget template
Kedua cari code ]]></b:skin> dan letakkan code ini diatasnya :
/* START
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com
http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/
--------------------------------------------------------------------
Featured Content Slider
*/
#slider-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;font-size: 10px; background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-bg.png) top center; }
.slider-wrap{ font-family: Arial, Helvetica, sans-serif; width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav{ display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -46px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data{ background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-transpBlack.png); padding: 10px; height: 40px; margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -10px; position: relative; padding-top: 10px; z-index: 9999; }
.active-thumb { background: transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-icon-uparrowsmallwhite.png) top center no-repeat; }
/* END
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com
--------------------------------------------------------------------
Featured Content Slider
*/
Ketiga cari code </body> dan letakkan code dibawah ini diatas code tersebut :
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/FeaturedContentSlider.pack.js"></script>
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 3000);
};
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
</script>
Kemudian save ...
Kembali ke template anda klik add gadget dan masukkan code ini di dalam html/java script anda
dan masukkan code dibawah ini di dalamnya
<div id="slider-wrap"> <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-FeaturedContentSlider.js"></script> <script style="text/javascript"> var numposts_gal = 6; //recommended var numchars_gal = 150; var random_posts = false; // random posts </script> <script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>
Note : http://abu-farhan-demo.blogspot.com ganti dengan url blog anda SELESAI and ENJOY
Thanks for abu farhan
0 Response to "Automatic Content Slider jQuery by abu farhan"