Feature Slide show bisa kita gunakan untuk menampilkan gambar dan link produk, jasa dari web/blog kita.
Untuk melihat hasilnya, klik tombol di bawah ini :
LIHAT DEMONYA
Untuk membuatnya mari kita ikuti tutorial berikut ini :
1. Login ke Blogger
2. Pilih tab Design > Edit HTML > Centang tanda Expand Widget Templates
3. Cari kode ]]></b:skin>
4. Copy code di bawah ini lalu pastekan tepat di bawah code ]]></b:skin>
<style type='text/css'>
/* Featured */
#featured{
float:left;
width:620px;
height:292px;
padding:0;
margin-bottom:20px;
position:relative;
overflow:hidden;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:415px;
list-style:none;
padding:0;
margin:0;
width:205px;
height:292px;
overflow:auto;
overflow-x:hidden;
z-index:100;
}
#featured ul.ui-tabs-nav li{
padding:0 0 0 15px;
}
#featured ul.ui-tabs-nav li img{
float:left;
margin:0 5px 0 0;
background:#fff;
padding:3px;
width:70px !important;
height: 57px !important;
}
#featured ul.ui-tabs-nav li span{
position:relative;
left:0;
top:13%;
line-height:1.3em;
}
#featured li.ui-tabs-nav-item a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiacWbIlZQcK2dYL-uMCGelyI3TM_k8mnkkKzMs-azza3mN9tJod22rg548G-bS9nTEIgXCmO47wQiKrdQIq63yK7YJDZhpuYezP6eqJDoNIxbLY-cY0QqvweJJGTOyd03EHZo17p0JK44/s1600/panel-bg.jpg) no-repeat;
color:#fff;
display:block;
padding:5px;
height:63px;
text-decoration:none;
line-height:1.2em;
outline:none;
}
#featured li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi90UJBDL0aqiUUD5G39NI0euCIDU7XVYP3P8Y0t56i3KmouMX12l2b5mBk5d43vLFZ7u4U5MCCsPOT5nlONYiitm1pY2oj3KvTwTKFxm1MItQXt4fmszwUiXUmzU1CSgi4iFuGmoe2wc/s1600/arrow.png') center left no-repeat;
z-index:100;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#f8ac00;
color:#333
}
#featured .ui-tabs-panel{
width:430px;
height:292px;
position:relative;
padding:0;
margin:0;
z-index:50;
}
#featured .ui-tabs-panel img{
width:430px !important;
height:290px !important;
z-index:50;
}
#featured .ui-tabs-panel .info{
position:absolute;
padding:5px 10px;
bottom:0;
left:0;
overflow:hidden;
height:63px;
width:410px;
background:#111;
opacity:0.85;
filter:alpha(opacity=85);
.width: 100%; /* IE */
z-index:50;
}
#featured .info h3{
font-size:20px;
padding:0;
margin:0;
overflow:hidden
}
#featured .info p{
margin:0;
line-height:1.4em;
color:#fff
}
#featured .info a, #featured .info a:visited{
text-decoration:none;
color:#f8ac00
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none
}
</style>5. Kemudian cari lagi code <div id='main-wrapper'>
6. Copy code dibawah ini dan pastekan tepat di bawah code <div id='main-wrapper'>
<!-- Featured Content Started -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src=' URL Gambar artikel 1 ' width='80'/><span>Judul Artikel 1</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src=' URL Gambar artikel 2' width='80'/><span>Judul Artikel 2</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src=' URL Gambar artikel 3' width='80'/><span>Judul Artikel 3</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='URL Gambar artikel 4' width='80'/><span>Judul Artikel 4</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='testing' height='290' src=' URL Gambar artikel 1' width='430'/>
<div class='info'>
<h3><a href='URL Artikel 1'>Judul Artikel 1</a></h3>
<p>Isi keterangan artikel 1</p>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='testing' height='290' src='URL Gambar artikel 2' width='430'/>
<div class='info'>
<h3><a href='URL Artikel 2'>Judul Artikel 2</a></h3>
<p>Isi keterangan artikel 2</p>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='testing' height='290' src='URL Gambar artikel 3' width='430'/>
<div class='info'>
<h3><a href='URL Artikel 3'>Judul Artikel 3</a></h3>
<p>Isi keterangan artikel 3</p>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='testing' height='290' src='URL Gambar artikel 4' width='430'/>
<div class='info'>
<h3><a href='URL Artikel 4'>Judul Artikel 4</a></h3>
<p>Isi keterangan artikel 4</p>
</div>
</div>
</div>
</b:if>
</b:if>
<!-- Ends of Featured content-->
<div class='clear'> </div>7. Cari code </body>
8. Copy code di bawah ini dan pastekan sebelum code </body>
<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://dl.dropbox.com/u/14915514/JavaScript/codejquery-1.2.6.min.js' type='text/javascript'/>9. Ganti tulisan URL Gambar dengan gambar artikel Ganti tulisan Judul artikel dengan judul artikel yang ingin kamu tampilkan Ganti URL artikel dengan url artikel yang ingin kamu tampilkan
10. Setelah selesai simpan template dan lihat hasilnya.
Update 23 Juli 2012
Kalau Jquery tidak berfungsi sebaiknya kamu copy code Jquery dan pastekan di bawah code <div id='main-wrapper'> sebelum code <!-- Featured Content Started -->
Selesai sudah tutorial Cara Membuat Featured Slide Show, selamat mencoba, semoga berhasil dan bermanfaat.
No comments:
Post a Comment