Cara Membuat Menu Tab View Di Blog

Selamat sore sobat..
Selamat datang di blog baru saya.. :)
kali ini saya akan share tentang Cara Membuat Menu Tab View Di blog..
seperti yang sobat lihat di blog saya. tepat nya di sebelah kanan, menu tab view ini sangat bermanfaat untuk ukuran blog sobat yang kecil. atau sudah kepenuhan dengan widget,

Sekarang langsung aja Kita mulai Cara pemasangan nya..
Pertama.

• Pastinya harus Login dulu ke blogger.com
• Setelah Login, sobat klik Menu Design/Rancangan
• Lalu Klik Edit html
• Jangan lupa expand widget nya di centang/di klik
• Setelah itu,cari code ]]></b:skin>
• Lalu copy dan pastekan code dibawah ini sebelum code ]]></b:skin>

div.TabView div.Tabs {
width: 350px;
height: 24px;
overflow: hidden; }
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }
div.TabView div.Pages {
width: 330px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }
div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }

Keterangan :

• Kode berwarna hijau
  adalah ukuran Tab-view, rekomendasi: usahakan ukuran width yang berwarna hijau sama.
• Kode yang berwarna merah bisa diganti dan sesuaikan dengan template blog kamu.
• Silakan kamu edit kode di atas (ditambah atau dikurangi) dan berkreasi dengan atribut lain, atau kalau kamu merasa sudah sesuai biarkan apa adanya.

 Kalau sudah di copy semua. lanjut lagi copy code nya.. kali ini paste code nya di atas code </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>

• Masih Lanjut nih copy" an nya..
• Tapi sekarang di page element
• Sebelum ke page element
• Simpan dulu template sobat.. 
• Setelah di simpan..
• Klik page element nya
• lalu klik add widget
• Pilih javascript/HTML
• Lalu copy paste kan code dibawah ini

<div class="TabView" id="TabView">
<div class="Tabs">

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages">
<div class="Page">
<div class="Pad">



<ul>

<li>View 1.1</li>
<li>View 1.2</li>
<li>View 1.3</li>
</ul>



</div>
</div>





<div class="Page">

<div class="Pad">



Kamu bisa memasukkan script<br />

Kamu bisa memasukkan image<br />

Kamu bisa memasukkan numbered list/bullent list/<br />

Apalagi memasukkan teks atau link jelas bisa/<br />



</div>
</div>





<div class="Page">
<div class="Pad">



View 3.1<br />

View 3.2<br />

View 3.3<br />



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

nahh..akhirnya selesai juga..
sekarang tinggal lihat blog sobat deh..
selamat mencoba.. :)
jika ada yang kesulitan. silahkan sobat tanya di komentar. :)

Jika sobat merasa artikel Cara Membuat Menu Tab View Di Blog ini bermanfaat, silahkan Copas artikel ini, tetapi jangan lupa untuk mencantumkan link sumbernya seperti ini : Source:http://noochii-exp.blogspot.com/2011/09/cara-membuat-menu-tab-view-di-blog.html.Saya lebih berterimakasih lagi jika sobat mau mencantumkan link hidup seperti ini : Source: http://noochii-exp.blogspot.com/2011/09/cara-membuat-menu-tab-view-di-blog.html.Mohon dimengerti agar maraknya copas tanpa link sumber mereda, terima kasih.