autou slide show - Hallo sahabat Campur Aduk.Com, Pada Artikel yang anda baca kali ini dengan judul autou slide show, kami telah mempersiapkan berita news hari ini... untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : autou slide show
link : autou slide show

autou slide show

1. LogIn ke akun blogger.
2. Setelah masuk dasbor, Pilih Rancangan/Design.
3. Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu �edit elemen�.
4. Beri centang pada kotak �Expand Widget Templates�.
5. Tekan CTRL + F di keyboard, masukkan kata kunci ]]></b:skin> ke dalam kotak find.
6. Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]></b:skin>.

#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; }

Selanjutnya carilah kode </body>. Copy Script code berikut dan letakkan tepat di atas kode </body>.

<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>

Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu �Rancangan�, atau dalam blog versi English �Design�. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda �+� pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget.

<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://lintangarta.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

</div>

Keterangan: Gantilah kode yang dicetak Biru dengan alamat url blog Anda. Simpan, dan lihat hasilnya.

Demikianlah Artikel autou slide show

Sekianlah artikel autou slide show kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel autou slide show dengan alamat link https://artapictures.blogspot.com/2012/10/autou-slide-show.html

Tweet