Membuat Menu Slide Show Tab View

view, slide show, celebrity, image
Apakah anda pernah melihat tab view yang bisa berganti ganti gambar (slide show) antara satu artikel dengan artikel yang lain. apabila belum silakan gambar screen shout disamping sebagai contohnya. Tab view disamping hampir sama dengan website berita terkini kompas.com. Saya pertama kali melihat Tab view seperti disamping dari blognya ndyteen yang berisi tips trik facebook, free Template blogger, dan Tips SEO atau belajar SEO. Akhirnya Saya mendapat tutorial ini dari blog milik kang rohman yang berisi Blog Tutorial | Free Template | Download Software yang beralamat di http://kolom-tutorial.blogspot.com.


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. Download dulu script ini, copy lalu paste persis di atas kode </head>

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 pada kolom yang tersedia :



<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="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SSS44BOiVbI/AAAAAAAAAZ8/JSAjyxXZVEc/obamabush_thumb%5B1%5D.png?imgmax=800" height="152" title="obamabush"/></a>


<p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>
U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]
</div>


<div id="tab2" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SSS47jWx8HI/AAAAAAAAAaE/wTj2qMO6dV8/beyone_thumb%5B1%5D.png?imgmax=800" height="152" title="beyone"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p>


Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]
</div>


<div id="tab3" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSS5Gg8b_8I/AAAAAAAAAac/OdWejtZv8GI/gunNroses_thumb%5B1%5D.png?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>


After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]
</div>


<div id="tab4" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSS5KkL_ihI/AAAAAAAAAak/jwZPOux8pk4/earbuzz_thumb%5B1%5D.png?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p>


Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]
</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 TEMPLATE.

11. Selesai. Silahkan lihat hasilnya.

Ket :

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="#" 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>


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.

Kode dalam “Slide Show Tab View” di atas memuat artikel milik kang Rohman, silahkan di ganti sesuai keinginan.




10 komentar:

  1. :a::b::c::d::e::f:
    Terimakasih.....

    BalasHapus
  2. Js nya nggak ada...!! berkunjung blogwalking ingin pasang slideshow....!!

    BalasHapus
  3. Wah Sebenernya pengen pasang tapi tu yang tempat download nya kagak bisa, ada yang gondol mungkin ya he he he..

    BalasHapus
  4. Codenya bisa di download di sini coy...

    http://www.ziddu.com/download/9270862/SlideCode.rar.html

    BalasHapus
  5. tidak ada yang bisa di download ya?

    BalasHapus
  6. Alhamdulillah buat admin dan yang ngasih link download dari Ziddu di atas, akhirnya saya berhasil membuat slidshow persis dengan yang saya harapkan......, sudah puluhan trik yang saya coba n baru ini yang berhasil..., sekali lagi makasih n sudilah mampir ke halaman be;ajar saya
    www.asianadesun.com

    BalasHapus
  7. wah mantap coy elmunya....

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.