Create Featured Content Slider Using jQuery UI

Published by Kang Fathur Wednesday, November 17, 2010

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