Cara membuat Tab Slide Show Tab View Cara membuat Tab Slide Show Tab View | Belajar Komputer Melalui Internet
News Update :
Blog ini doFollow Loh !

Cara membuat Tab Slide Show Tab View

Kamis, 30 Juni 2011

Tab Slide Show Tab View adalah sebuah widget yang berisi ringkasan artikel, gambar dan foto yang bergantian. Dengan membuat tab view, blog kita akan terlihat menarik dan mempermudah pengunjung melihat highlight yang kita pasang, tentu saja ini akan membuat pengunjung akan lebih tertarik membuka link / postingan yang kita pasang dalam menu tab view.

Bagaimana sih cara membuatnya?

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 ( 2 berarti waktu jeda tampil 2 detik )


Ok sobat Informasi Maya sekian dulu aja tip kali ini dari kang salman semoga bisa bermanfaat

Sumber

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Artikel tentang Cara membuat Tab Slide Show Tab View
Judul: Cara membuat Tab Slide Show Tab View

Rating: 10 out of 10 based on 24 ratings. 155 user reviews.
Tulisan ini menarik? Copas permalink ini blogmu donk!

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Cara membuat Tab Slide Show Tab View
Share this article :

No Responses to "Cara membuat Tab Slide Show Tab View"

Posting Komentar

 
Raden Ansori - All right reserved
Raden Ansori | Personal Blogging Free Sharing Inform
© Template by :Raden Ansori 2011 - 2012
Copyright © 2011 - 2012 Raden Ansori - All rights reserved