Trik Membuat Slide Show Tab View

Tab Slide Show  Merupakan sebuah widget yang didalamnya terdapat ringkasan artikel, gambar dan foto yang bergantian.nah dengan adanya Tab Slide Show pada blog kita akan menjadikan blog kita menarik.
barikut trik pembuatannya :

Pertama :
1. Masuk ke Blogger

2. Terus pilih TATA LETAK --> EDIT HTML

3. Setelah itu cari kode ini ]]></b:skin>

4. Copy dan paste kode dibawah ini tepat di atas koe ]]></b:skin> :

.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 harus  download dulu kode berikut, klik disini

6. Copy script tersebut dan letakkan sebelum kode </head>

7. Simpan template



Kedua :

1. Login ke Blogger kemudian pilih "Layout"

2. Klik pada "Page Element" trus pilih Tambah Widget  --> HTML/Javascript" (Tempatnya terserah kamu).

3.Copy  Script Berikutini :

<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. Terus simpan dech dan lihat hasilnya.

jangan lupa :

-.ganti huruf  yang berwarna merah. sesuai dengan isi artikel kamu

- ganti angka 2 yang berwarna hijau sesuai dengan keinginanmu ( 2 berarti waktu
jeda tampil 2 detik )

selesai dech..........
selamat mencoba