Membuat Tab Menu view Pada Blog
Monday, March 28, 2011 12:00:00 PM
cara menambah tab view pada blog..
1. masuk ke blogger-rancangan-editHTML
2. centang tulisan expand template widget
3. letakkan kode berikut sebelum kode ]]></b:skin>
<style type="text/css">
div.TabView div.Tabs
{height: 22px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 91px; /* Weight size tab Up menu */
text-align:center ; height: 22px; /* hight size tab menu up */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Colour border tab Up menu */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* font teks menu */
font-weight:bold; color:#F4A460; /* Font teks colour tab menu */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #EEE8AA; /* Backgroung colour tab menu */ }
div.TabView div.Pages {clear:both; border:1px solid #B22222; /* Colour border Box Pages */ overflow:hidden; background-color:#696969; /* Colour Back ground Box Pages */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
4. letakkan kode berikut sebelum kode </head>
<script type='text/javascript'>
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>
5. simpan template.
6. kemudian masuk ke rancangan-tambah gadget-HTML/JavaScript
7. copas kode berikut ini pada kotak kosong
<form action="tabview.html" method="get">
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
8. ganti tulisan tab 1 dengan tips blogger atau kategori dari artikel anda.
9. untuk isi dari kategori di atas tinggal anda ganti tulisan tab 1.1 dengan link artikel anda. contohnya seperti ini
Cara menambah mp3 ke blog
10. klik simpan dan lihat hasilnya.
Catatan singkat:
keterangan lebih lanjut visit to http://protonicatv.blogspot.com
sub menu 1.1
sub menu 1.2
sub menu 1.3
sub menu 1.2
sub menu 1.3
sub menu 2.1
sub menu 2.2
sub menu 2.3
sub menu 2.2
sub menu 2.3
sub menu 3.1
sub menu 3.2
sub menu 3.3
sub menu 3.2
sub menu 3.3


PROTONICATVRosoprast # Sunday, March 27, 2011 9:56:11 PM
langsung bisa edit HTML nya..
yang ini..
wah terlalu sederhana...
tingkatkan aja terus OPERA!!!