Desain web atau blog akan terlihat menarik dan atraktif
serta interaktif dengan adanya sebuah
konten slide di dalamnya , akan tetapi kadangkala sebuah slide akan membuat
loading web/blog akan menjadi lambat serta pembuatannya yang sangat ribet dan memakan banyak space.
setelah beberapa
kali analisis dan uji coba dari sejumlah konten slide yang ada didapatlah slide
yang ringan dengan script yang simple tetapi tetap mempertahankan unsur atraktif
dan interaktifnya serta sangat mudah untuk membuatnya tidak sesulit seperti
yang dibayangkan selama ini. adalah featured content slider atau kurang lebih slideshow dengan konten fitur pilihan navigasi disampingnya, slide ini banyak dipakai pada template yang mengusung
tema atraktif interaktif…berikut adalah cara membuat atau memasang slideshow konten fitur pada web atau blog anda
Contoh Penerapan slideshow konten fitur : Les Gitar Malang
Ada tiga komponen utama dari slide konten fitur
yaitu
- CSS untuk mengatur desaint dari slide seperti ukuran, warna, border dan lain sebagainya
- Javascript untuk mengatur pergerakan dari atau tingkah laku slide
- HTML untuk mengatur perlakuan terhadap slide seperti memasang link postingan, url gambar,navigasi dan sebagainya
- Berikut adalah file CSS untuk slide konten fitur, jika digunakan dalam blog salin dan letakkan di atas ]]></b:skin> pada template blog
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#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 img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
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;
}
#featured .ui-tabs-hide{
display:none;
}
- Selanjutnya adalah pasang file Javascript berikut tepat di bawah kode <head> pada web atau template blog anda
<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>
- Selanjutnya pasang kode Javascript berikut tepat di atas kode </head>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true); });
</script>
- Simpan template jika digunakan dalam template blog
- Selanjutnya adalah file HTMLnya, salin dan pasang pada body web anda dan jika pada blog gunakan widget di atas postingan blog dengan memilih (html/javascript)
- jika template blog belum disertai tempat widget di atas postingan buat tempat widget terlebih dahulu.
<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>Judul Postingan1</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>Judul Postingan2</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>Judul Postingan3</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>Judul Postingan4</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="#" >judul postingan1</a></h2>
<p>deskripsi postingan2...<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/image1-small.jpg" alt="" />
<div class="info" >
<h2><a href="#" >judul postingan2</a></h2>
<p>deskripsi postingan2....<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/image1-small.jpg" alt="" />
<div class="info" >
<h2><a href="#" >judul postingan3</a></h2>
<p>ldeskripsi postingan3<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/image1-small.jpg" alt="" />
<div class="info" >
<h2><a href="#" >judul postingan4</a></h2>
<p>deskripsi postingan4<a href="#" >read more</a></p>
</div>
</div>
</div>
</div>
- Langkah terakhir isi keterangan yang berwarna merah dan biru sesuai dengan link url gambar, judul dan deskripsi serta link dari postingan blog anda.
- untuk menyesuaikan ukuran warna silahkan edit code CSSnya..
Selamat Mencoba......
Label:
TUTORIAL
Responses
3 Respones to "Simple Slideshow With jQuery "
Iso dicoba iki..
1 November 2012 pukul 19.25
monggo...
4 November 2012 pukul 19.09
Sudah bagus banget nih gan sebenarnya..
tapi saya pengennya itu slideshow cuman tampil di homepage aja bisa gak?
saya tunggu jawabannya di blog saya yah gan :)
23 September 2013 pukul 09.34
Posting Komentar