News & Updates

Minggu, 26 Februari 2012

Mengubah tampilan label menjadi luar biasa


Akhirnya kesampaian juga keinginan saya untuk mengganti tampilan label menjadi lebih yahud. Saya tertarik mengubah tampilan label blog menjadi lebih dinamis, bergerak menyesuaikan dengan gerakan kursor mouse ketika diarahkan ke space label tersebut. Dalam dunia blogging, label yang seperti itu biasa disebut Tag Cloud Cumulus atau Blogumus. Dengan menggunakan tampilan ini, blog anda akan terlihat lebih dinamis dan tidak kaku. Anda tertarik untuk mencobanya? Silahkan ikuti langkah-langkah berikut :



 
 
 
Langkah Pertama :

  1. Login di Blogger.com
  2. Setelah sampai di menu dasbor/dashboard, pilih menu Tata Letak>Edit HTML
  3. Di menu Edit HTML, centang kotak "expand widget template" jangan lupa, BACKUP!!
  4. Cari script berikut:
 <b:section class='sidebar' id='sidebar' preferred='yes'>

(untuk mempermudah mencarinya, tekan CTRL+F (find)) 

Langkah  Kedua

Copy Code berikut, setelah itu Paste di bawah code diatas:


<b:widget id='Label99' 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'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget> 


Finish. Simpan template dan langsung aja cek tampilan Blog anda. Apabila anda kurang puas karena sizenya terlalu besar atau terlalu kecil, anda bisa melakukan sedikit modifikasi. Begini caranya :

Cari tag dibawah ini :
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Angka 240 menunjukkan lebar dan angka 300 adalah tingginya dan #ffffff adalah warna background. Anda bisa menggantinya sesuka hati menyesuaikan dengan template yang anda gunakan.  

6 komentar:

  1. Balasan
    1. Gampang Gan Tinggal Masuk ke menu template lalu cari tombol cadangkan/pulihkan(sudut kanan atas) setelah itu klik tombol tersebut.akan muncul sebuah box dan click tombol Unduh Template Lengkap.

      Semoga Membantu

      Hapus
  2. Wah patut dicoba nih gan, makasih infonya...!!!

    BalasHapus
  3. nice post sob :)
    oh iya jangan lupa visit n follback ya http://semloheloh.blogspot.com/2013/11/cara-mempercepat-koneksi-internet.html

    BalasHapus