Cara Membuat Widget Tab View Seperti Yang Diblog Ini

Posted by Herman on Sunday, August 16, 2009 40 comments

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.

tab view, label cloud
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:&quot;&quot; !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&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 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&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://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.

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


Recent Posts:

40 comments

Seti@wan Dirgant@Ra said... 16 August, 2009
Nice info sobat,... Tengkyu.
Herman said... 16 August, 2009
@setiawan: thanks juga bwt komennya :)
karunia pulsa said... 17 August, 2009
Langsung praktek
belajar komputer online said... 17 August, 2009
hihihi... :D panjang banget langkah2 nya... trims ya uda berbagi. :)
Mas Doyok said... 17 August, 2009
siiiiiiip mas :D
herman said... 17 August, 2009
@belajar: iya nih. ampe pegal tangan ngetiknya :))
blogpopuler said... 20 August, 2009
Apakah bisa untuk semua template ya?
blogpopuler said... 20 August, 2009
Dengan kunjungan ini saya mohon maaf bila ada komentar-komentar yang mungkin tidak berkenan atau menyinggung .
Selamat menunaikan ibadah puasa.Semoga amal dan ibadah kita dapat diterima oleh Allah SWT.
hill said... 21 August, 2009
kunjungan perdana, salam kenal :) tips triknya mantab2 nih, sekalian mau bertanya kawan, bagaimana caranya menambah jenis huruf/fonts ke dalam blog, bukan huruf bawaan yg telah tersedia di dalam blog, ditunggu jwbnya thnxs :D

salam
ridwan kuntara said... 21 August, 2009
wah sip tenan tips.. tapi mondo mumet sitik mas.
buJaNG said... 22 August, 2009
Mantap tenan. Keren deh pokokna :D
alhejawi said... 22 August, 2009
Tengkyu nih infonya
gokiL said... 24 August, 2009
KANG TOLONG BLOG SAYA DONK
PLZZZZZZZZZZZZZZZ
rental mobil di surabaya said... 29 August, 2009
mencoba step by step cz takut salah langkah. thx infonya.
heri said... 02 September, 2009
mau nyoba nih, trims boss...
Irfan said... 04 September, 2009
Siip infonya...
putra said... 07 September, 2009
Waaah, extrim juga ya,,
gak ada yang lebih praktis lagi ya, Om,,
Mengembalikan Jati Diri Bangsa said... 20 September, 2009
Duh banyak bener script nya ya mas.. gak nambah berat tuh templatenya ???
Koperasi Karyawan Pertiwi Jaya said... 12 November, 2009
bingung 8-}
Funiezt Yhez said... 21 November, 2009
isi tabnya dimana om ???
be a positive thinker!!! said... 31 January, 2010
thanks for info.. :D

kabarin info terbarunya di http://yusri-outsider.blogspot.com
mafguztblog@yahoo.co.id said... 20 May, 2010
mantab tenan mas ok banget informasinya kalau belum bisa membuat tab view coba di blog saya nich http://mafguzt.blogspot.com/2010/05/cara-membuat-tab-view.html
Mr. Awalk said... 07 August, 2010
Mantaa.p. Nice post bro... eh, mau tukeran link ga? Nhe.. blog mister http://www.situskerenku.co.cc ditunggu kunjungan baliknya ya....
nukay81 said... 20 August, 2010
aku coba ach... maskasih ya mas informasinya :)
andieozy site said... 10 January, 2011
mksh bro atas tips n triknya
sangat membantu...:)
Dadang Herdiana said... 12 February, 2011
Mantep mas Kang........... :D
Tecis said... 01 April, 2011
popula post nya g jalan mas :( need help
FANKER said... 06 April, 2011
kang mau nanyak ni, gmn caranya membuat daftar kumpulan driver ato software di blogspot dan bisa di download oleh orang lain.... mohon pencerahannya gan.....
RifkiArya said... 25 August, 2011
ga bisa kang ,
trik diblog ente yang ane cobain pasti eror semua
pesan eror nya

Kami tidak dapat menyimpan template Anda.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Lebih dari satu widget ditemukan dengan id: HTML9. ID Widget seharusnya unik.

mohon bantuan nya gan
kirim jawaban ke email ane ya gan

rifkiarysaputra@gmail.com
Siti Asri Heriyani Pertiwi said... 02 September, 2011
makasih buat infonya :D
Kepri Online said... 23 December, 2011
Info bermanfaat gan..oh ya, ane daftar buyblogreviews dkk, gan..salam sukses..
Faris Khulafa said... 02 March, 2012
tengkyu sobat
mampir ke blog kuya ada info2 musik lho
Eddy 72 said... 23 March, 2012
thx gan semoga blognya lancar jaya,, hehhe
kalo ada waktu luang mampir ke blog ane,,
http://cyber-cream.com
Blog Tutorial said... 16 April, 2012
terima kasih atas artikelnya yang menarik
JAYA PURNAMA said... 22 June, 2012
DUNIA BLOG Informasi yang mantap, terima kasih telah sudi untuk berbagi
JOHAN PURNOMO said... 15 July, 2012
CARA GAMPANG Yah ... widget tab view ini dapat menghemat tempat, disamping itu cukup bagus untuk menambah penampilan blog, salam blogger persahabatan.
Senang BacaBlog said... 01 August, 2012
waah keren neeh bang... bener bener mantap deh ane jadi tau deh sekarang... :D thanks yah...
Info Media said... 16 August, 2012
keren gan jangan lupa kunjungan baliknya yaa www.my-computers86.co.cc
Aang Rouf said... 31 October, 2012
langsung di coba yah
Abid Muhammad Nur said... 16 November, 2012
:-t panjang bener tuh scyptnya ~x( .gak bisa lebih pendek lagi ya

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment