Tutorial Blog: Membuat JQuery Slide Show

-Pilih Rancangan>>Edit HTML
-Copy kode dibawah, kemudian paste dibawah kode :<body>

-Ganti tulisan Judul image dan keterangan image dengan tulisan sesuai yang kamu inginkan
-Copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>

*{ margin:0; padding:0; } html{ height:100%; } body{ height:100%; color:#a4a4a4; cursor:default; font-size:20px; line-height:16px; text-align:center; background-color:#000; background-position:50% 0; background-repeat:no-repeat; font-family:Tahoma,sans-serif; } a:link,a:visited{ color:#fff; text-decoration:none; } a img{ border:0; div.wrap{ width:550px; margin:0 auto; text-align:left; } div#top div#nav{ float:left; clear:both; width:550px; height:52px; margin:22px 0 0; } div#top div#nav ul{ float:left; width:550px; height:52px; list-style-type:none; } div#nav ul li{ float:left; height:52px; } div#nav ul li a{ border:0; height:52px; display:block; line-height:52px; text-indent:-9999px; } div#header{ margin:-1px 0 0; } div#video-header{ height:550px; margin:-1px 0 0; } div#header div.wrap{ height:299px; } div#header div#slide-holder{ z-index:40; width:550px; height:299px; position:absolute; } div#header div#slide-holder div#slide-runner{top:9px; left:9px; width:550px; height:278px; overflow:hidden; position:absolute; } div#header div#slide-holder img{ margin:0; display:none; position:absolute; } div#header div#slide-holder div#slide-controls{ left:0; bottom:228px; width:550px; height:46px; display:none; position:absolute; background:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZax8SMwKoI/AAAAAAAACQU/jKYyP3pkefo/s128/slide-bg.png) 0 0; } div#header div#slide-holder div#slide-controls p.text{ float:left; color:#fff; display:inline; font-size:10px; line-height:16px; margin:15px 0 0 20px; text-transform:uppercase; } div#header div#slide-holder div#slide-controls p#slide-nav{ float:right; height:24px; display:inline; margin:11px 15px 0 0; } div#header div#slide-holder div#slide-controls p#slide-nav a{ float:left; width:24px; height:24px; display:inline; font-size:11px; margin:0 5px 0 0; line-height:24px; font-weight:bold; text-align:center; text-decoration:none; background-position:0 0; background-repeat:no-repeat; } div#header div#slide-holder div#slide-controls p#slide-nav a.on{ background-position:0 -24px; } div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZatkNZ9vdI/AAAAAAAACQE/XnxeOeqYwF8/silde-nav.png);} div#nav ul li a{background:url(https://lh5.googleusercontent.com/_1j80TgNqd_8/TZax-eNRtRI/AAAAAAAACQY/ci4_hxU0QgM/s912/header-bg.png) no-repeat;}

-Ganti seluruh ukuran width yang disesuaikan dengan lebar tempat meletakan slide show
-Copy kode dibawah ini kemudian paste tepat diatas kode </head>

-Simpan Template

*Kemudian ke Rancangan>>elemen laman>>tambah gadget>>pilih html/javascript

-Simpan

Tutorial Blog

Selasa, 07 Juni 2011

Membuat JQuery Slide Show

Tidak ada komentar:

Posting Komentar