Selasa, 08 November 2011

You are here: » Home » , » Cara Membuat TAB View pada blog

Cara Membuat TAB View pada blog

Cara Membuat TAB View pada blog
Pada sesi sebelumya kita pernah membahas cara untuk menampilkan widget dihalaman tertentu yaitu untuk menghemat tampilan di blog kita tentu saja agar loading pada blog kita tidak berat. Nah, kini kita akan mencoba bagaimana membuat tab view pada blog. Tab view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silahkan Login ke blog sobat
2. masuk ke tab Perancangan lalu pilih edit HTML
3. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
4. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs

{height: 30px; overflow: hidden;}

div.Tabateonsoft div.TFs a

{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;

background:#f0f0f0;

color: #333;

border-top:1px solid #CCCCCC;

border-right:1px solid #999999;

border-bottom:1px solid #999999;

border-left:1px solid #cccccc;

-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px;

}

div.Tabateonsoft div.TFs a:hover

{ background: #E8E8E8;

border-top:1px solid #999999;

border-right:1px solid #cccccc;

border-bottom:1px solid #cccccc;

border-left:1px solid #999999;}

div.Tabateonsoft div.TFs a.Active

{ background: #E8E8E8;

color: #000000;

border-top:1px solid #999999;

border-right:1px solid #cccccc;

border-bottom:1px solid #cccccc;

border-left:1px solid #999999; font-weight:bold;}

div.Tabateonsoft div.Pages

{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}

div.Tabateonsoft div.Pages div.Page

{height: 100%;padding: 0px; overflow: hidden; }

div.Tabateonsoft div.Pages div.Page div.floor

{ font-size:11px;padding: 3px 5px; text-align:left;}

5. Letakkan kode dibawah ini diatas kode </head>

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<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('Tabateonsoft');</script>

Setelah itu simpan dan lihat hasilnya.

Demikian tutorial cara membuat tab view pada blog semoga bermanfaat, jangan lupa tingggalkan komentar ya, terimakasih,, ^_^

Sumber :  Ateonsoft.com

18 comments

8 November 2011 02.06

makasih gan ilmunya....dah saya pasang coba di cek

2 Desember 2011 20.18

kalo untuk menambah 3 tab gimana caranya Sob ??

2 Desember 2011 21.38

Thanks tipsnya Sob, berhasil di blogku

28 Februari 2012 00.02

trus cara memasukan kode pada tabnya gimana??

29 Februari 2012 05.58

thanks gan atas infonya yang berguna, salam kenal

2 Mei 2012 08.41

wah... tutorial yang lengkap.. :D ok nih gan..

9 Mei 2012 11.49

Cara ganti warna background'nya gimana ya gan?

21 Mei 2012 10.08

tab viewnya tidak berfungsi sob

18 Juli 2012 01.31

Nitip gan. Komputer Kalirejo. RPP/Silabus, Services komputer/Laptop, Berita Teknologi, Network, Hosting/Domain. Lampung Tengah => http://www.ivands.info

18 Juli 2012 01.32

Nitip gan. Komputer Kalirejo. RPP/Silabus, Services komputer/Laptop, Berita Teknologi, Network, Hosting/Domain. Lampung Tengah => www.ivands.info

18 Juli 2012 01.32

Nitip gan. Komputer Kalirejo. RPP/Silabus, Services komputer/Laptop, Berita Teknologi, Network, Hosting/Domain. Lampung Tengah

18 Juli 2012 01.34

Nitip gan. Komputer Kalirejo. RPP dan Silabus, Services komputer atau Laptop, Berita Teknologi, Network, Hosting atau Domain. Lampung Tengah

18 Juli 2012 01.34

Nitip gan. Komputer Kalirejo. RPP dan Silabus, Services komputer atau Laptop, Berita Teknologi, Network, Hosting atau Domain. Lampung Tengah

2 Agustus 2012 04.52

Thanks infonya gan..

Follow balik ya,,
www.janualdi.blogspot.com

1 Januari 2015 03.53

kunjungi blog ane ya gan di www.komplit-blog.blogspot.com

18 Januari 2015 14.49

Elemen Laman yg mana? ane pake b.indo :v

18 Januari 2015 14.53

blog gw jadi kacau...gmn nih? :v

17 Maret 2015 22.39

thx infonya gan

Poskan Komentar

Terima kasih atas kunjungannya, blog ini beraliran DOFOLLOW Nah, jadi sobat jangan sungkan-sungkan untuk meninggalkan komentar..
Maaf komentar SPAM tidak akan saya tampilkan.. Wassalam.. ^_^