Jumat, 04 Februari 2011

Cara Membuat Widget Tab View


Pada kesempatan ini, saya akan memberikan tutor tentang cara membuat widget tab view yaitu berisi Categories, Comment, dan Popular Post.

Kita mulai,
  • Buka Blogger -> Design -> Edit HTML
  • Backup template anda terlebih dahulu untuk mengantisipasi terjadi kegagalan. Setelah itu beri tanda centang pada Expand Widget Templates.
  • Letakkan kode berikut 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:&quot;&quot; !important}
  • 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>

  • Kemudian cari kode yang dibawah ini. (Pastikan anda telah memasang widget 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>
  • 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'>
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>

  • Jika sudah. Klik Save Template lalu masuk ke menu Design -> Page Element
  • 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">

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://eppoh.blogspot.googlecode.com/files/recent-comments.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://eppoh.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%2Fhermanblog.com&num=10" type="text/javascript"></script> <noscript><a href="http://eppoh.blogspot.com" target="_blank">eppoh</a></noscript>

</div>
</div>

</div></div></form>
<script style="text/javascript" src="http://hermanblog.googlecode.com/files/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 nama widget yang anda pasang
- Teks berwarna ungu bold adalah ukuran wigdet tab view. Silahkan diganti sesuai ukuran sidebar blog anda.

  • Kalau sudah Klik Save.
  • Masih pada halaman Page Element, klik Edit pada Label.
label


  • Hapus tulisan yang ada dalam kotak Title (bila ada) lalu klik Save.
  • Selesai. Silahkan klik View blog untu melihat hasilnya.

Selamat mencoba.

>> eppoh
Labels: , , ,

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)