Cara Membuat Menu Tab View Di Blogspot

Menu Tab View Merupakan solusi yang menarik dan sangat bermanfaat buat para blogger untuk meminimalisir jumlah widget yang mengambil ruang di blog, menu tab view ini akan menampung beberapa widget dan untuk melihat setiap widget tersebut terdapat menu di bagian atas widget menu tab view tersebut, menarikkan??

untuk cara pambuatannya ikuti langkah berikut !!!

1.  Login ke BLOGGER
2. Pilih Rancangan
3. klik edit HTML
4. Centang di Expand Template Widget
5. Download template anda terlebih dahulu demi ke amanan
6. 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 */
    
8. Letakkan kode dibawah ini sebelum kode </head>
   
   <script src='http://miftahulanwar.fileave.com/tabview.js' type="text/javascript"/>
   
   
9. klik SAVE TEMPLATE
10. Sekarang kita tambahkan kode ke widget.
11. Masuk di elemen halaman
12. Tambah gadget
13. Pilih HTML/javascript
14. masukan kode berikut !!!
    
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 100%;" class="Tabs">
    Disini letakkan kode untuk menu tab 1
    </div>
    <div style="width: 99%; height: 200px;" class="Pages">
    <!--Awal Menu 1-->
    <div class="Page"><div class="Pad">
    Disini letakkan kode untuk menu tab 2 </div></div>
    <!--Akhir Menu 1-->
    <!--Awal Menu 2-->
    <div class="Page"><div class="Pad">
    Disini letakkan kode untuk menu tab 3 </div></div>
    <!--Akhir Menu 2-->
    <!--Awal Menu 3-->
    <div class="Page"><div class="Pad">
    Disini letakkan kode untuk menu tab 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>
    
15. Untuk tulisan tebal berwarna merah pada kode di atas anda gantikan dengan kode label, contohnya sepeti di bawah.
    
    <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/AVvXsEgukIAdu3PK1F0nLgWbpQ681jctaSRTz3BgCXGtnemJ1mVvJqMHabm-ISRYel_pzXox5hhprYXYE3wvzqXHLtDo6B1IV6p1-2pael1CMI-fG7Ekz6bX0dizsNByjyP1bFBx5_ERwj4jJ_is/';}
    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://adhiejapannezz.blogspot.com/feeds/posts/default/-/design blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
    
    
16. Untuk tulisan yang berwarna biru, ganti dengan URL anda, dan tulisan yang berwarna merah di ganti dengan label anda, pastikan besar kecilnya huruf label sesuai dengan aslinya.
    
17. Pada kode Disini letakkan kode untuk menu tab 1 - 4  anda isikan label yang berbeda, sesuai dengan yang ingin anda tampilkan di menu tab view tersebut, contohnya pada kode diatas Liga Spanyol pada Disini letakkan kode untuk menu tab 2 - 4 anda isikan label yang berbeda tentunya lengkap dengan kodenya.