Cara Membuat Featured Posts Slider

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPpcFSB1D2nc06wVLfoyMo0P7erwfcvjFCZPEf7BhPxxos0Ih0bnG2tmuVI_TdmAzTP54f5EIbnTuw8cg4TtK1Whp7E8QSk54HKPDoZwO3khlWxDvvV9lXQ_9Idg3fetXlO1ORWMlPFc/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: Unknown - Senin, 01 Oktober 2012