Sebelumnya HAPIA Mesir mengucapkan banyak terima kasih kepada Mas Adi ketika HAPIA Mesir berjalan-jalan didisekitar rumahnya HAPIA Mesir menemukan tip seperti ini.
Langsung saja cara membuat Tab View di Blogspot seperti yang kamu lihat dibawah logo blog ini disebelah kanan yang berisikan daftar isi dan lain-lain adalah sebagai berikut :
- Login keBlogger dengan account kamu.
- Pergi ke"Tata Letak - Edit HTML".
- Cari code <head> dan masukan code berikut tepat dibawahnya :
Langsung saja cara membuat Tab View di Blogspot seperti yang kamu lihat dibawah logo blog ini disebelah kanan yang berisikan daftar isi dan lain-lain adalah sebagai berikut :
- Login keBlogger dengan account kamu.
- Pergi ke"Tata Letak - Edit HTML".
- Cari code <head> dan masukan code berikut tepat dibawahnya :
- Copy Paste code berikut tepat diatas code ]]></b:skin> :
/* tab view */
div.Tabview {margin:15px 0 0 0; font: normal 11px arial;}
div.Tabview div.TFs
{height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;}
div.Tabview div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;}
div.Tabview div.TFs a:hover
{ background:#ccc;}
div.Tabview div.TFs a.Active
{ background: #333; color:#FFFFFF;}
div.Tabview div.Pages
{ clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;}
div.Tabview div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabview div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabview div.Pages div.Page div.floor li {
margin:0; padding:0;}
div.Tabview {margin:15px 0 0 0; font: normal 11px arial;}
div.Tabview div.TFs
{height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;}
div.Tabview div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;}
div.Tabview div.TFs a:hover
{ background:#ccc;}
div.Tabview div.TFs a.Active
{ background: #333; color:#FFFFFF;}
div.Tabview div.Pages
{ clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;}
div.Tabview div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabview div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabview div.Pages div.Page div.floor li {
margin:0; padding:0;}
- Simpan Template.
Langkah kedua :
- Silahkan tambah gadget html/javascript pada blog kamu dan pastekan code berikut :
<form action="tabateonsoft.html" method="get">
<div class="Tabview" id="Tabview">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabview');</script>
<div class="Tabview" id="Tabview">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabview');</script>
Selamat mencoba.
info'y mnarik,..
maKasih ya dah share..
kpn aku mo coba buat dech tp kLo untuk dLm w'tu dkt ini kayk'y tDk karna dLm keadaan Ulangan Tengah Semester ...
perlu dicoba nech... tapi aq buat di template Q kadang gak bsa napa yach sob??
sama nih postingannya mengenai tab view.....maju terus blogger...shuahushauhsua
Makasih tipsnya...
Sippp...
info menarik sahabatku, terima kasih atas berbagi ilmunya.. semoga bermanfaat buat kita semua..
Tutorial mantap bisa dicoba nih Saudara
Mantap sob....
Btw met tahun baru yah...
bagus kak... boleh ne dicoba....
bagus infonya ...ijin conthex ya kak..
wah..thanks abis mas..saya dah coba beberapa tutorial di blog lain, tapi disini lah saya menemukan yang sesuai dengan keinginan saya..wah..senengnya..sekali lagi terimakasih mas...4 jempol buat mas..heheheh
tengkyu banget om...sama seperti mas surya..ini baru oke....
kalo buat 2 tab view gimana caranya??? apa harus copy script lagi kemudian add widget?? atau hanya add widget saja..??
IT Programmer@ kalo mw dibuat 2 sob.. code yang terakhir tu kan ada 4 tabnya...dihapus yang 2 nya sob..
pengen aq pasang tp scriptnya kok panjang bgt yah....... g ada yg lebih sederhana lagi sob ?
pagi..
mas aku pengen coba bikin tab view dg kode nya itu, tp nanya mas, misalnya satu kode itu dipake untuk buat dua tab view di sidebar bisa gak mas? soalnya saya pernah pake tab view dan saat mau bikin tab view satu lagi eh gak bisa, jadinya pake tab view nya satu saja
dah di coba ternyata brhasil, maksih ya
Makasih tutorialnya sobat.