16 Cara Membuat Menu Tab View Slide

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

image_thumb4Ternyata yang diminta sobat blogger (Nova Imut) tutorial cara membuat menu tab view slide yang contohnya bisa dilihat pada sidebar sebelah kanan blog ini atau seperti pada image disamping.

Caranya mudah saja hanya butuh ketelitian dan sedikit kesabaran karena kodenya cukup banyak dan panjang. Jadi biar entar tidak ada kesalahan kecil yang bisa jadi biang keringat. Ikuti Tips berikut:

  • Download lengkap template sobat, agar bisa dikembalikan lagi seperti semula jika sobat tidak berhasil/ salah dalam pengeditan.
  • Setelah memasukkan kode tambahan sebelum menyimpan template pratinjau dulu, jika tidak ada pesan error atau template ditampilkan seperti awalnya/ tdk amburadul tata letaknya, berarti langkah-langkahnya sudah benar.
  • Saat mencari suatu code klik  Ctrl+F kemudian cari. Agar mudah menemukan codenya
  • Terakhir langsung cara membuat menu tab view slide
  1. Loggin ke Blogger => Layout => Edit HTML dan cari kode ini ]]></b:skin> letekkan kode berikut diatas  ]]></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;
}
}

-----------------------------------------------
2. Download kode selanjutnya, KLIK DI SINI
3. Copi kode tersebut dan paste sebelum kode </head>
4. Simpan template
5. Selanjutnya pilih elemen halaman=> tambah gadget=> HTML/JavaScript=> Masukkan code berikut pada kolom content

<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>


Silahkan edit sesuai selera sobat, kemudian simpan dan lihat hasilnya.

Semoga bermanfaat.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

16 komentar :

  1. wah keren banget.. ane mo pake yang dr ajx ga jadi2.. makasih ..ane izin buat bookmark ya.. :)

    BalasHapus
  2. makasih ya! codenya panjang bgt, kpn2 cobax dh!

    BalasHapus
  3. Maaf mba, kalo berkenan saya minta referensi buat template yg sidebar kanannya gede..kaya yg punya mba ini. Biar leluasa gitu bikin tabviewnya...Makasih banyak sebelumnya. jazakumullohu

    BalasHapus
  4. klu pingin template seperti ini, link downloadx ada pada akhir template... tapi klu mau dibuatin jg blh. waiyyak.

    BalasHapus
  5. hehe, mksh sebelumnya.
    Ini deh mba, kalo gak keberatan, ajarin aja aku gimana caranya nambah kolom elemen di footer. krn template aku skrg ga ada footernya.
    Lalu, ko recent post ma recent comment gak muncul y?! (maaf, tolong di cek deh mba ke blog sy. recent post & commentnya gak muncul)
    Trims banyak

    BalasHapus
  6. Maaf mba, ko saya gak bisa download "kode selanjutnya"ya,,,kayak broken link gitu...

    BalasHapus
  7. udah update, kodenya skrg bisa didownload.

    BalasHapus
  8. kapan dicoba ah,,, thank infonta

    BalasHapus
  9. templatenya bagus, keren, tapi.... ana warnanya kurang suka, gimana cara ganti warna warninya....

    BalasHapus
  10. @ Ahmad: Anda mengomentari apa? Template mana? Yg mana nie warna-warni? Diatas khn tutorial membuat tab slide, dan hasil dari tutorial ini tabnya warna hitam, hana satu warna? Kalau ingin merubah warna ganti aja kode warna pada CSS diatas... gampang khn?

    BalasHapus
  11. salam kenal admin blog, lumayan dech

    BalasHapus
  12. Wow keren kawan terimakasih sudah berbagi ilmu yang sangat bermanfaat. Salam kenal dari Daput Tutorial dan thanks kunjungannya. Jika berkenan saya mengundang sobat untuk tukaran link. link blog sobat sudah saya add, bisa dilihat pada bagian Footer blog saya. Ditunggu konfirmasinya!

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!