Saturday, March 06, 2010

Featured Content Slider untuk Blogger

Beberapa waktu lalu, sobat lama saya Milka minta tolong dibuatin template baru untuk official website resto miliknya. Website-nya yang berbasis blogspot itu memang sudah hampir dua tahun gak "ganti baju", bahkan mungkin bisa dibilang kagak keurus lagi. Gimana nggak? Untuk sekedar memperpanjang sewa domain dotcom-nya aja, si Milka ini sampe kelupaan. Amit-amit...

Pertama dapet proyek tersebut, yang ada dalam angan2 saya adalah menghiasi halaman depan website tersebut dengan image slider ala website2 resto terkenal yang sempet saya liat2 di internet.

Tapi celakanya, belakangan susah banget nyari tutorial image slider di blog2 para master. Padahal seinget saya, dulu slider yang dikenal dengan istilah featured content ini sempet jadi hit di kalangan rekan2 blogger. Untungnya, setelah contek sana-sini sambil bereksperimen, akhirnya saya nemu kode yang pas.

Nah, agar kelak tidak lupa sehingga gak perlu cari2 lagi kalo pas ntar butuh, berikut ini saya posting aja di sini. Siapa tau berguna buat temen2...

Buka Layout dilanjutkan dengan Edit HTML

Kemudian, 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;
}

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(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>

Sampai di sini, save dulu deh...
Kemudian, buka Layout dilanjutkan dengan Page Element

Pilih salah satu element di mana kamu akan menempatkan feature content slider-nya. Klik HTML/JavaScript ketika kamu diminta untuk menambahkan widget, lalu masukkan kode HTML di bawah ini...


<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>


Keterangan:
  • Ganti kode warna ungu dengan url gambar yang akan kamu pasang.
  • Ganti kode warna orange dengan judul dan keterangan yang akan kamu tampilkan.
  • Ganti kode warna hijau dengan link dari gambar yang kamu pasang tadi.
  • Kode warna grey semestinya untuk nampilin thumbnil, cuman sayangnya saya gak menggunakannya. Namun, musti harus tetap dipasang.
Jika ingin melihat hasil dari featured content slider-nya, silakan lihat di sini.
Selamat mencoba...

11 comments:

fi said...

oke deh dicoba malam ini...

Veny said...

waduuh baeknya kamu , smp step by step nih tutorialnya THx for sharing Anthony !
bgs layout kamu yg ini , yg dulu too dark ! he22 yg ini simple but clear !

Keris said...

Thanks bro, udah mampir ke blog saya, sebenarnya saya juga pengen kayak blog gini, pake blogger tapi rumit banget yah utak-atik code-code nya

Mancing Untuk Kebersamaan said...

thanks banget mas ini emang yg lagi gw cari2 thanks bgt..

Bung Eko said...

Saya juga lagi nyari conten slider, Mas. Tapi pengennya yang secara otomatis menampilkan 3-4 posting baru, jadi kita gak perlu ngotak-atik lagi. kemarin sempat dapet, tapi kok background-nya tidak bisa diganti. Padahal pengennya sih halaman depan cukup berisi slider saja, menampilkan 3-4 posting baru. Yah, mirip-mirip blog TikaBanget.com gitu deh. ^_^

Anthony Harman said...

To Bung Eko: Wah, jadi pengin juga, mas Eko. Kalo dah nemu, jangan lupa saya dikontak

Gus Ikhwan said...

habis main dari bunmg eko langsung ke kang herman, wah asik juga ya slidernya jadi mirip photoblog??

Nanang said...

makasih tutorialnya... mantap bgt :D

yuniico said...

Job Feed Aggregator : wah informasi yang diberikan sangat berguna sekali, terimakasih sekali untuk artikelnya :) General Forum Discussion

salam

Indonesia News Aggregator

Anonymous said...

saya mau izin copas nih....

sahrul said...

tq gan...bisa di chek di http://xmantan.blogspot.com...

Post a Comment

Gimana pendapat anda? Kasih komentarnya donk...

Kasih Comment, Bonus Link loh!!
(Tolong ingetin kalo kelupaan...)