Membuat Menu Tab View Tanpa Edit HTML

     Membuat menu tab view tanpa edit html - Fungsi dari menu tab view ini bisa untuk menghemat tempat dalam penempatan widget-widget yang di pasang di sidebar maupun dimana saja pada tata letak blog. Sebab menu tab ini dapat di isi dengan tiga widget sekaligus atau lebih dalam satu kotak atau kolom, yang mempunyai isi widget yang berbeda-beda dalam setiap tab menu.

Sekilas tampilan tab view menu ini mirip dengan menu-menu yang lain, namun perbedaanya menu tab view ini yang sering di pasang pada sidebar blog dan mempunyai tampilan yang dinamis dan ringkas.

Baca juga : Membuat menu slide info di blog

     Agar sobat tidak bingung dan penasaran bagaimana tampilan dari menu tab view ini, disini saya buatkan LIVE DEMO nya secara langsung.

     Cara pemasangan di blog sangatlah mudah, karena kita tidak perlu repot-repot lagi edit html dalam template blog yang mungkin bisa memakan banyak waktu dan kesulitan dalam pengeditan. menu tab ini nanti akan kita pasang di sidebar blog dengan cukup hanya melalui tambah gadget dalam Tata letak.

 Jika sobat tertarik untuk membuat dan memasang menu tab view seperti diatas, silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1.  Silahkan sobat >> Login/Masuk >> ke Blog sobat.
2.  Pada "Dashboard" klik Menu >> Tata Letak >> kemudian klik >> Tambah Gadget >> Lalu pilih dan klik tanda + pada >> HTML/JavaScript.
3.  Kemudian, masukkan semua kode script berikut ke dalam kotak  HTML/JavaScript.

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 83px; /* 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:#000000; /* 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: #3d85c6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#ffffff; /* 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>Terbaru</a>
<a>Popular</a>
<a>Label</a>
</div>
<div style="width:255px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<script src="http://kucopas.googlecode.com/files/Recent%20Post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://tutorwidget.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
 [ <a href="http://tutorwidget.blogspot.com/2015/02/membuat-menu-tab-view-tanpa-edit-html.html" target="blank" title="Membuat Menu Tab View Tanpa Edit HTML"><b><span style="color: green;">Get Widget</span></b></a> ]
</div>
</div>
<div class="Page">
<div class="Pad">
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://tutorwidget.blogspot.com
&ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
</div>
</div>
<div class="Page">
<div class="Pad">
<div id="w2bFlashContent">
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl       : "http://tutorwidget.blogspot.com/", /* ganti degan alamat blog sobat */
color          : "000000", /* warna link menu claud  */
hoverColor     : "0000FF", /* hover link menu claud*/
backgroundColor: "transparent", /*  background claud*/
size           : 10, /* ukuran font claud*/
speed         : 100, /* kecepatan animasi claud*/
width          : 210, /* lebar label cloud animasi */
height         : 200 /* tinggi label cloud animasi */
};
/*]]>*/
</script>
<script type="text/javascript" src="http://kucopas.googlecode.com/files/Label%20Cloud.js"></script>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

     4.  Jika semua kode sudah sobat taruh ke dalam kotak HTML/JavaScript, silahkan sobat klik >> simpan dan lihat hasilnya.

Keterangan:

•  Abu-abu adalah keterangan dari menu tab view, silahkan sobat ganti sesuai dengan keinginan sobat.
•  MERAH untuk menyesuaikan kode warna dan ukuran tampilan menu tab view, silahkan sobat ganti sesuai dengan keinginan sobat.
•  BIRU MUDA untuk judul menu tab view.
•  PINK sesuaikan ukuran lebar dan tinggi kotak dari menu tab view.
•  BIRU adalah Kode widget yang ditampilkan biasanya seperti (Recent Post, Popular Post, Label), Sobat bisa menggantinya, Silahkan anda isi dengan widget yang akan dipasang (boleh berupa tulisan, script iklan, link teks, tukar link dll)
•  ORANGE silahkan sobat ganti dengan URL blog sobat.

     Sampai disini saya rasa sobat sudah berhasil membuat dan memasang menu tab view tanpa edit html di blog. Silahkan bereksperimen untuk mendapatkan ukuran maupun tampilan warna dari menu tab view tersebut agar menjadi seperti yang di inginkan. Jika anda menemui kendala, janganlah sungkan untuk bertanya dalam form komentar.
Semoga postingan tentang cara membuat menu tab view tanpa edit html ini bisa bermanfaat bagi teman-teman blogger semua.

Terbaru Comments Efek Zoom

[ Get Widget ]

[ Get Widget ] cara membuat widget recent comments

[ Get Widget ] membuat gambar berputar dengan efek zoom