Friday, March 4, 2011

Cara Membuat Tab View Di Blog

Salah satu cara untuk menghemat tempat ialah dengan kita memasang tab view. Ukuranya yang kecil sangat efisien untuk memuat banyak tempat. Selain itu tab view juga dapat diisi dengan konten blog yang berupa link, gambar, teks, dan lain-lain. dan juga bisa memberikan sesuatu yang rapi. Sebagai contohnya lihatlah pada gambar dibawah ini.




Jadi, dengan tabview ini kita bisa mengirit tempat yang ada di blog kita, seperti diblog ini saya menggunakan 3 widget sekaligus ditabview. Ngirit tempat bukan,untuk membuat tab view ini,ikuti saja langkah-langkah dibawah ini.

  • Login ke Blogger dengan ID kalian
  • Pada dasbor pilh rancangan kemudian pilih Edit HTML
  • Jangan lupa back up template anda supaya aman dengan cara klik download template langkap
  • Langkah selanjutnya copy kode di bawah ini, lalu paste persis di atas 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: 10px;
}
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;}

  • Lalu letakkan script dibawah ini tepat dibawah kode </head>

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

  • Kemudian Simpan Template dan Sekarang menuju ke Elemen halaman
  • Pilih Klik Tombol Add gadget pilih HTML/Javascript
  • Letakkan kode berikut dalamnya
<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>

Perhatikan tulisan yg berwarna:
Kuning
: Judul Tab
Merah
: Isi untuk masing-masing tab

  • Klik Simpan Selesai dech Buatnya

Selamat mecoba dan semoga berhasil.....
sumber: nobinoku

COMMENTS :




Don't Spam Here

2 komentar to “ Cara Membuat Tab View Di Blog ”

Thx Gan, Sangat membantu info nya :h:, btw saya download template yang persis kaya punya agan, la itu yang di bawah yang melayang ( yang ada tweet nya, share dll) itu nama nya ap dan cara ngeditnya gmn mas???

maklum mas masih gaptek

Muhammad Fauzan Marantama Raharjo said...
on 

for: fabuzan: thanks gan....!! cari kan ya?

Wawan Adie said...
on 

Post a Comment

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda dan Saya follow juga. Blog 7ASK adalah Blog Do Follow, Terimakasih atas kunjungan Anda..!

 

Copyright © 2008-2011 All Rights Reserved. Mobile View Powered by 7ASK / WAWAN ADIE and Distributed by Template

Facebook Twitter Mykaskus