29 Agu 2010

Membuat Label Berputar



Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label berputar Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog. Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.
Karena dalam membuat Label Cloud Berputar ini kita akan melakukan pengeditan pada HTML, ada baiknya kita back up dulu script sebelumnya, buwat jaga-jga klo kita gagal melakukannya.

A. Langkah Pertama

  1. Login ke Blogger dengan ID sobat.
  2. Klik Tata Letak
  3. Klik tab Edit HTML
  4. Download dahulu template sobat dengan mengklik Download Template Lengkap
  5. Kemudian klik button Expand Template Widget dan cari kode yg seperti ini : 


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

  6. Copy kode berikut ini setelah kode 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://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(&quot;http://sites.google.com/site/bloggerustemplatus/code/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. Kemudian Simpan Template.

B. Langkah Kedua 
  • Mengubah lebar dan tinggi kolom serta warna background 


    Angka "240" adalah lebar kolom
    Angka "300" adalah tinggi kolom
    Sedangkan #ffffff adalah kode untuk backgroud

  • Merubah warna font, untuk kode warna ini contohnya :


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

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

Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

Sedikit ilmu ini semoga bermanfaat.... 
Tak lupa saya ucapkan terima kasih kepada Bang Miscah sudah memberikan pelajaran berharga ini.


Bookmark and Share


Terima Kasih Telah Berkunjung dan Meluangkan Waktu Anda untuk Membaca Artikel Di Atas. Semoga Bermanfaat Untuk Anda. Jangan Lupa Kasih Komentar Ya!

3 komentar:

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com