Create Featured Content Slider Using jQuery UI

11/17/2010 Blogger JQuery Tips Trik Blog Widget
Banyak hal yang kita dapatkan dari dunia maya ini, baik yang positif maupun yang negatif tinggal bagai mana kita memfilter diri. Alhamdulillah saat blogwalking kesuatu web site, saya melihat featured content slider ini, rasa keingintahuan saya mengantarkan saya tuk search digoogle bagaimana cara pembuatannya. Dan saya menemukan tutorial yang saya cari dari Web Developer Plus. Di bawah ini adalah gamar yang akan kita bahas kali ini :



Nah disini saya ingin berbagi bagaimana caranya agar tutorial tadi bisa diterapkan khusus untuk template blogger.

Berikut tutorial menambahkan Create Featured Content Slider Using jQuery UI ini pada template blogger.

  1. Seperti biasa Login ke blogger dengan id Sobat
  2. Tuju menu Tata Letak
  3. Pada tab menu, klik Edit HTML
  4. Backup template anda, klik Download Template Lengkap
  5. Kemudian Tambahkan Script JQuery berikut sebelum kode </head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>


  6. Tambahkan juga Script berikut di bawah kode Script di atas

    <script>$(document).ready(function(){
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });</script>


    CATATAN 5000 adalah kecepatan link hover berpindah dari satu content ke content berikutya, sobat bisa mengganti angka itu sesuai selera sobat masing-masing.

  7. Selanjutnya tambahkan kode CSS berikut diatas kode ]]></b:skin>

    #featured{
    width:400px;
    padding-right:250px;
    position:relative;
    height:250px;
    background:#fff;
    border:5px solid #ccc;
    }
    #featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
    }
    #featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
    }
    #featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
    }
    #featured .ui-tabs-panel{
    width:400px; 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:#333; background:#fff; line-height:20px; outline:none; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ /*Selected tab style*/ background:url('images/selected-item.gif') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; }
    #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: 400px;
    background: url('images/transparent-bg.png');
    }
    #featured .info h2{
    font-size:18px; font-family:Georgia, 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;
    }


    Catatan Silahkan edit CSS di atas dengan menambahkan image selected item, image transparent, atau jika sobat ingin mengganti ukuran dari widget dan mengganti warna dari hover link dll. Untuk untuk kode warna silahkan klik disini.

  8. Setelah semua langkah di atas selesai Simpan Template Sobat.

    Sekarang kita ke tahap LANKAH TERAKHIR

  9. Pergi ke Tataletak (Rancangan)
  10. Tambah Gadget (HTML/Javascript)
  11. Setelah itu masukan kode 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="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
    <img src="images/image1.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
    </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="images/image2.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
    <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
    </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="images/image3.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >35 Amazing Logo Designs</a></h2>
    <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
    </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="images/image4.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
    <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
    </div>
    </div>
    </div>


    CATATAN : Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content

  12. Kemudian klik Simpan, Selelsai

Selamat Mencoba semoga berhasil dan bermanfaat.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

4 comments

Salam kenal Kang,,,,
Kira2 kalau dipasang bikin berat loading blognya ga..??

Balas

@Urang Lemburbikin berat si pasti sob, cuman tergantung gambar yg kita pakai besar kecilnya. tergantung keadaan blog kita juga sob hehe.

Balas

akhir pekan..mampir buat ketemu teman. masih lg dlm suasana raya korban sob

Balas

trus klo keberatan kan susah loading'y tuh ... biar gk berat, ada gk biar blog kita langsing gto? biar seksi ajja ..
www.td-informasi.blogspot.com

Balas