Cara Memberi Scroll pada Arsip Blog dan Label

Widget Arsip Blog dengan gaya hierarki yang dipasang di sidebarakan terus memanjang ke bawah seiring bertambahnya jumlah postingan atau artikel-artikel yang telah diterbitkan. Bila hal ini dibiarkan tentunya dapat memakan tempat sidebar blog. Begitu pula dengan gadget Labeljenis daftar, dia akan terus memanjang sesuai dengan banyaknya label di blog tersebut.

Nah, salah satu solusi agar menghemat tempat padasidebar adalah dengan memberikan scroll pada kedua widget tersebut. Scroll merupakan penggulung yang dapat digerakkan ke atas atau ke bawah. Scroll ini juga dapat membuat blog terlihat tertata lebih rapi.

Berikut ini cara memberi scroll atau penggulung pada widget Arsip Blog dan Label.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template.

4. Cari kode ]]></b:skin> (Gunakan tombol Ctrl + F untuk memudahkan pencarian)

5. Biasanya kode id untuk widget Arsip Blog seperti di bawah ini.

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

Maka untuk memberi scroll pada widget Arsip Blog silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

6. Sedangkan kode id untuk widget Label umumnya seperti di bawah ini.

<b:widget id='Label1' locked='false' title='Label' type='Label'/>

Maka untuk memberi scroll pada widget Label silakan copy kode di bawah ini danpaste di atas kode ]]></b:skin>

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

7. Klik tombol SIMPAN TEMPLATE. 

• Angka 200 menunjukkan tinggi scroll sebesar 200 piksel, Anda dapat menggantinya sesuai keinginan Anda. Makin besar angkanya makin tinggiscroll-nya.

Cara Tambahkan Tag Blogger Baru Label

1. Masuk ke dashboard -> layout--> Edit HTML

2. Gulir ke bawah ke tempat anda melihat ini:

]]></b:skin>

3. Sekarang salin kode di bawah ini dan sisipkan sebelum tag ]]></b:skin>.

/* Label Cloud Styles----------------------------------------------- */#labelCloud {text-align:center;font-family:arial,sans-serif;}#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}#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. Sekarang salin kode di bawah ini dan paste di antara  ]]></b:skin> dan tag </head>

<script type='text/javascript'>// Label Cloud User Variablesvar cloudMin = 1;var maxFontSize = 20;var maxColor = [0,0,255];var minFontSize = 10;var minColor = [0,0,0];var lcShowCount = false;</script>

5. Sekarang lagi Gulir ke bawah ke tempat anda melihat ini:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Catatan: label widget Anda ID (Label1) dapat berbeda. Dalam kasus saya label ID widget adalah 1.

Contoh: - Jika label ID widget Anda adalah x, di atas kode;

<b:widget id='Labelx' locked='false' title='Label Cloud' type='Label'>

Sekarang ganti <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'> dengan kode di bawah 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.usfunction 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>

Sekarang simpan template Anda dan Anda selesai.