Membuat Label bervariatif

Tidak usah basa-basi lagi, langsung ajah menuju TKP :

• Seperti biasa backup dulu template anda.
• Masukan kode CSS berikut ini sebelum kode ]]></b:skin>
/* base styles for extending/overriding */ /* primary tabs */ .navset {border-bottom:1px solid #999;} .navset .hd li em {font-weight:bold;} .navset .hd li a {color:#666;} .navset .hd li.on strong, .navset .hd li.on strong a {color:#999;} /* selected tab */ .navset .hd li.on strong {background-color:#F2F3F5;border-bottom:1px solid #F2F3F5;} /* border-color should match selected color */ .navset .hd li.orphan, .navset .hd li.orphan a {color:#999;} /* bg images, defaults to #999 border-color on white bg */ .navset .hd li a, .navset .hd li strong {background:#ccc url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/el/tb/tr_999.gif) no-repeat top right;} .navset .hd li em {background:transparent url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/el/tb/tl_999.gif) no-repeat;} /* secondary tabs */ .navset .bd ul {background-color:#F2F3F5;border-color:#999;} .navset .bd li, .navset .bd li a {color:#06c;} .navset li.on, .navset li.on strong {font-weight:bold;} .navset .bd li {border-color:#ccc;} /* pipe divider */ /* end base styles */ /* Network tab standards, shouldn't change */ /* shared pri and sec */ .navset {width:100%;} /* IE: width */ .navset a {text-decoration:none;} .navset ul, .navset li {margin:0;padding:0;list-style:none;} .navset li {float:left;display:inline;} .navset li a:hover {text-decoration:underline;} .navset ul:after {clear:both;content:'.';display:block;height:0;visibility:hidden;} /* clear non-IE */ .navset ul {zoom:1;} /* clear IE */ /* primary tabs */ .navset .hd ul {font:bold 78%/1.2em verdana;margin-bottom:-1px;padding-left:.3em;position:relative;} /* IE quirks mode: relative */ .navset .hd li {margin-right:.33em;padding:0;} .navset .hd li.on strong a {cursor:default;} .navset .hd li a, .navset .hd li strong, .navset .hd li em {display:block;} .navset .hd li a, .navset .hd li strong {*display:inline-block;} /* IE: 100% clickable */ .navset .hd li em {font-style:normal;padding:.5em .6em;} .navset .hd li.orphan, .navset .hd li.orphan a, .navset .hd li.orphan em {background:transparent none;border-width:0;margin:0;} /* secondary tabs */ .navset .bd ul {border-top-width:1px;border-top-style:solid;font:78%/1.2em verdana;margin:0;padding:.6em 0 .6em .4em;} .navset .bd li {border-left-style:solid;border-left-width:1px;display:inline;padding:0 1em;} .navset .bd li.first {padding-left:0;border:0;}
• Setelah itu menambahkan javascript untuk widget Label, cari kode <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> dan taruh kode dibawah ini sebelumnya.
<b:widget id='Label2' locked='false' title='Labels' type='Label'> <b:includable id='main'> <div class='menuHack'> <div id='menuList'> </div> </div> <script language='javascript' type='text/javascript'> var label = &quot;&quot;; var text2 = &quot;&quot;; var currentLabel = &quot;&quot;; var activeLabel = &quot;&quot;; var firstLine = &quot;&quot;; var secondLine = &quot;&quot;; var drawTop = false; var firstSub = false; var currentUrl = &quot;<data:blog.url/>&quot;; var arr = new Array(2); firstLine = firstLine + &quot;<div class='navset' id='nav'>&quot;; firstLine = firstLine + &quot;<div class='hd'><ul>&quot;; <b:if cond='data:blog.url == data:blog.homepageUrl'> firstLine = firstLine + &quot;<li class='on' title='selected'><a expr:href='data:blog.homepageUrl'><strong><em>Home</em></strong></a></li>&quot;; <b:else/> firstLine = firstLine + &quot;<li><a expr:href='data:blog.homepageUrl'><em>Home</em></a></li>&quot;; </b:if> secondLine = secondLine + &quot;<div class='bd'><ul>&quot;; <b:loop values='data:labels' var='label'> label = &quot;<data:label.name/>&quot;; text2 = label.charAt(label.length - 1); if (text2 != '.') { arr = label.split(&quot;*&quot;,2); if (arr[0] != currentLabel) { currentLabel = arr[0]; /*var arr2 = new Array(2); arr2 = arr[0].split(&quot;&quot;,2);*/ if (currentUrl.search(arr[0]) != -1) { activeLabel = label; if (drawTop == false) drawTop = true; firstLine = firstLine + &quot;<li class='on' title='selected'><a expr:href='data:label.url + "?max-results=100"'><strong><em>&quot; + arr[0].replace(/_/g,' ') + &quot;</em></strong></a></li>&quot;; } else firstLine = firstLine + &quot;<li><a expr:href='data:label.url + "?max-results=100"'><em>&quot; + arr[0].replace(/_/g,' ') + &quot;</em></a></li>&quot;; } if (arr[1] != undefined &amp;&amp; currentUrl.search(arr[0]) != -1) { var secClass = &quot;&quot;; if (firstSub == false) { firstSub = true; secClass = &quot;class='first'&quot;; } if (currentUrl.search(arr[1]) != -1) secClass = &quot;class='on'&quot;; secondLine = secondLine + &quot;&lt;li &quot; + secClass + &quot;&gt;<a expr:href='data:label.url + "?max-results=100"'>&quot; + arr[1].replace(/_/g,' ') + &quot;</a>&lt;/li&gt;&quot;; } } </b:loop> firstLine = firstLine + &quot;</ul></div>&quot;;/*1st line*/ secondLine = secondLine + &quot;</ul></div>&quot;;/*2nd line*/ arr = activeLabel.split(&quot;*&quot;,2); if (arr[1] != undefined &amp;&amp; currentUrl.search(arr[0]) != -1) firstLine = firstLine + secondLine; firstLine = firstLine + &quot;</div>&quot;;/*navset*/ obj = document.getElementById('menuList'); obj.innerHTML = firstLine; </script> </b:includable> </b:widget>

Catatan : anda dapat merubah posisi labelnya sesuai keinginan anda, masuk Tata Letak - Element Laman.(sumber) nah semoga bermanfaat ya.. selamat mencoba..