Untuk membuat menu tab view
tanpa edit html ini, akan memudahkan pengunjung
melihat dan mencari artikel blog anda yang lainnya dan yang jelas akan menambah
jumlah pageview halaman blog anda. Sudah banyak blogger yang ngebahas menu tab
view ini, namun jhoe akan share juga mungkin anda masih membutuhkan dalam memasang menu tab view di blog kesayangan anda. Cara membuat menu
tab view di blogspot tidaklah sulit, karena tanpa harus masuk ke edit html
dan nantinya anda hanya memasukkan ke dalam kotak tab view menu kode-kode yang
yang akan ditampilkan, misalnya tutorial blog, photoshop, coreldraw, ya
pokoknya sesuai selera anda deh widget apapun juga boleh dimasukin. Ya udah
sekarang simak aja bagaimana cara membuat dan memasang menu tab view di
sidebar blog.
Cara membuat menu tab view tanpa edit html :
1. Seperti biasanya login ke Blogger.com
2. Pada dashboard anda pilih aja Tata Letak => Tambah gadget
3. Lalu anda pilih aja HTML/Javascript
4. Anda copy kode dibawah ini dan paste ke dalam HTML/Javascript
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* 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: #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>Judul Menu 1</a>
<a>Judul Menu 2</a>
<a>Judul Menu 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
5. Simpan
Keterangan :
Silahkan anda otak-atik sendiri sesuai keterangan yang sudah Ermawati kasih tanda merah diatas.
Semoga tutorial blog mengenai cara membuat menu tabview tanpa edit html ini dapat bermanfaat, see you.
Posting Komentar