Cara membuat widget tab view

Langkah-langkahnya sebagai berikut :


1. Buka Blogger -> Layout -> Edit HTML

2. Backup template anda terlebih dahulu untuk mengantisipasi terjadi kegagalan. Setelah itu beri tanda centang pada Expand Widget Templates.

3. Letakkan kode dibawah ini diatas kode ]]></b:skin >
#labelCloud {text-align:center;font-family:arial,sans-serif; line-height:23px}
#labelCloud .label-cloud li{display:inline; background-image:none !important; padding-left:1px; margin:0px; vertical-align:baseline !important; border:0 !important;}
#labelCloud ul{list-style-type:none; margin:0 auto; padding:0px;}
#labelCloud a img{border:0; display:inline; margin:3px; padding:0px}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em; font-size:9px; color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
4. Lalu letakkan kode dibawah ini diatas kode </head>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 18;
var maxColor = [28,66,109];
var minFontSize = 11;
var minColor = [51,97,148];
var lcShowCount = false;
</script>
5. Kemudian cari kode yang dibawah ini. (Pastikan anda telah memasang label diblog anda. Jika tidak, anda tidak akan menemukan kode dibawah ini)
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

6. Kalau sudah ketemu, ganti kode diatas dengan kode dibawah ini
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
7. Jika sudah. Klik Save Template lalu masuk ke menu Layout -> Page Element

8. Klik Add a gadget -> HTML/Javascript lalu masukkan script dibawah ini kedalamnya
<style type="text/css">
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px;
text-align: center;
margin: 0px 0px 0px 3px;
background-color: #1c426d;
height: 24px;
padding-top: 6px;
vertical-align: middle;
border: 1px solid #ffffff;
border-bottom-width: 2;
text-decoration: none;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #336194;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #ffffff;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

</style>


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="gt;Categories</span></a>
<a><span style="gt;Comments</span></a>
<a><span style="gt;Popular Post</span></a>
</div>
<div style="width: 385px; height: 270px;" class="Pages">

<div class="Page">
<div class="Pad">
<div id="labelCloud"/>
<script type="text/javascript">
// Don&#39;t change anything past this point --------------

function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop var="label" values="data:labels">
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
li.style.lineHeight = &#39;1&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(&#39; &#39;);
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop var="label" values="data:labels">
<li>
<b:if cond="data:blog.url == data:label.url">
<data:label.name/>
<b:else/>
<a expr:href="data:label.url"><data:label.name/></data:label.name></a>
</b:else></data:label.name></b:if>
(<data:label.count/>)
</data:label.count></li>
</b:loop>
</ul>
</noscript>
</div>
</div>
</div>

<div class="Page">
<div class="Pad">
<script style="text/javascript" src="http://www.hotlinkfiles.com/files/2663242_i8uud/komentar-terbaru.js"></script><script style="text/javascript">var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=40;</script><script src="http://hermanblogtips.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>
</div>

<div class="Page">
<div class="Pad">
<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol 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('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Fhermanblogtips.blogspot.com&num=10" type="text/javascript"></script> <noscript><a href="http://hermanblogtips.blogspot.com" target="_blank">Herman Blog</a></noscript>

</div>
</div>

</div></div></form>

<script style="text/javascript" src="http://www.hotlinkfiles.com/files/2663245_1fbgh/tab_view.js"></script>

<script type="text/javascript">tabview_initialize('TabView');
</script>

Keterangan:
Teks berwarna merah adalah kode untuk label cloud alias Categories, teks berwarna orange adalah kode untuk recent comment alias Comment, dan teks berwarna cokelat adalah kode untuk popular post alias Popular Post. Silahkan diganti kodenya jika anda ingin memasang widget lain.
Teks berwarna hijau adalah nama dari masing-masing tab. Silahkan diganti sesuai dengan widget yang yang anda pasang
Teks berwarna ungu adalah ukuran wigdet tab view. Silahkan diganti sesuai ukuran sidebar blog anda.

9. Kalau sudah Klik Save.

10. Masih pada halaman Page Element, klik Edit pada Label.



11. Hapus tulisan yang ada dalam kotak Title (bila ada) lalu klik Save.

12. Selesai. Silahkan klik View blog untu melihat hasilnya.

Selamat mencoba. Jika ada yang kurang jelas silahkan ditanyakan melalui kotak komentar.