Minggu, 03 Juli 2011

Membuat Label Cloud Berputar Transparan

blogumulus Asslamualaikum sobat blogger apa kabar semua,,, seperti biasa faat mau kasih tutorial cara bikin  Label (categori dalam blog) sebelumnya faat mau jelasin dulu apa sih label itu?  Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template sobat pasti tau...... Saat ini model atau bentuk label ada 3, label daftar atau yang biasa (standard), label cloud (acak), dan label cloud berputar(rolling). Yang akan kita bahas sekarang adalah memasang label cloud berputar (rolling) di blog


Label cloud berputar ini terlihat lebih menarik karena gerakannya yang apik sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor pointer.
  
Tapi untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran saya nanti sebelum mengedit template, baiknya biasakan backup terlebih dahulu template sobat.
I. 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 tinggal Simpan Template. 
  8.  
    NB : apabila Ingin Mengedit Lebar Tinggi dan baground bisa buka edit html lalu cari bagian seprti di bawah ini
    • 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 silahkan cari di google
      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 :

    image


    Selamat Mencoba n Jangan lupa komentarnya selalu faat tunggu,,,,,, sebelumnya terimakasih telah berkunjung disini    by faat

    2 komentar:

    M. Miftahur Royan mengatakan...

    kok masih gak bisa ya gan
    http://4kopisusu.blogspot.com

    Imam syafaat mengatakan...

    gan gak bisanya dimana?... tuh punya ane bisa ,,, gan.. ,, jangn malu bertanya gan, kalo ane bisa bantu pasti ane bantu,, maksih dah mauu berkunjung di blogfaatlive,, gan

    Posting Komentar

    Silahkan Berkomentar di sini,, karena komentar anda adalah motivasi buat saya dan blog saya, sebelumnya terimaksih sudah mau berkunjung di FaatLive Thanks By Faat

    AYO IKUTI KAMI DISINI

    Related Posts Plugin for WordPress, Blogger...
    Twitter Delicious Facebook Digg Stumbleupon Favorites More

     
    Design by Imam Syafaat | Bloggerized by FaatLive Blogz - Berita Spesial Dan Info Terbaru | Cerita Sejarah Naruto dan Perjalananya