12 Februari 2009

Blogumus : Animasi Flash untuk Label di Blogspot

Widget Blogumus ini menggunakan kombinasi JavaScript dan animasi Flash untuk mem-parsing dan menampilkan label blog Anda. Setelah diinstal dalam template Anda, ini harus bekerja "di luar kotak", tanpa diperlukan tweaker tambahan, Namun tentu saja Anda dapat memilih untuk mengubah variabel warna, ukuran dan latar belakang yang sesuai, Anda juga harus dapat memindahkan Label Cloud Widget melalui Elemen Halaman halaman dashboard jika Anda memilih tampilan dalam tata letak yang berbeda lokasi. Untuk melihat Blogumus dalam aksinya, baik Flash dan Javascript harus diinstal atau diaktifkan terlebih dahulu di browser Internet. Namun, relatif tidak menurunkan keanggunannya, dan link label pun akan tetap (walaupun bukan animasi) untuk Anda yang tidak menggunakan JavaScript Flash(termasuk mesin pencari spider).

Cara menginstal Blogumus di Layout Blogger :

Menginstal Blogumus di layout bloger Anda sangat sederhana. Anda hanya perlu menyalin dan sisipkan bagian kode ke template Blogger Anda, meskipun ada beberapa setting pengeditan manual untuk menampilkan style yang diperlukan. Berikut adalah langkah-langkah yang diperlukan untuk menginstal Blogumus dalam tata letak Blogger Anda:

Masuk ke Edit HTML di dasboard blogger Anda, dan cari baris kode berikut :

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

Setelah itu sisipkan baris kode dibawah ini di bawah kode merah 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("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "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>

Kemudian preview template Anda. Jika dipasang dengan benar, Anda akan melihat tag cloud muncul di sidebar.Anda bebas untuk menyimpan template, mengedit warna dan dimensi sesuai keinginan, atau memindahkannya ke lokasi yang berbeda.

Kustomasi Blogumus

Ini adalah setting standar yang di pasang di Blogumus tadi.
* Lebar diatur ke 240px
* Tinggi diatur ke 300px;
* Latar belakang warna putih
* Tes warna abu-abu
* Font size "12"

Jika Anda memilih untuk membuat widget yang lebih luas, pendek, mengubah warna skema, dll, Anda perlu untuk melakukannya dengan mengedit berbagai bagian dari kode tersebut. Untuk lebar dan tinggi ditemukan di baris script berikut:

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

Lebar (240 pixel) dalam warna merah dan tinggi (300 pixel) dalam warna biru. Ini menentukan nilai-nilai numerik dari lebar dan tinggi dalam pixel, sehingga Anda dapat mengubah ini sesuai yang Anda inginkan. Anda dapat mengganiti warna background yang sebelumnya berwarna putih, Anda bisa menemukan di baris script berikut :

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

Misalnya, jika Anda lebih suka background merah, Anda dapat mengganti putih # ffffff dengan merah # ff0000. Untuk mengubah warna teks abu-abu gelap (nilai heksa # 333333). Anda dapat mengubah script berikut :

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

Perlu diketahui bahwa "tcolor" adalah variabel Flash dan tidak termasuk kedalam warna kode hexadesimal. Untuk menyesuaikan ukuran font maksimum ditentukan dalam baris kode ini:

so.addVariable("tagcloud", "");

Anda dapat mengubah "12" untuk memastikan tag font yang akan ditampilkan lebih besar atau lebih kecil pada.

Namun dari coding di atas mungkin dsi blog anda tidak cocok coba gunakan yang ini :

Pergi ke Layout>Edit HTML di menu dashboard Cari kode dibawah ini :

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

Kemudian tepat dibawahnya tambahkan kode berikut :

<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>

Bagaimana setting ukuran, warna dan lain sebagainya? Berikut ini dicontohkan untuk setingan variabel didalamnya :

* Lebar Kita Buat 240px
* Tinggi kita buat 300px;
* Warna Background adalah putih
* Warna tes adalah Abu-abu
* Huruf berukuran "12"

Mengedit tinggi dan lebar

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

Mengedit warna backgroud

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

Mengganti ukuran font

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

Selamat mencoba !

0 komentar:

Posting Komentar