Membuat Menu Tab View Pada Blogspot

03:45

Labels:

Info tips blogger kali ini adalah cara membuat Menu Tab View pada Blogspot. Anda bisa membuat Menu Tab View untuk menghemat tempat pada space blog seperti yang sering muncul pada blog kebanyakan, misalnya Tab View Terbaru, Komentar, dan Terpopuler. Ya, dengan cara ini space blog kita akan lebih hemat sehingga masih bisa dipasang widget lain yang mungkin kita butuhkan. Cara membuat Menu Tab View pada Blogspot cukup mudah yakni dengan menambahkan Gadget HTML/JavaScript melalui Tata Letak yang ada di tema blog anda. Yuk, kita simak cara membuat Menu Tab View pada Blogspot berikut ini.
Cara Membuat Menu Tab View pada Blogspot:
1. Masuk ke blogger dan buka dasboard blog anda.
2. Pilih > Tata Letak, > Tambah Gadget
3. Pilih pada > HTML/JavaScript
4. Paste kode script berikut ini di kotak HTML/JavaScript

<div><style type=”text/css”>
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 77px; /* 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: #333333; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#333333; /* 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”>
<div style=”width: 240px;”>
<a>Terbaru</a>
<a>Komentar</a>
<a>Iklan</a>
</div>
<div style=”width:240px; height:300px; “>
<div>
<div>
<script style=”text/javascript” src=”http://duniaanda.googlepages.com/typoxp-recentposts.js”>
</script>
<script style=”text/javascript”>
var numposts = 10;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src=”http://namabloganda.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts”>
</script>
</div>
</div>
<div>
<div>
<script style=””text/javascript”” src=”http://duniaanda.googlepages.com/typoxp-recentcomments2.js”>
</script>
<script style=”text/javascript”>
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src=”http://namabloganda.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments”>
</script>
</div>
</div>
<div>
<div>
<script src=”http://kumpulblogger.com/sca.php?b=6024″ type=”text/javascript”></script>
</div>
</div>
</div>
</div>
</form>
<script type=”text/javascript”>
tabview_initialize(‘TabView’);
</script><div></div></div>
Silahkan ganti script merah dengan script yang ingin anda pasangkan sebagai tab view anda, dan ganti alamat domain dengan URL blog Anda. Anda juga bisa mengganti kode warna sesuai warna dasar blog anda ( misal 333333 atau 000000 atau FFFFFF ) termasuk bisa merubah kode width:240px; height:300px. OK, selamat mencoba tips cara membuat Menu Tab View pada Blogspot diatas, semoga sukses !