Inilah hasil rekayasa Jquery, mungkin anda pernah berkunjung sebuah situs dan melihat sebuah tampilan Headline News yang dapat berganti secara lembut. Contohnya silakan lihat disini.
Nau itu adalah hasil rekayasa Jquery yang biasanya digunakan untuk menampilkan beberapa konten dari situs, supaya pengunjung tertarik untuk membacanya.
Widget ini terdiri dari dua bagian, bagian sebelah kiri merupakan tempilan utama berupa gambar besar dilengkapi judul dan ringkasan artikel. Bagian sebelah kanan merupakan list konten yang berisi gambar kecil dan judul artikel.
Itu tadi sedikit review tentant Jquery featured contente slider, oke sekarang kita langsung pada pemasangannya, jangan lupa backup dulu template anda
Nau itu adalah hasil rekayasa Jquery yang biasanya digunakan untuk menampilkan beberapa konten dari situs, supaya pengunjung tertarik untuk membacanya.
Widget ini terdiri dari dua bagian, bagian sebelah kiri merupakan tempilan utama berupa gambar besar dilengkapi judul dan ringkasan artikel. Bagian sebelah kanan merupakan list konten yang berisi gambar kecil dan judul artikel.
Itu tadi sedikit review tentant Jquery featured contente slider, oke sekarang kita langsung pada pemasangannya, jangan lupa backup dulu template anda
letakkan kode warna biru ini sebelum ]]></b:skin>
#featured{
width:565px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
position:relative;
height:280px;
background:#fff;
border:0px solid #fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;display:none
}
#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:565px; height:280px;
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('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:215px; left:0;
height:70px; width: 565px;
background: url('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;
}
width:565px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
position:relative;
height:280px;
background:#fff;
border:0px solid #fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;display:none
}
#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:565px; height:280px;
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('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:215px; left:0;
height:70px; width: 565px;
background: url('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;
}
Selanjutnya, letakkan kode warna merah di bawah ini setelah ]]></b:skin>
<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 type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
tambahkan kode berikut pada elemen laman
<div id="featured">
<ul class="ui-tabs-nav">
<li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src="/image1-small.jpg" /><span>15+ Excellent High Speed</span></a></li>
<li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src="/image2-small.jpg" /><span>20 Beautiful Long Exposure</span></a></li>
<li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src="/image3-small.jpg" /><span>35 Amazing Logo Designs</span></a></li>
<li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="/image4-small.jpg" /><span>Create a Vintage</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" style="" class="ui-tabs-panel">
<img alt="" src="http://gambar1.jpg" />
<div class="info">
<h2><a href="#">Fresh and Convinience</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="http://contoh">read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar2.jpg" />
<div class="info">
<h2><a href="#">Perfect Taste</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="http://contoh">read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar3.jpg" />
<div class="info">
<h2><a href="#">Home-made and Delicious Food</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="http://contoh">read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar4.jpg" />
<div class="info">
<h2><a href="#">Our Favorite Menu</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="http://contoh">read more</a></p>
</div></div></div>
<ul class="ui-tabs-nav">
<li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src="/image1-small.jpg" /><span>15+ Excellent High Speed</span></a></li>
<li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src="/image2-small.jpg" /><span>20 Beautiful Long Exposure</span></a></li>
<li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src="/image3-small.jpg" /><span>35 Amazing Logo Designs</span></a></li>
<li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="/image4-small.jpg" /><span>Create a Vintage</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" style="" class="ui-tabs-panel">
<img alt="" src="http://gambar1.jpg" />
<div class="info">
<h2><a href="#">Fresh and Convinience</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="http://contoh">read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar2.jpg" />
<div class="info">
<h2><a href="#">Perfect Taste</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="http://contoh">read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar3.jpg" />
<div class="info">
<h2><a href="#">Home-made and Delicious Food</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="http://contoh">read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar4.jpg" />
<div class="info">
<h2><a href="#">Our Favorite Menu</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="http://contoh">read more</a></p>
</div></div></div>
