Auto slider bagian satu

Tutorial-Onlineku.Bagi anda yang mau pasang slider silahkan ikuti langkah berikut:

===>( DEMO SLIDER )<===

To the point saja mas bro,lagi males nulis tapi pengen isi postingan,semoga mas bro cepat paham dan mudah di mengerti untuk penjelasan saya di bawah ini.

Simpan code di bawwah ini di atas code ]]></b:skin>

.tutorial-onlineku {
height: 200px;
width: 526px;
padding:0;
margin:0;
overflow: hidden; }
.tutorial-onlineku img {
height: 198px;
width: 524px;
padding: 0px;}
.tutorial-onlineku img ,.tutorial-onlineku ,#slider{
background:transparents;
border: 1px solid #FDA200;}

Selanjutnya Simpan JavaScript berikut di atas kode </head>

<script src='http://tutorial-onlineku.googlecode.com/files/jquery-1.4.2.js' type='text/javascript'/>
<script src='http://tutorial-onlineku.googlecode.com/files/Jquery-4.0.4.js' type='text/javascript'/>
<script type='text/javascript'>$(&#39;#slider&#39;).cycle({fx:&#39;custom&#39;,cssBefore:{left: 232,top: -232,display: &#39;block&#39;},animIn: {left: 0,top: 0},animOut: {left: 232,top: 232},delay: -2000});</script>

Selanjutnya simpan TAMPLATE anda.

Lalu langkah terahir Simpan code di bawah ini pada tab Tambah Gedget HTML/Javasript Seperti scrinshot berikut ini:

<center>
<div class="tutorial-onlineku" id="slider" style="position: relative; ">
<img src="http://1.bp.blogspot.com/-tThezlmzc-w/UDR6EJIfE-I/AAAAAAAAAC8/NXtzmQPBgPE/s320/sunset+di+pantai+sanur.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 6; opacity: 5; " />
<img src="http://1.bp.blogspot.com/-Hr29_GcV5a8/UD1Hzc8OObI/AAAAAAAAAFE/OjGV2jmabyA/s1600/nasi+goreng.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 5; " />
<img src="http://4.bp.blogspot.com/-y5d6hxR9oag/UEFE_7BGOEI/AAAAAAAAAG8/6IweWAXHFf0/s320/demo.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 4; " />
<img src="http://3.bp.blogspot.com/-yht602WpOjk/UD1OEybnKjI/AAAAAAAAAFU/vwc65H0n_bo/s1600/teh+tawar.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 3; " />
<img src="http://3.bp.blogspot.com/-OOFglIrVNNs/UDnBcrxtbQI/AAAAAAAADis/FDHzSeOcgyA/s1600/tutorial.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 2; " />
<img src="http://3.bp.blogspot.com/-VPXzZoPQwvI/UCT8FNgG2cI/AAAAAAAADWM/NmR9cwcaUa4/s1600/raya_ketupat.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 1; " />
</div>
</center>

Lalu simpan gedget anda dan lihat hasilnya.

Ket:Silahkan ganti tex yang saya kasih tanda merah dg url gambar yang kalian inginkan.

Atau anda mau pasang SiteMap pada blog anda silahkan baca tutorialnya

==> (==di sini ==)<===

Ditulis Oleh : Anonymous

Artikel Auto slider bagian satu ini ditulis oleh Anonymous pada hari . Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Auto slider bagian satu dapat Anda sampaikan melalui kotak komentar dibawah ini.

:: Get this widget ! ::

Anda sedang membaca artikel tentang Auto slider bagian satu dan anda bisa menemukan artikel Auto slider bagian satu ini dengan url http://tutorial-onlineku.blogspot.com/2012/09/auto-slider-bagian-satu.html. Anda boleh menyebarluaskan atau mengcopy artikel Auto slider bagian satu ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.Tutorial Onlineku | Tutorial Blogspot | Tutorial Blogger | Tutorial Bagi Fomula

Share :