Untuk membuat blog atau situs kita semakin sering dikunjungi perlu ditambahkan dengan beberapa aksesoris atau widget. Widget seperti gambar...
Untuk membuat blog atau situs kita semakin sering dikunjungi perlu ditambahkan dengan beberapa aksesoris atau widget. Widget seperti gambar disamping adalah Slide Show Tab View. Untuk demonya bisa dilihat di home blog ini.
Berikut tahapannya.
1.ke Blogger
2. Masuk ke TATA LETAK --> EDIT HTML
3. Anda cari kode ]]>
4. Letakkan kode di bawah ini di atas ]]> :
.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
5. Kamu download dulu kode berikut, klik disini
6. Copy script tersebut dan letakkan sebelum kode
7. Simpan template
Langkah kedua :
1. Masih posisi Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3.Copy Paste Script Berikut:
<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="URL Artikel Kamu 1">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="URL Gambar 1?imgmax=800" height="152" title="obamabush"/></a>
<p><h3><a href="URL Artikelka Kamu 1">Judul Aritkel 1</a></h3></p>
Tulis deskripsi singkat artikel pertama kamu disini [...]
</div>
<div id="tab2" class="tabcontent">
<a href="URL Artikel Kamu 2">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="URL Gambar 2?imgmax=800" height="152" title="beyone"/></a>
<p><h3><a href="URL Artikel Kamu 2">Judul Aritkel 2</a></h3></p>
Tulis deskripsi singkat artikel kedua kamu disini [...]
</div>
<div id="tab3" class="tabcontent">
<a href="URL Artikel Kamu 3">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="URL Gambar 3?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="URL Artikel Kamu3">Judul Aritkel 3</a></h3></p>
Tulis deskripsi singkat artikel ktiga kamu disini [...]
</div>
<div id="tab4" class="tabcontent">
<a href="URL Artikel Kamu 4">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="URL Gambar 4?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="URL Artikel Kamu 4">Judul Aritkel 4</a></h3></p>
Tulis deskripsi singkat artikel keempat kamu disini [...]
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>
4. Simpan dan lihat hasilnya.
Keterangan :
+ ganti keterangan huruf diatas yang berwarna merah.
+ ganti angka 2 yang berwarna hijau sesuai dengan keinginanmu ( 2 berarti waktu jeda tampil 2 detik )
