Cara Membuat Animasi Label/Tag Cloud Berputar Di blog

kali ini saya akan berbagi cara tentang Membuat Tag Cloud/Labels Blog berputar seperti gambar disamping ini .dan cara yang saya pakek ini sangat lah mudah karena tidak terlalu ribet bagi yang blogger pemula silahkan kalau mau coba membuat tag cloud di blog ....?
kalau mw coba silahkan ikuti langkah - langkah berikut ini




  1. log in/ masuk ke blogger kalian dulu
  2. Pilih rancangan lalu pilih Edit HTML
  3. Centang Expand Tempelate Widget yang berada pada Edit HTML
  4. Cari Kode Berikut
  • untuk tempelate lama cari Kode ini :<b:section class='sidebar' id='sidebar' preferred='yes'>
  • untuk tempelate Baru cari Kode ini :<b:section-contents id='sidebar-right-1'> 
      5.misalkan kode tadi tidak ada maka tempelate anda tidak cocok sebaiknya ganti tempelate aja  
      6.setelah ketemu silahkan copy script di bawah ini dan letakkan dibawah kode tadi 
<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://sites.google.com/site/bloggerustemplatus/code/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("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "300", "200", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
NOTE:
  • Kode berwarna merah adalah lebar widget, bisa sobat sesuaikan sediri.
  • Kode berwarna hijau adalah tinggi widget, bisa sobat sesuaikan sendiri.
6. Klik save / simpan template anda dan lihat hasilnya.....

Comments

Post a Comment