Cara Membuat Tab Menu View
Dikirim oleh Andi Syam
Selasa, 15 Februari 2011
16 Komentar
Post views:
Kembali lagi kepada sobat blogger yang ingin menambah asesoris blog sobat sekaligus menghemat widget, selain nampak elegan juga dapat mempercepat loading blog sobat dengan mengurangi jumlah widget yang akan sobat tampilkan sehingga semua keinginan sobat agar selalu tampil lengkap dengan penambahan Tab Menu View.
Sobat bisa perhatikan Tab Menu View yang ada di Belajar Komputer, seperti itulah yang kali ini saya bahas, akan tetapi jumlah tab yang berbeda.
Sobat bisa perhatikan Tab Menu View yang ada di Belajar Komputer, seperti itulah yang kali ini saya bahas, akan tetapi jumlah tab yang berbeda.
Berikut langkah-langkahnya :
- Login ke Blogger sobat
- Lalu pilih Tata Letak
- Klik Sub Menu Edit HTML
- Pada Kotak Edit HTML cari Kode ]]></b:skin>
- Lalu copy kode di bawah ini dan pastekan tepat 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: 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 berikut ini tepat dibawah kode ]]></b:skin>
<script src='http://scriptsyam.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/>
atau :
<script src='http://h1.ripway.com/andisyam/javascriptku/tabview2atensoft.js' type='text/javascript'/>
pilih salah satunya. - Simpan Template
- Lanjut ke Element Halaman
- Klik Add Widget Element
- Pilih Menu HTML/Java Script
- Lalu Copy kode di bawah ini
<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">
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script> - Sampai tahap ini selesai sisa ganti tulisan yang kedap kedip dengan kode sobat.
| Tweet |
Article Information :
Reviewer : Andi Syam
Description : Cara Membuat Tab Menu View
Item Reviewed : Cara Membuat Tab Menu View
Rating : 4.5
Incoming search : Tutorial Blogger , Cara Membuat Tab Menu View
Reviewer : Andi Syam
Description : Cara Membuat Tab Menu View
Item Reviewed : Cara Membuat Tab Menu View
Rating : 4.5
Incoming search : Tutorial Blogger , Cara Membuat Tab Menu View
16 Komentar untuk "Cara Membuat Tab Menu View" | Tambahkan komentar
Kucoba Sob
silahkan gan, moga sukses ya..
saya ga bisa mas nyobanya.gaga; :(
padahal sepertinya uda nurutn smua step-stepnya.
saya sudah coba gan dan berhasil, mungkin agan copy pastekan kedua2nya yang tahap no.6 hanya satu aja gan dipilih salah satunya..
wahh.h.h.
ijin pengen coba gan..
thanks bnget broo ...
dicoba ya gan..
di wp bisa tidak gan?
@Anak Brayan, silahkan gan dngan senang hati
@Wira Yudha, sama2 sob
@The Art, kayaknya untuk wp ga bisa gan krna wp blum mendukun java script kayaknya...
Gan, kalo mo buat di joomla, caranya gimana y..??
smw kok blogspot,, wordpress nya mana
@arel.info, wah kalo joomla saya belum obok-obok gan, bisa sobat link langsung ke andipeace.wordpress.com aja ya :)
@Sandy Prayoga, sobat bisa lihat di sini
Kode kedap-kedip ny ..
mksud ny ,, nma Tabs nya ??
Yang kedap-kedip yang mana ya...mampir ya ke website kita
@HRproperti tuh yang ngeblink gan diganti dengan kode yang mau agan munculkan misalnya facebook funpage
terima kasih ilmunya gan....
Sampaikan Pesan Sobat yang sesuai dengan materi yang diposting...Don't Spam