Cara Membuat Tab View Menu 3 Kolom di Blog

Setelah kesana kemari akhirnya kutemukan juga cara membuat menu Tab view 3 kolom,selain menghemat tempat juga membuat template kelihatan cantik, berikut contoh menu tab view 3 kolom dan cara membuat nya :

• Login dulu juragan ke www.blogger.com dengan id sobat tentunya 
• masuk rancangan >> Edit HTML jangan lupa download lengkap dulu template sobat untuk menjaga kemungkinan ada kesalahan  Klik Expand Templates Widget
•  Cari kode berikut: ]]></b:skin>
• lalu copas kode berikut tepat di atas kode  ]]></b:skin>
div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 103px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; border: 0.5px solid #000000; border-bottom-width: 0; text-decoration: none; font-family: "Arial", Times New Roman, Serif; font-weight: 900; color: #000080; } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #CEF6CE; } div.TabView div.Pages { clear: both; background-color: #FFFFFF; border: 0.5px solid #000000; overflow: hidden; } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } 5. Jika sudah maka lanjutkan dengan mencari kode ini: </head> 6. Lalu copy kode di bawah ini dan pastekan di atas kode tadi:
<script type='text/javascript'> function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == &quot;A&quot;) { i++; Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;; Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == &#39;Page&#39;) { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;; Page.style.overflow = &quot;auto&quot;; Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } </script>
• Lalu save template

Langkah selanjut nya adalah cara menempat kan menu tab view nya

• masuk ke rancangan >>tambah gadget>>pilih HTML Java script 
• Lalu masuk kan kode di bawah ini ke dalam konten HTML/Javascript
• berikut kode nya 
<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width: 350px;"> <a> Tab 1</a> <a> Tab 2</a> <a> Tab 3</a> </div> <div class="Pages" style="width: 290px; height: 250px;"> <div class="Page"> <div class="Pad"> <style>.list { background: url("http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/panah-jalan.gif") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px; } </style> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> </div> </div> <div class="Page"> <div class="Pad"> Isi tab 2 </div> </div> <div class="Page"> <div class="Pad"> Isi tab 3 </div> </div> </div> </div></form> <script type="text/javascript"> tabview_initialize('TabView'); </script>
• Lalu save

Selamat mencoba jika postingan tentang Cara Membuat Tab View Menu 3 Kolom di Blog ini bermanfaat isi kotak komentar ya....salaaam