↓²™ |BLog'z MediuM Community| ™²↓

CARA PASANG BACKGROUND DI BELAKANG MENU TAB VIEW



Cara nya cukup mudah untuk meletakkan background di belakang menu tabview,
hanya ada sedikit script saja yg di ubah. Misalkan nih menu tab view saya,
Perhatikan script di ↓↓↓↓↓↓ ini :


<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 130px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* 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: transparent; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #ff0000; /* Warna border Kotak Utama */ overflow:hidden;
background:#000000 /* 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>TUTORIAL</a>
</div>
<div style="width:130px; height:350px; " class="Pages">
<div class="Page">
<div class="Pad">
<ul>
<a href="http://cvraseac.blogspot.com/2011/03/membuat-tab-view-tanpa-edit-html.html"><li>Membuat Tab View Tanpa Edit HTML</li></a>
<a href="http://cvraseac.blogspot.com/2011/03/cara-mudah-membuat-tanda-tangan-di-blog.html"><li>Cara mudah membuat Tanda Tangan di blog</li></a>
<a href="http://cvraseac.blogspot.com/2011/03/pasang-energi-saving-mode-di-blog-dgn_21.html"><li>Pasang energi saving mode di blog dgn CSS3</li></a>
<a href="http://cvraseac.blogspot.com/2011/03/buat-judul-blog-keren.html"><li>Buat Judul Blog Keren</li></a>
</ul>
</div></div>
</div>
</div>


</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>


Tuh sobat liat kan yang di strip berwarna biru di atas:
Nah,sekarang sobat hapus script yang di strip warna biru di atas ,
Dan ganti dgn script di ↓↓↓↓↓↓ ini:


background:url(URL GAMBAR SOBAT);">


Jika pengen pakai URL matrix punya _CaesarVraseaC_ nih sobat bisa langsung copas di bawah:
http://lh6.ggpht.com/_MiPWgbaPvGw/S0tf1pl8hAI/AAAAAAAAAEc/kHA5HrsMBLs/bluematrix.gif