Halo sahabat p3 dan blogger mania..wkwkwkwk....hahaha Posted Image
Kebetulan,saya mau membagikan javascript...
Nah,pasti kalian pernah memasang slider di blogger kan??tapi tidak automatic ganti setiap ada post baru...
Nah saya mencoba memberikan solusi kepada kalian semua....
step 1=
Login Blogger,lalu klik Layout > Edit Html
Cari =
]]></b:skin>
Copy paste code berikut sebelum kode di atas=
/* START-------------------------------------------------------------------- Automatic Content Slider for Blogger using Nivo Slider By http://www.abu-farhan.com-------------------------------------------------------------------- Nivo Slider*/[color=#0000FF]/*-----START Default Theme ----------------------------------------*/[/color].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;}[color=#0000FF]/*----- END Default Theme ----------------------------------------*/[/color]/* 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;}/* END Nivo Slider*/Step 2=Cari=
</body>
Copy paste kode berikut di sebelum kode di atas
<!-- jQuery --><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-modified.min.js' type='text/javascript'/> <script type='text/javascript'> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
Step 3=Sekarang pasang kode berikut di Design -> Click on ?Add a Gadget? -> HTML/JavaScript type.Pasang kan kode berikut
<div class="slider-wrapper theme-default"><div class="ribbon"></div> <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script><script style="text/javascript"> var numposts_gal = 6; //number of posts var image_height = 246; //image height var image_width = 618; //image width</script><script src="http://pwkllp.co.cc/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script></div>
Ganti tulisan pwkllp.co.cc dengan alamat blog anda...
Credit for
-Kang Abu Farhan
-Kang Catur
----------------------------------------------------------------------------------------------------------------------------
Home
Search
Login
Register