Cara Membuat Menu Tab Stylist
Menu Tab atau Tab Menu merupakan sebuah kotak interaktif yang menyediakan pilihan-pilihan berupa panduan bagi pengunjung. Fungsinya untuk untuk mempermudah pengunjung berselancar di blog anda. Sebenarnya menu ini banyak diulas oleh kawan-kawan blogger lainnya, namun saya akan menyajikan secara otomatis berserta arsip berdasarkan tanggal posting, entri populer berdasarkan jumlah komentar, komentar, Tutorial dari Blogonol, Quotes Of The Day atau kata-kata inspirasi. Lebih mudahnya saya akan bikinkan anda Tab Menu langsung pakai. Silahkan ikuti langkah berikut.
Bagaimana...? anda tertarik...? Silahkan ikuti langkah berikut.Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya
Ganti tulisan dengan CETAK TEBAL warna MERAH
Silahkan sesuaikan tulisan cetak tebal warna biru dengan keinginan anda. Kalau anda gak mau pusing biarkan aja apa adanya
Selanjutnya Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya
<!-- widget by Bloganol.blogspot.com --> <script language="JavaScript" type="text/javascript"> function st2(t){ for(i=1;i<=5;i++){ ts=document.getElementById('tt'+i); tr = document.getElementById('dd'+i); ta = document.getElementById('aa'+i); if(t==i){ if(t==1) ts.className="Tab1"; if(t==2) ts.className="Tab2"; if(t==3) ts.className="Tab3"; if(t==4) ts.className="Tab4"; if(t==5) ts.className="Tab5"; ta.className="srchlinksel2"; ts.style.borderBottom="1px solid #FFFFFF"; tr.style["display"]="block"; tr.style["visibility"]="visible"; } else{ ts.className="tb2"; ta.className="srchlink2"; ts.style.borderBottom="1px solid #B5D6EF"; tr.style["display"]="none"; tr.style["visibility"]="hidden"; } } } </script> <!-- CSS Begin //--> <style type="text/css">.f10 { FONT-SIZE: 10px; FONT-FAMILY: arial } .f11 { FONT-SIZE: 11px; FONT-FAMILY: arial } .f12 { FONT-SIZE: 12px; FONT-FAMILY: arial } .f12r { FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial } .f12n { FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial } .ft11a { FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma } .fv9 { FONT-SIZE: 9px; FONT-FAMILY: verdana } .fv10 { FONT-SIZE: 10px; FONT-FAMILY: verdana } .ft11 { FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma } .fmicro9 { FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif } A.srchlink:link { COLOR: #2864b4; TEXT-DECORATION: none } A.srchlink:visited { } A.srchlinksel:link { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlinksel:visited { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlink2:link { COLOR: #2864b4; TEXT-DECORATION: underline } A.srchlink2:visited { COLOR: #2864b4; TEXT-DECORATION: underline } A.srchlinksel2:link { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlinksel2:visited { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } .tb2 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6 } .tbmain2 { BACKGROUND-COLOR: #ffffff } .lfttbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6 } .rttbl { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb } .rttblx { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff } .rt_tbl { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd } .toptbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b } .srchtbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede } .Tab1 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #fedfb3 } .Tab2 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #b39dfe } .Tab3 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #f6fe9d } .Tab4 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #feaf9d } .Tab5 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #9dfea5 } A { TEXT-DECORATION: none } A:hover { TEXT-DECORATION: underline} </style> <!-- CSS End //--> <!-- Widget Code Ends Here --> <div style="width: 100%; height: 300px; overflow: auto;"> <!-- widget by Bloganol.blogspot.com --> <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td align="middle" onclick="st2('1')" height="22" id="tt1" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="70" class="Tab1"><a id="aa1" class="srchlinksel2" href="javascript:undefined"><font class="f12"><b>Arsip</b></font class="f12"></a></td> <td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"> <table border="0" cellspacing="0" cellpadding="0" width="2"> <tbody> <tr> <td width="2"></td></tr></tbody></table></td> <td align="middle" onclick="st2('2')" height="22" id="tt2" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="47" class="tb2"><a id="aa2" class="srchlink2" href="javascript:undefined"><font class="f12"><b>Top Post</b></font class="f12"></a></td> <td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"> <table border="0" cellspacing="0" cellpadding="0" width="2"> <tbody> <tr> <td width="2"></td></tr></tbody></table></td> <td align="middle" onclick="st2('3')" height="22" id="tt3" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="62" class="tb2"><a id="aa3" class="srchlink2" href="javascript:undefined"><font class="f12"><b>Komen</b></font class="f12"></a></td> <td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"> <table border="0" cellspacing="0" cellpadding="0" width="2"> <tbody> <tr> <td width="2"></td></tr></tbody></table></td> <td align="middle" onclick="st2('4')" height="22" id="tt4" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="48" class="tb2"><a id="aa4" class="srchlink2" href="javascript:undefined"><font class="f12"><b>Tutorial</b></font class="f12"></a></td> <td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"> <table border="0" cellspacing="0" cellpadding="0" width="2"> <tbody> <tr> <td width="2"></td></tr></tbody></table></td> <td align="middle" onclick="st2('5')" height="22" id="tt5" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="52" class="tb2"><a id="aa5" class="srchlink2" href="javascript:undefined"><font class="f12"><b>Quotes</b></font class="f12"></a></td></tr> <tr> <td colspan="9"> <div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: 0px" ><!-- Main Headlines Begin //--> <table border="0" cellspacing="0" cellpadding="0" width="380" height="5"> <tbody> <tr> <td height="5"></td></tr></tbody></table> <font color="#797979" class="f10" > <!-- wmlheadline begin --> <!-- TDate Begin --> <!-- Date Begin --> Browse Items</font> <!-- Date End --> <!-- TDate End --> <div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid; BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible; BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" > <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n"> <script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script> <script src="http://NAMA BLOG ANDA.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> </font></td> </tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b> </font></td></tr> <tr> <td height="4"></td></tr></tbody></table></div><!-- Main Headlines End //--></div> <div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" ><!-- News Begin //--> <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n"> <script type="text/javascript"> function pipeCallback(obj) { document.write('<ul style="text-transform: capitalize;">'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2FNAMA BLOG ANDA.blogspot.com&num=20" type="text/javascript"></script> </font></td></tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b> </font></td></tr> <tr> <td height="4"></td></tr></tbody></table><!-- News End //--></div> <div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" ><!-- Business Begin //--> <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n"> <script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-comment.js"></script><script style="text/javascript">var numcomments = 20;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://NAMA BLOG ANDA.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script> </font></td></tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b> </font></td></tr> <tr> <td height="4"></td></tr></tbody></table><!-- Business End //--></div> <div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" ><!-- Movies Begin //--> <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n"> <script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script> <script src="http://all-hiburan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> </font></td> </tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b> </font></td></tr> <tr> <td height="4"></td></tr></tbody></table><!-- Movies End //--></div> <div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" ><!-- Sports Begin //--> <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n"> <div> <!-- C --> <script type="text/javascript"><!-- width = "250"; height = "250"; topic = "Editor's Pick"; format = "formatted"; resolution = "normal"; //--></script> <script type="text/javascript" src="http://www.great-quotes.com/QuoteoftheDay/js/quote_widget.js"></script> <br /><a href="http://www.great-quotes.com">Editor's Pick Quotes</a> by Great-Quotes.com </div> </font></td></tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b> </font></td></tr> <tr> <td height="4"></td height="4"></tr></tbody></table></div></td></tr></tbody></table> <!-- Widget Code Ends Here --> </div>
Ganti tulisan dengan CETAK TEBAL warna MERAH
Silahkan sesuaikan tulisan cetak tebal warna biru dengan keinginan anda. Kalau anda gak mau pusing biarkan aja apa adanya
Selanjutnya Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
