jquey featured content slider

ini merupakan salah satu rekayasa jquery yang cukup populer, pada widget ini terdiri dari dua bagian yaitu: bagian utama berupa gambar besar dan bagian kedua berupa thumbnail, kedua bagian tersebut akan bertransisi secara otomatis menggunakan effect slide yang menawan. tentunya widget ini sangat menarik perhatian pengunjung, dan dapat memperindah tampilah blog. nah selanjutnya berikut ini adalah cara memasang widget tersebut...

Langkah1: Masuk ke menu 'Edit HTML'.
Langkah2: Gunakan 'Menu Find' (control+F) di browser anda untuk menemukan kode.
Langkah3: Pasang Script berikut diatas kode </head>

<style>
#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:248px;
}
#featured ul.ui-tabs-nav li{
padding:0; padding-left:15px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
}
#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:54px;
color:#333; background:#fff;
margin: 2px 0 2px 0;
padding: 3px;
text-align: left;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}

#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url(&#39;https://lh5.googleusercontent.com/-0M5Ej6OSWe4/UDpw8ytf5yI/AAAAAAAABAw/FUFRwbnPE9o/s118/nav-selected4.png&#39;) 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:1px 5px 0 2px;
background:#fff;
padding:2px;
border:1px solid #eee;
width: 65px;
height: 45px;
}
#featured .ui-tabs-panel img{
float: left;
width: 400px;
height: 250px;
}

#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWgTihl6idU7JmDKaj1UnbGHebKNn4rihyphenhyphentTc0qFFHu8ENEQgx3cy7wdFic9W8LY3V84-89NpcMk07WHAxVdAdOWnGIk3wwjtVrMU_aLvYxoHan9VELy8H1Hi1E-pYKvLqqbYIf8YFNY/s1600/transparent-bg.png&#39;);
}
#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;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/><script>$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});</script>

Langkah4: klik tombol Save Template untuk menyimpan perubahan.
Langkah5: Masuk ke Menu 'Page Elements'
Langkah6: Tambahkan elemen baru 'HTML java script', selanjutnya isi form tersebut dengan Script 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>

Langkah7: Klik tombol 'Save' pada element tersebut. Selesai.