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

Judul: Auto slider bagian satu; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts