Home » Blogging tutorial » cara membuat tab view dengan java script
Minggu, 11 Maret 2012
cara membuat tab view dengan java script
cara membuat tab view dengan java script
- kali ini saya mau share cara membuat tabview keren dengan java script. tab view ini adalah suatu menu yang terdiri dari 3 atau empat slot yang berisi widget-widget yang telah di tentukan isinya oleh author blog itu sendiri. Sebenarnya banyak sekali di luar sana cara membuat tab view baik menggunakan css html javascript dan yang paling keren menggunakan jquery. namun sekarang saya tidak akan membahas semuanya saya hanya akan memberikan tab view dengan javasrcipt yang saya yakin cukup keren walaupun tidak sekeren jquery sendiri. Tapi java script tabview ini bisa kita kembangkan secara luas dan mengeditnya sesuka hati.apa sih Tab view itu ?
Tab view adalah suatu widget yang berisis beberapa widget yang terdiri dari beberapa slot yang dapat di isi sesuai keinginan sang author blog misalnya Daftar isi blog
apa keuntungan memasang tab view ini di blog?
menurut saya sendiri keuntungan kalau kita memasang tabview di blog adalah blog semakin rapi dan space sidebar kita semakin banyak dan gak berantakan karena sudah terhemat oleh tab view yang dapat di isi dengan beberapa widget sesuai keinginan author blognya sendiri
apa kekurangan tab view dengan java script ini?
mungkin kekurangannya loading page blog kita akan sedikit bertambah sehingga menjadi agak berat dan walaupun masih bisa di edit sesuka hati namun tampilannya masih sangat simple tidak seperti tab view dengan jquery
gimana sih cara memasang tab view dengan java script ini?
baiklah ikuti langkah berikut ini ;
- Login dulu dong ke blogger
- masuk tata letak
- tambah gadget
-pilih html/javascript
- paste code dibawah ini
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */
text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #555555; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#fff; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Title 1</a>
<a>Title 2</a>
<a>Title 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Jika sudah di paste klik simpan, kemudian preview blog teman-teman
*diatas sudah ada keterangan untuk mengedit sebebas-bebasnya dan kembangkan tabviewnya secara bebas :)
semoga tutorial membuat tabview ini bermanfaat
Source : http://4-demo.blogspot.com/2011/11/cara-membuat-tab-view-ala-4jie-blog.html
Langganan:
Posting Komentar (Atom)
tipsnya sangat membantu gan, salam semangat dan sukses selalu..!
BalasHapusntr tes di blog yang satu lagi bang ,,, heheh
BalasHapusterima kasih sharingnya
salam dan suport dari DS