The Most Popular Traffic Exchange

Cara Membuat Featured Posts Slider

featured posts slider menggunakan JQuery pada template blogger
Featured Posts Slider Using JQuery

Featured posts adalah widget yang bagus untuk mempromosikan artikel terbaik diblog anda. Apalagi dengan tampilan yang menarik dan efek slide aktraktif dipastikan akan membuat blog anda lebih hidup dan tentunya mengundang perhatian pembaca untuk mengklik artikel yang ada.

Nah jika anda antusias untuk memasang widget featured posts slider ini, Berikut tutorial menambahkan widget ini pada template blogger:

1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag </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>
3. Tambahkan juga script berikut setelah kode diatas
<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

4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></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('http://1.bp.blogspot.com/_5yyQgf23Pco/S3XLK_LqDLI/AAAAAAAABjQ/eaDkjxCw9nc/s320/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('http://i47.tinypic.com/117s1g9.jpg') ;
}
#featured .info h2{
    font-size:14px; 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;
}
4. Tambahkan kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget
<center><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="http://i49.tinypic.com/qpncrq.jpg" alt="" /><span>Kerinduan Pada Baitullah</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://i49.tinypic.com/sqh9cl.jpg" alt="" /><span>6 Kerusakan Valentine day's </span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://i45.tinypic.com/sy6p3k.jpg" alt="" /><span>Keajaiban Do'a</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://i50.tinypic.com/14jn30n.jpg" alt="" /><span>Wanita yang Lisannya Al-Qur'an</span></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="http://i45.tinypic.com/33ue3yo.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Kerinduan Pada Baitullah</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. ....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="http://i48.tinypic.com/mts5sg.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >6 Kerusakan Valentine days </a></h2>
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis...<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="http://i50.tinypic.com/av23bm.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Keajaiban Do'a</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="http://i47.tinypic.com/212h1qt.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Wanita yang lisannya al-qur'an</a></h2>
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus ....<a href="#" >read more</a></p>
        </div>
    </div>
</div></center>
Catatan: Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content
6. Simpan template
Selesai.Semoga bermanfaat.

View Live Demo
Credit: http://amatullah83.blogspot.com/2010/02/featured-content-slider-using-jquery.html
Anda baru saja membaca artikel yang berkategori Featured Posts Slider / JQuery / SlideShow dengan judul Cara Membuat Featured Posts Slider . Anda bisa bookmark halaman ini dengan URL http://jquerytuts.blogspot.com/2010/05/featured-posts-slider-using-jquery-for.html. Terima kasih!
Ditulis oleh: Amatullah Ummu Ubaid - Senin, 01 Oktober 2012

15 komentar untuk "Cara Membuat Featured Posts Slider "

  1. nice info gan.... kahirnya gw dpet juga info ini stelah skian lama..... thx thx thx...

    BalasHapus
  2. Alhamdulillah jika postingan ini dpt membantu. Terimakasih apresiasinya.

    BalasHapus
  3. Test tombol replay nih mbak.
    Thanks.

    BalasHapus
  4. @Admin

    jatuhnya kolom tetep di paling bawah ya soub? ga di deket kolom yg kita tekan replynya?

    BalasHapus
  5. @ducky
    Iya jd hanya mudahkan menjawab reply siapa gtu, klu mau kolom reply tepat dibawah kolom komentar yg ingin kita jawab itu ada trik lainx lagi. Nnt ya diposting pd kesempatan lain.

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. mantap infonya gan, cuma saya koq tidak menemukan tips "Jquery Tab seperti disamping kiri page ini" (6 icon-nya bisa ikutan page naik & turun) yg gan pakai diwebsite ini? saya coba cari-cari tidak menemukannya mungkin saja terlewatkan infonya, keren sekali saya suka dengan Jquery Tab ini.

    tolong bantuannya

    BalasHapus
  8. asalamualaikum,slidenya otomatis mendeteksi posting terbaru g?
    sukron...

    BalasHapus
  9. assalamu alaikum.kok di templateyang saya gunakan gak ada kode seperti "div id='main-wrapper"? mudah2an admin bisa ngasih referensi buat saya yang masih awam ini..trimakasih atas jawabannya..

    BalasHapus