Cara Membuat Menu Tab View Tanpa Edit HTML Template Blog

 Cara Membuat Menu Tab View Tanpa Edit HTML Template Blog - Menu tab view di blog adalah menu yang mempunyai isi widget yang berbeda dalam setiap tab menu, Kurang lebih seperti itulah definisi yang saya ngerti dan pahami tentang menu tab view. Karena di sini saya telah membuat dan memasangnya di blog DEMO saya.

 Fungsi dari menu tab view ini juga bisa untuk menghemat tempat dalam penempatan widget-widget yang di pasang di sidebar maupun dimana saja pada tata letak blog. Sebab dalam menu tab view ini bisa di isi dengan tiga widget sekaligus atau lebih dalam satu kotak atau kolom.

 Tampilan dari menu tab view ini sekilas 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. Dalam blog DEMO yang saya buat, Menu tab view ini sudah saya isi dengan tiga widget. Diantaranya ada Recent Post (Posting artkel terbaru), Popular Post dan Label Claud (Kategori).

 Ke-unikan dari menu tab view ini adalah semua widget tersebut akan berada pada satu kolom atau kotak, Efeknya yaitu widget akan muncul sesuai dengan tab menu yang sobat klik atau pilih. Hebatnya lagi sobat bisa menggantinya dengan widget-widget yang lain sesuai dengan keinginan sobat.

 Agar sobat tidak bingung dan penasaran lagi tentang bagaimana tampilan dari menu tab view ini, Di sini saya buatkan screenshot gambar dari menu tab view yang saya maksud. Dan sobat juga bisa melihatnya secara langsung pada blog DEMO saya.

DEMO

 Cara pemasangan di blog sangatlah mudah, Karena kita tidak usah repot-repot Edit HTML dalam template blog yang mungkin bisa memakan banyak waktu dan kesulitan dalam edit template blog. menu tab view 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 ini di blog sobat, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> Login/Masuk >> ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Sobat pilih dan klik Menu >> Tata Letak >> kemudian klik >> Tambah Gadget >> Lalu pilih dan klik tanda + pada >> HTML/JavaScript.
3. Langkah selanjutnya, Silahkan sobat 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://kuc0pas.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
 [ <a href="http://kuc0pas.blogspot.com/2012/09/cara-membuat-menu-tab-view-tanpa-edit.html" target="blank"><b><font color="green">Get Widget<font></font></font></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://kuc0pas.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://kuc0pas.blogspot.com/", /* ganti dgn 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 dalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Keterangan:

• Warana ORANGE adalah keterangan dari menu tab view, silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna MERAH adalah kode warna dan ukuran dari tampilan menu tab view, silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna BIRU MUDA adalah Judul bagian atas dari menu tab view.

• Warana PINK adalah ukuran lebar dan tinggi kotak widget dari menu tab view.

• Warna BIRU adalah Kode widget yang ditampilkan  (Recent Post, Popular, Label) pada menu tab view, Sobat bisa menggantinya dengan widget blog atau apapun yang sobat inginkan.

• Warna HIJAU 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. Sobat bisa bereksperimen sendiri untuk mendapatkan ukuran maupun tampilan warna dari menu tab view tersebut agar menjadi seperti yang sobat inginkan. Jika sobat menemui kesulitan, Silahkan bertanya dalam form komentar.

 Semoga artikel tutorial blog tentang cara membuat menu tab view tanpa edit html template blog ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy Blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---