Cara Membuat Slide Show Tab View

Langkah Pertama :

1. Login ke Blogger

2. Masuk ke TATA LETAK --> EDIT HTML

3. Anda cari kode ]]></b:skin>

4. Letakkan kode di bawah ini di atas ]]></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 download dulu kode berikut, klik disini

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

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