Cara Membuat Widget Tab View Seperti Yang Diblog Ini

Berhubung cukup banyak yang bertanya kesaya mengenai cara membuat widget tab view yang ada categories, comment dan popular post seperti di blog ini. Maka pada kesempatan ini, saya akan mencoba untuk menjelaskannya dipostingan ini. Sebenarnya postingan mengenai cara membuat widget tab view beserta cara memasukkan konten kedalamnya sudah pernah saya bahas. Namun karena cara untuk memasukkan label cloud kedalam widget tab view agak berbeda dan lebih rumit. Maka saya akan menjelaskan caranya disini.

Agar to the point, saya akan memberikan tutor tentang cara membuat widget tab view seperti yang ada diblog ini yaitu berisi Categories, Comment, dan Popular Post.

Ok mari kita mulai.

1. Buka Blogger -> Design -> Edit HTML

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

3. 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:"" !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 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>

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'>

function s(a,b,i,x){
if(a>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 = "<data:label.name/>";
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] < cloudMin){
continue;
}
for (var i=0;3 > 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 Design -> 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">

function s(a,b,i,x){
if(a>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 = "<data:label.name/>";
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] < cloudMin){
continue;
}
for (var i=0;3 > 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 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://hbhost.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://hermanblog.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://hermanblog.com" target="_blank">Herman Blog</a></noscript>

</div>
</div>

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

<script style="text/javascript" src="http://hbhost.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.

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.

Untuk keterangan mengenai cara mengganti warna, font, ukuran dari widget tab view dan label cloud. Silahkan baca disini (untuk tab view) atau disini (untuk label cloud).

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

Ilmu Tekhnologi

Clock' Mcs

Daftar Anggota

Sabtu, 06 Agustus 2011

Cara Membuat Widget Tab View Seperti Yang Diblog Ini

0 komentar:

Posting Komentar

Profile's Organisasi

Pengikut