Cara Membuat Label Animasi (Blogumulus)

Biasanya label pada blog, hanya tulisan kebawah saja, semakin banyak label di blog kita, maka akan banyak memakan tempat, untuk menghemat tempat di blog kita sebaiknya menggunakan label animasi ini, selain hemat tempat, label ini juga dapat mempercantik tampilan Blognya, karna tulisan lebelnya bisa bergerak/berputar ketika mouse di arahkan ke label tersebut.

Label ini karya RoyTrank & Amanda Fazani

Cara Pembuatanya :

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. KLik tab Edit HTML.

4. Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman.

5. Cari kode yang mirip dengan kode di bawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>


bila ingin cepat bisa menggunakan Ctrl+F

6. Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.

<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> Posted by <a href='http://ezhaowzy.blogpspot.com/'>Naruto Indonesia</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>

7. Klik tombol SIMPAN TEMPLATE

Note :

Agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal:

Merubah lebar, tinggi dan warna background.
Variable untuk lebar dan tinggi ada pada baris script berikut,

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

240 menunjukkan lebar widget.
300 menunjukkan tinggi widget.
#ffffff menjukkan warna background.
100 menunjukkan kecepatan putaran.

Merubah warna text.
Variable untuk lebar dan tinggi ada pada baris script berikut,

so.addVariable("tcolor", "0x333333");

"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja.

Merubah ukuran font.
Variable untuk lebar dan tinggi ada pada baris script berikut,

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>");

12 menujukan ukuran font yang digunakan.


Selamat Mencoba, dan silahkan otak-atik sendiri...noga berhasil ^^

Anda baru saja membaca artikel yang berkategori Tips dan Trik dengan judul Cara Membuat Label Animasi (Blogumulus). Anda bisa bookmark halaman ini dengan URL http://komix88.blogspot.com/2010/04/cara-membuat-label-animasi-blogumulus.html. Terima kasih!

Ditulis oleh: komix88.blogspot.com - Senin, 12 April 2010