CANIAGO-ELECTRONICS: Featured Content Slider Using JQuery

featured content slider using jquery

    View Demo

Banyak hal yang bisa kita dapatkan dari dunia maya ini, baik yang positif ataupun negatif.. tinggal bagaimana kita memfilter diri untuk menyaring yang baik dan postif. Saya merasakan hal ini pada diri saya, saat berselancar di dunia maya, blog walking keblog teman-teman, bahkan sekedar melihat-lihat galery template, theme atau layout web site, saya menemukan ilmu dan informasi baru bahkan terkadang inspirasi untuk postingan yang akan saya publikasikan diblog ini sampai rancangan planning yang ingin saya lakukan dimasa mendatang.

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.
Nah disini saya ingin berbagi bagaimana caranya agar tutorial tadi bisa diterapkan khusus untuk template blogger.
Berikut tutorial menambahkan featured content slider menggunakan JQuery ini pada template blogger.
1. Setelah sig in pada account blogger sobat>>> 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('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 diatas dengan menambahkan image selected item, image transparent, atau jika sobat ingin mengganti ukuran dari widget dan mengganti warna dari hover link dll. Untuk panduan kode warna lihat disini
4. Tambahkan kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

    <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>
        
        <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>
        
        <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>
        
        <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>
        
        <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
6. Simpan template
Selesai.
Semoga bermanfaat.
View Live Demo