KUBANGKONDANG: Membuat Tab View Di Blogger

Follow me on Twitter!

Follow me on Twitter!

Membuat Tab View Di Blogger

F.Firmansyah

Selain digunakan untuk Daftar link, tab view bisa digunakan untuk apa saja sesuai kebutuhan sehingga dapat mempercantik tampilan blog kita.

Menarik bukan?................ Jika anda ingin menambah tab view ini ke blog anda Silahkan ikuti langkah-langkah berikut: Masuk ke Blogger anda kemudian klik Rancangan=>> Tambah Gadget=>> Pilih HTML/Javascript=>>Copy Kode dibawahi dan masukan kedalamnya:

<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><style type="text/css">div.TabView div.Tabs {width: 300px;height: 24px;overflow: hidden;}ul{list-style-image:url('http://www.arcadelist.com/images/PicPlay.gif');}div.TabView div.Tabs a {float: left;display: block;width: 90px;text-align: center;height: 24pxmargin-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;text-shadow: 3px 2px 5px #00f;border-top-left-radius:5px;border-top-right-radius:5px;border: 1px solid #00f;border-bottom-width: 0;text-decoration: none;font: 12px "Arial", Times New Roman, Serif;color: #00f;font-weight: 900;}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #ff0; }div.TabView div.Pages {width: 275px;height: 250px;clear: both;background-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border: 2px solid #00f;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; }</style><body><form action="tabview.html" method="get"><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>Ini View Tab 1</li><li>taruh link kamu disini</li><li>taruh link kamu disini</li></ul></div></div><div class="Page"><div class="Pad">Kamu bisa memasukkan ,image,link, atau script apa saja disini</div></div><div class="Page"><div class="Pad"><ul><li>Ini View Tab 3</li><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li></ul></div></div></div></div></form><script type="text/javascript">tabview_initialize('TabView');</script></body>

Klik Simpan.

Posted in Blog Trick, Gadget blogger

Responses to "Membuat Tab View Di Blogger"

Write a comment

Powered by Blogger