Cara Membuat Menu Multy 3 Tab Dengan Mudah

Cara Membuat Menu Multy 3 Tab Dengan Mudah -  pada kesempatan ini saya akan memposting tentang Cara Membuat Menu Multy 3 Tab Dengan Mudah ..
waktu dulu saya sussah sekali memahami ini dan kali ini saya sudah sangat pamam sekali dan ternyata sangat mudah sekali cara membuatnya..
ini contoh dari blog saya :

nah kita langsung aja menuju cara - caranya 
Langkah-langkah :
1. Login ke BLOGGER
2. Rancangan Tata Letak
3. Tambahkan Gadget -- HTML/Javascript
4. Copy kode dibawah :

<div
 style="background:#1720E6;padding:100px;"> <div class="widget-content"> <style type="text/css"> /* Menu Tab View */ div.TabView div.Tabs {padding-top: 0px;height: 24px;overflow: hidden;} /* Menu Utama */ div.TabView div.Tabs a {float: left;display: block;width:  83px;text-align: center;height: 24px;padding-top:  5px;margin-right:1px;vertical-align: middle;border: 1px solid  #ccc;border-bottom-width: 0;font:11px Arial Bold;letter-spacing:  1px;background-color: #19A12C;color: #222;} div.TabView div.Tabs a.Active {background-color: #0E4DB7;color: #fff;} div.TabView div.Tabs a:hover {background-color: #0E4DB7;color: #fff;} /* Kotak Utama */ div.TabView div.Pages {clear: both;border: 3px solid #ccc;overflow:  hidden;background:url();} div.TabView div.Pages div.Page {height: 100%;padding: 0px;overflow:  hidden;} div.TabView div.Pages div.Page div.Pad {padding: 3px 1px;font-size:  12px;} </style> <form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 285px;" class="Tabs"> <a class="Active" href="javascript:tabview_switch('tabview',  1);"><b>Tutorial Blog</b></a> <a class="Active" href="javascript:tabview_switch('tabview',  2);"><b>Facebook</b></a> <a class="Active" href="javascript:tabview_switch('tabview',  3);"><b>Film</b></a> </div> <div style="width: 282px; height: 298px;" class="Pages"> <div style="height: 298px; overflow: auto; display:  none;background-color:#FBFBFE;" class="Page"> <div class="Pad"> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul type="square">'); for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '"  target="_blank">' + entryTitle + "</a> </li> "; document.write(item); } document.write('</ul> '); } </script> <script  src="http://www.alimaghfur.blogspot.com/feeds/posts/summary/-/Tutorial%20Blogger?max-results=18&alt=json-in-script&callback=recentpostslist"></script> </div> </div> <div
 style="height: 298px; overflow: auto; display:  block;background-color:#FBFBFE;" class="Page"> <div class="Pad"> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul type="square">'); for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '"  target="_blank">' + entryTitle + "</a> </li> "; document.write(item); } document.write('</ul> '); } </script> <script  src="http://www.alimaghfur.blogspot.com/feeds/posts/summary/-/Trick%20and%20Tips%20Facebook?max-results=200&alt=json-in-script&callback=recentpostslist"></script> </div> </div> <div
 style="height: 298px; overflow: auto; display:  none;background-color:#15196d;" class="Page"> <div class="Pad"> <style> img.label_thumb{ float:left; border:1px solid #e9e9e9; width:85px; height:85px; margin-right:.3px; margin-bottom:.3px; } </style>
<script type="text/javascript"> //<![CDATA[ function labelthumbs(json){document.write('<div> ');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='';} document.write('<a href="'+posturl+'"  title="'+posttitle+'"><img class="label_thumb"  src="'+thumburl+'"/></a>'); if(i!=(numposts-1)) document.write('');} document.write('</div> ');} //]]> </script>
<script type="text/javascript">var numposts = 18;</script> <script type="text/javascript"  src="http://www.alimaghfur.blogspot.com/feeds/posts/default/-/Film?orderby=updated&alt=json-in-script&callback=labelthumbs"></script><div> </div> </div> </div> </div> </div> </form> <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> <script type="text/javascript"> tabview_initialize('TabView'); </script></div> <img border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbw9y-EcJNzNfPX-EwUmlMxNRfFFal7ecRXx0btcuQ_6BWk0YiwCFSggQUV9TBysbBQuwtsxOYubQZhFVMEzyqodpuQdP9bFLB6YjJ4BNnoaR3qcVEEO7uyinQmto4Mp9fepcLLpgGk6c/s1600/jag.png"
 /> </div>    

 Keterangan :

1. Text Tutorial Blogger,Facebook,Film bisa kamu ganti sesuai yg kamu inginkan itu untuk judul setiap menu tab
2. Cari http://www.alimaghfur.blogspot.com/feeds/posts/summary/-/Tutorial%20Blogger dengan Ctrl + F ,ganti dengan label anda jika berspasi kamu ganti spasi dengan %20.ini untuk menu tab 1
3. Untuk tab 2 http://www.alimaghfur.blogspot.com/feeds/posts/summary/-/Trick%20and%20Tips%20Facebook ganti dengan label yg kamu inginkan seperti cara no.1
4. Pada Tab terakhir atau Judul Tab "Film" ditampilkan dengan gambar, cari kodehttp://www.alimaghfur.blogspot.com/feeds/posts/default/-/Film dengan Ctrl + F ganti dengan label kamu..
5. dan lihatlah hasilnya..