Cara Membuat Tab View diblogger

Cara Membuat Tab View diblogger. Pada pembahasan kali ini, aku mau kasih tutorial Cara Membuat Tab View diblogger. Artikel yang saya dapet dari bloggerBondowoso. Lumayan baguslah unutk menghemat tempat disidebar kalian. Karena lebar widget ini cuma 300px dan dilengkapi dengan scroll. Otomatis ga akan sampai memnajang kebawah. Oke deh langsung disimak aja yaa tutorialnya


1. Kalian login kedasbor blogger kalian.
2. Pilih Tata Letak >Edit html >Tambah gadget
3. Kalian pilih Javascript /Html.
4. Kalian copy kode dibawah ini dan paste dikonten

klik Readmore

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 92px; /* Lebar Menu Utama Atas */
text-align:Left; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #696969; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Electrolize"; /* Font Menu Utama Atas */
font-weight:normal; color:#696969; /* 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: #000; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #696969; /* Warna border Kotak Utama */ overflow:hidden; background-color:#000; /* 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>Blogger</a>
<a>DeathNote</a>
<a>Internet</a>
</div>
<div style="width:280px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<script style="text/javascript">
      var numposts = 100;
      var standardstyling = true;
      </script>
      <script type='text/javascript' src='https://sites.google.com/site/bloggerbondowosoblogspotcom/js/label-menutab.js'></script>
     <ul>
      <script src="http://afinzdi.blogspot.com/feeds/posts/default/-/Tips%20blogging?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
      </ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="text/javascript">
      var numposts = 100;
      var standardstyling = true;
      </script>
      <script type='text/javascript' src='https://sites.google.com/site/bloggerbondowosoblogspotcom/js/label-menutab.js'></script>
     <ul>
      <script src="http://afinzdi.blogspot.com/feeds/posts/default/-/Deathnote?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
      </ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="text/javascript">
      var numposts = 100;
      var standardstyling = true;
      </script>
      <script type='text/javascript' src='https://sites.google.com/site/bloggerbondowosoblogspotcom/js/label-menutab.js'></script>
     <ul>
      <script src="http://afinzdi.blogspot.com/feeds/posts/default/-/Tips%20Internet?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
      </ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
Untuk yang berwarna merah, itu keterangan dari masing-masing kode. Silahkan ganti sesaui selera
Untuk yang berwarna hijau, itu judul yang akan ditampilkan dikotak Menu Utama Atas
Untuk yang berwarna oranye, itu ganti dengan url blog sobat
dan Untuk yang berwarna kuning, ganti dengan judul-judul label yang sobat buat. Ingat !
Perhatikan besar kecil tulisan pada judul label, karena jika salah tidak akan ditampilkan. Gunakan %20 untuk menggantikan spasi.

Share :

Tweet

More

Related Post