Cara Memasang Featured Slide Show di Blog - Sobat anaktimor-17 , tinggal beberapa hari lagi bulan februari akan berakhir . Pada kesempatan ini Anaktimor-17 coba membagikan tips cara menghias blog dengan memasang featured slide show di blog . Slide show ini sangat menarik karena dilengkapi dengan Thumbnail disamping kanan . Tentunya membuat blog Anda jadi seru, dan pengunjung betah.Lihat demoOke langsung ke TKP, he..he...
Berikut langkah-langkahnya, seperti ibawah ini :
Berikut langkah-langkahnya, seperti ibawah ini :
1. Login ke Blogger
2. Pilih tab Design > Edit HTML > Centang tanda Expand Widget Templates
3. Cari kode ]]></b:skin>(tekan tombol CTRL+F untuk memudahkan pencarian) .
4. Jika sudah ketemu,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/AVvXsEjJwGP8sQQUU6lZUvQ618NxuNqXZIMm3nq0LKAi5s3cao8qfeY24j1rp4GSZsmEsDy7qlLMHIjk31PRt_oKGz3H6Iq7njaT5aclIUCsHKRP4Dk-eKayBmqpTjAP4p1KZUj_iq7-lT3Y2_Q/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/AVvXsEgSNlsFU4wqwWHYs728FEGopFqfN9-0dRbjs8yswjqmHu-t60XOOrY37pAIZee3AF7BSpy9f5Y0chpSPGFKR-t8HIBVPNcqsTn0mvc0fp2AM6OkHNMmVm_6VGaZd7t4OXURpcxrm8Mkd2I/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. Jika sudah ketemu,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>
NB:
Anda ganti Isi keterangan artikel 4 dengan deskripsi artikel Anda , Judul Artikel 4 Anda ganti dengan judul artikel Anda dan ganti URL Gambar artikel 4 dengan URL gambar Anda .
7. Selanjutnya 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. Sekarang simpan template Anda .
Semoga berhasil dan bermanfaat,
0 komentar:
Posting Komentar