Tutorial Membuat Tab View Menu Di Blogspot

Tab View Menu sering digunakan untuk meminimalisir jumlah widget yang mengambil ruang di blog. Ukurannya kecil tapi cukup bermanfaat memuat banyak space. Tab View Menu ini menampung beberapa widget dan untuk melihat setiap widget tersebut terdapat menu di bagian atas widget menu tab view tersebut.

Bagaimana cara membuat Tab View Menu tersebut? Langsung saja kita bahas di bawah ini:

1. Login ke Blogger kamu dengan menggunakan ID yang telah terdaftar.
2. Setelah berada didalam account blogspot kamu, kemudian Pilih Rancangan atau Design.
3. Lalu klik Edit HTML.
4. Kemudian centang di Expand Template Widget.
5. Sebelum melakukan pengeditan, di anjurkan untuk Download Template Lengkap anda terlebih dahulu sebagai back up untuk menjaga hal yang tidak diinginkan.
6. Selesai template di back, kemudian cari kode ]]></b:skin>
7. Letakkan kode berikut di atas ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
/* tabview css end */

Tulisan yang berwarna Merah adalah penjelasan untuk setiap code dari scripts apabila anda ingin mengeditnya.

8. Lalu letakkan kode dibawah ini sebelum kode </head>
<script src='http://miftahulanwar.fileave.com/tabview.js' type="text/javascript"/>
9. Kemudian klik SIMPAN TEMPLATE atau SAVE TEMPLATE.

SELANJUTNYA, kita tambahkan kode ke widget sekarang:
1. Masuk ke Elemen Halaman atau Page Elements.
2. Kemudian Tambah Gadget atau Add Gadget.
3. Pilih HTML/Javascript.
4. Lalu masukan Code Scripts, seperti di bawah ini:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Isi disini code untuk tab menu 1 </div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">Isi disini code untuk tab menu 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">Isi disini code untuk tab menu 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">Isi disini code untuk tab menu 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"></div> 

5. Tulisan yang dicetak TEBAL pada code scripts diatas ganti dengan code label, lihat contoh berikut ini:

<style>
/*** RECENT POST BY LABEL ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:75px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
</style>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBaFYpabgwHgC_sChDQ9wSaqSBJUKf9EpkEDVfrxkP2oSPZxCxyiUyIEN0CtMonaFgwDjtKN_gD0nr3xSHXO-_MrWPBwUZ2zAXH66ZSYHVPvrbGA4UI1X5eYQzgkpR2loPoNR0rw6IpG5/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('
<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong>
');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('
');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>
');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>
');}
//]]>
</script>
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="http://justsonix69.blogspot.com/feeds/posts/default/-/Komputer?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

6. Tulisan berwarna Coklat (http://justsonix69.blogspot.com) ganti dengan URL kamu, dan Tulisan yang berwarna Biru (Komputer) ganti dengan Label pada blog kamu sesuai dengan besar kecil huruf labelnya.

7. Pada kode Isi disini code untuk tab menu 1 - 4 isi dengan label yang berbeda, sesuai nama yang ingin kamu tampilkan di Menu Tab View tersebut. Misalnya, pada code Komputer dan Isi disini code untuk tab menu 2 - 4 isikan dengan label yang berbeda dan lengkap dengan kodenya.

Posted in: Blog,Tips dan Trik,Wordpress