Cara Membuat Menu Tab View di Blog Terbaru

KODE ATAS

Cara Membuat Menu Tab View di Blog
Okeh kali saya akan membahas yang pernah aku bahas waktu dulu cara membuat menu tab view di blog dengan persi terbaru editan saya yang bisa di gunakan pada blog atau website anda bisa lihat menu tab view di samping sebelah saya kurang lebih tampilannya seperti itu bila anda kurang suka dengan warnya bisa kamu edit sesuway warna blog anda sekaligus panjang dan lebar nya menu tab view.kan kadang template blog kadang berbeda ukuran ukuran persegi atau panjang dan lebarnya maka dari itu saya akan menjelaskan cara membuat menu tab view dengan sesuwai template anda atau blog anda di bawah ini.menu tab view itu sangat berguna dan banyak di gunkan para blogger untuk Memasang atau Memasukan menu Kedalam Menu Tab View seperti ini

ENTRI PAPULER  
MENU LABELS  
BLOG ARCHIVE  
MENU COMMENTS

Biyasanya dengan ENTRI PAPULER , MENU LABELS , BLOG ARCHIVE  MENU COMMENTS agar blog jadi lebih menu Seo friendly dan lebih memperluwas halaman blog kita dengan adaya menu tab View di blog kita ,emang menu Tan View Itu sering dan banyak di gunakan oleh para blogger banyak yang meyukai menu tab view untuk membuat blog nya jadi lebih mirip blog Seo friendly.bila anda tertarik dengan menu teb view yang akan di berikan ke pada anda ,maka ajangan anda siasiakan ke sempatan ini cara membuat menu tab view di blog atau website ,saya kan simak cara dengan di bawah ini 
  
A Kamu pergi sepertibiyasa pergi ke blogger dan pilioh menu Template dan pilih menu Edit Html
Cara Membuat Menu Tab View di Blog

B Kemudian tekan kiboar CTRL+F selanjutnya cara kode</head> dan letakan kode di bawah ini di atas kode </head>

<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>

C Dan anda cari lagi kode ]]></b:skin> an letakan kode di bawah di atas menu ]]></b:skin>

div.TabView div.Tabs 
height: 30px; 
overflow: hidden; 
div.TabView div.Tabs a 
float: left; 
display: block; 
width: 101px; /*Lebar Menu Utama Atas*/
text-align: center; 
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px; 
vertical-align: middle; 
border: 1px solid #000000; /* 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: #000000; /* Warna background Menu Utama Atas *
div.TabView div.Pages 
clear: both; 
border: 1px solid #000000; /* Warna border Kotak Utama */ 
overflow: hidden; 
background-color: #141414; /* 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: 3px 5px; 

D Kemudian anda lalu save atau simpan dan anda kemudian pergi kehalaman blogger pilih menu dsabor dan pilih menu Teta Letak dan anda pilih aja pilih menu Tambahkan Gagdet dan HTML/javascript

            
Cara Membuat Menu Tab View di Blog              Cara Membuat Menu Tab View di Blog



E Dan selanjutnya masukan kode script di bawah ini ke kotak menu HTML/javascript seperti gambar di bawah ini namanya kosongkan aja nya...!!!

Cara Membuat Menu Tab View di Blog
F Dan masukan kode ini di kotak HTML/javascript paling bawah jangan yang atas itu dalam untuk judul menu nya kalau bisa jangan di kasih nama biyarkan kosong aja.

 <form action="tabview.html" method="get"> 
<div class="TabView" id="TabView"> 
<div class="Tabs" style="width: 310px;"> 
<a>Labels</a> 
<a>Tab 2</a> 
<a>Comment</a> 
</div> 
<div class="Pages" style="width: 310px; height: 450px;"> 
<div class="Page"> 
<div class="Pad"> 

MENU 1

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

MENU 2

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

MENU 3

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


Kemu langsung ajah simpan dan lihat hasil nya mantep coy bila ada mau tau cara Memasukan Menu Ke Dalam Menu Tab View Klik Sini Aja...Bro!! bila ada yang mau di tayakan ke pada saya Cara Membuat Menu Tab View di Blog yang belum tau cara nya atau belum cukup ada yang kurang jelas kami bisa membantu anda atau menayakan silah kan berkomentar di bawah ini semoga saya daniblogger bisa membantu anda.dalam kesulitan Cara Membuat Menu Tab View di Blog .



KODE BAWAH
Share this article :
+
Previous
Next Post »
0 Komentar untuk "Cara Membuat Menu Tab View di Blog Terbaru"

Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan...!!!

Yang tidak diperbolehkan dalam berkomentar :

1. Komentar yang mengandung unsur SARA.
2. Komentar yang berbau Porno.
3. Komentar Saling Caci maki.
4. Komentar yang Memasukan Link Iklan dan Ling Atip.
5. Di Lalarang Mengcopy Paste Pada Artikel Di Sini.

Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.

Bagi Anda yang Mau di Tayakan ? Anda Bisa Anda Bisa HUB Alamat Facebook Saya (https://www.facebook.com/toturialblogcom)

Terima Kasih Sudah Berkomentar
 
Copyright © 2015 TUTORIAL - All Rights Reserved
Template By. Kunci Dunia
Back To Top