MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda


SYAMSUDINNAMAKU telah hadir

Cara Membuat Featured Image Slider Dengan JQuery


Featured Image Slider ini berfungsi untuk menampilkan
gambar yang kita suguhkan secara bergiliran layaknya
seperti slide show yang saya yakin anda sudah
mengenalnya. Untuk lebih jelasnya, anda bisa lihat
contohnya seperti terdapat di bawah ini :

Cara Membuat Featured Image Slider Dengan JQuery

Untuk membuatnya tidaklah begitu sulit.
Ikuti langkahnya seperti berikut ini :


1.  Rancangan -> Tambah Gadget ->
     pilih HTML/JavaScript.

2.  Masukkan ke dalam kontennya
     kode yang di bawah ini :

<div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="URL Gambar Kecil 01 Di Sini" /><span><b>01</b></span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="URL Gambar Kecil 02 Di Sini" /><span><b>02</b></span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="URL Gambar Kecil 03 Di Sini" /><span><b>03</b></span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="URL Gambar Kecil 04 Di Sini" /><span><b>04</b></span></a></li>
    </ul>
    <!-- First Image -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="URL Gambar Besar 01 Di Sini" />
        <div class="info" >
        <a href="#" ><center><b>Judul Gambar 01 Di Sini</b></center></a>
        <p>Keterangan Gambar 01</p>
        </div>
    </div>
    <!-- Second Image -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="URL Gambar Besar 02 Di Sini" />
        <div class="info" >
        <a href="#" ><center><b>Judul Gambar 02 Di Sini</b></center></a>
        <p>Keterangan Gambar 02</p>
        </div>
    </div>
    <!-- Third Image -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="URL Gambar Besar 03 Di Sini" />
        <div class="info" >
        <a href="#" ><center><b>Judul Gambar 03 Di Sini</b></center></a>
        <p>Keterangan Gambar 03</p>
        </div>
    </div>
    <!-- Fourth Image -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="URL Gambar Besar 04 Di Sini" />
        <div class="info" >
        <a href="#" ><center><b>Judul Gambar 04 Di Sini</b></center></a>
        <p>Keterangan Gambar 04</p>
        </div>
    </div></div>

KETERANGAN =

Gantilah ke-4 (empat) gambar kecil dan besarnya
dengan gambar yang anda inginkan, pada kode :
URL Gambar Kecil Di Sini
URL Gambar Besar Di Sini

Tuliskan judul dan keterangan gambar yang
terdapat pada kode di atas.

3. Lalu masuk ke Edit HTML

4. Cari kode </b:skin>

5. Letakkan sebelum kode </b:skin>
    kode yang berikut ini :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
#featured{
        width:250px;
        padding-right:120px;
        position:relative;
        height:250px;
        background:#ffffff;
        border:5px solid #00cc99;
    }
    #featured ul.ui-tabs-nav{
        position:absolute;
        top:0; left:250px;
        list-style:none;
        padding:0; margin:0;
        width:120px;
    }
    #featured ul.ui-tabs-nav li{
        padding:1px 0; padding-left:10px;
        font-size:12px;
        color:#666;
    }
    #featured ul.ui-tabs-nav li span{
        font-size:9px; font-family:Verdana;
        line-height:17px;
    }
    #featured .ui-tabs-panel{
        width:250px; height:250px;
        background:#999; position:relative;
            overflow:hidden;
    }
    #featured .ui-tabs-hide{
        display:none;
    }
    #featured li.ui-tabs-nav-item a{/*On Hover Style*/
        display:block;
        height:60px;
        color:#336633;  background:#fff;
        line-height:19px;
        outline:none;
    }
    #featured li.ui-tabs-nav-item a:hover{
        background:#f2f2f2;
    }
    #featured li.ui-tabs-selected{ /*Selected tab style*/
        background:url('http://i54.tinypic.com/16iv56q.png') top left no-repeat;
    }
    #featured ul.ui-tabs-nav li.ui-tabs-selected a{
        background:#66ffcc;
    }
    #featured ul.ui-tabs-nav li img{
        float:left; margin:2px 5px;
        background:#fff;
        padding:2px;
        border:1px solid #eee;
    }
    #featured .ui-tabs-panel .info{
        position:absolute;
        top:180px; left:0;
        height:70px; width: 250px;
        background: url('http://i55.tinypic.com/2nvgd9u.png');
    }
    #featured .info h2{
        font-size:15px; font-family:Verdana Bold, serif;
        color:#fff; padding:5px; margin:0;
        overflow:hidden;
    }
    #featured .info p{
        margin:0 5px;
        font-family:Verdana; font-size:11px;
        line-height:15px; color:#f0f0f0;
    }
    #featured .info a{
        text-decoration:none;
        color:#fff;
    }
    #featured .info a:hover{ 
      text-decoration:underline;
    }

6. Kemudian cari lagi kode </head>
    Letakkan di atasnya, kode berikut ini :



7.  Simpan template anda, selesai.

Selamat mencoba, good luck!


6 comments:

rini9330 mengatakan...

posting yg keren gan,

mampir juga di http://jogja-mmedia.blogspot.com/

kuceng21 mengatakan...

Maksimal, di cari2 nemu juga,,,

taru sun mengatakan...

cara ke 5 ga bisa di copy cripnya

nissah esah mengatakan...

klo pada postingan bagaimana caranya apakah harus edt template juga?
,mohon penjelasannya terimah kasih

Toko Obat Herbal mengatakan...

mantab banget sob, makasih banyak ya..

Cara Menghapus Tato Permanen mengatakan...

Terimakasih banyak gan, sangat bermanfaat sekali tutorialnya...salam sukses buat admin.

Posting Komentar