Membuat Tab View Slide



masih ingat Tentang membuat Tab View...?
nach, kali ini saya akan mencoba membuat Tab view dalam bentuk Slide atau bergerak.
langsung aja yach...

Cara membuatnya adalah sebagai berikut :

1. Login ke blogger dengan ID anda.

2. Klik Tata Letak.

3. Klik tab Edit HTML.

Copy kode di bawah ini, lalu paste persis di atas kode ]]></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;
}
}


4. copy paste script berikut persis di atas kode </head>

<script src='http://myscriptforme.googlecode.com/files/slide1234.js' type='text/javascript'/>

5. Klik tombol SIMPAN TEMPLATE.

6. Klik tab Elemen Halaman.

7. Klik Tambah Gadget

8. Klik tombol plus (+) Untuk HTML/JavaScript.

9. Copy lalu paste kode berikut :




<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="URLartikelkamu1" class="selected" rel="tab1">1</a></li>
<li><a href="URLartikelkamu2" rel="tab2">2</a></li>
<li><a href="URLartikelkamu3" rel="tab3">3</a></li>
<li><a href="URLartikelkamu4" 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="URLartikelkamu1">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="tampilan mouse" width="240" src="URLgambar1?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu1">Judul Aritkel 1</a></h3></p>
Kamu tulis deskripsi dingkat artikel pertama kamu disini [...]
</div>
<div id="tab2" class="tabcontent">
<a href="URLartikelkamu2">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="URLgambar2?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu2">Judul Aritkel 2</a></h3></p>
Kamu tulis deskripsi dingkat artikel kedua kamu disini [...]
</div>
<div id="tab3" class="tabcontent">
<a href="URLartikelkamu3">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="URLgambar3?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="URLartikelkamu3">Judul Aritkel 3</a></h3></p>
Kamu tulis deskripsi dingkat artikel ktiga kamu disini [...]
</div>
<div id="tab4" class="tabcontent">
<a href="URLartikelkamu4">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="URLgambar4?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="URLartikelkamu4">Judul Aritkel 4</a></h3></p>
Kamu tulis deskripsi dingkat 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>



10. Klik tombol SIMPAN.

11. Selesai. Silahkan lihat hasilnya.

KETERANGAN:

Pada langkah pertama, ada deretan kode CSS, kode tersebut bisa anda kreasikan sendiri agar menghasilkan bentuk deretan tab yang cantik.

Perhatikan kode berikut :



<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="URLartikelkamu1" class="selected" rel="tab1">1</a></li>
<li><a href="URLartikelkamu2" rel="tab2">2</a></li>
<li><a href="URLartikelkamu3" rel="tab3">3</a></li>
<li><a href="URLartikelkamu4" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>


Untuk mengatur tinggi dari widget tersebut, anda tinggal mengganti nilai height:350px; menjadi nilai yang lain. Misal : height:400px;

Perhatikan kode berikut :



<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>


Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain, anda tinggal mengganti nilai 2000 menjadi nilai yang lain. Misal : 2100. Semakin besar nilainya maka semakin lama pindah.
Semoga bermanfaat ...

Source & Credit : Kang Rohman

donasiSilahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Azis Lamayuda Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.

Jika Anda ingin artikel Membuat Tab View Slide dikirim ke email anda, Silahkan masukan alamat email anda untuk berlangganan.

JANGAN LUPA CEK EMAIL ANDA UNTUK VERIFIKASI BERLANGGANAN VIA EMAIL

7 comments

kang untuk scripnya koq gak bisa di download gmana caranya?????

@ Arga : itu link nya sudah ga ada, pake punya saya aja, download file js nya simpan dihosting punya kamu, seperti di googlecode, jadi ga ilang

ya dimana kang link download jsx????

kang klo di bri html tuh gmana caranya????

Arga : U/ download file jsnya copy http://myscriptforme.googlecode.com/files/slide1234.js di address bar browser kamu. uNTUK lebih jelasnya baca disini http://www.z33s.co.cc/2010/08/upload-file-java-script-dan-css-di.html.

Maksudnya diberi HTML tu ya diberi beri kode HTML, mangnya kenap ga?

tambahin garis pembatas antar link gimana gan???

 
 
footerline
© Copyright 2010 AZIS LAMAYUDA | powered by Blogger |
online Google PageRank Checker Powered by  MyPagerank.Net