+ -

Pages

Tuesday, January 1, 2013

Cara Membuat Label Cloud Berputar


Dulu pertama saya ngeliat Label berputar di blog wodpress milik kakak kelas saya, saya liahat keren sekali saya ingin banget yang kayak gitu tapi ternyata di blogspot gak ada pilihannya , dulu peernah nyobak beberapa tutorial yang ad auntuk bikin label beerputar tapi gak berhasil terus, lalu saya nyerah..
akhir akhir nie ane lagi teringat dengan label nan ilegan itu jadi ane cari cari dan milah-milah dan mencapur capur tutorial yg ada akhirnya berhasil..sobat yang pengen juga silahkan ikuti langkah dibawah ini :
  1. Login Blogspot
  2. Masuk ke Rancangan > Edit HTML >jangan lupacentang
  3. Saatnya beraksi ! siapkan kepala dingin biar tidak stess..(disarankan backup template)
  4. Cari Code ini <b:section class='sidebar' id='sidebar' preferred='yes'>
  5. Setelah ketemu ya salaman dulu, haha dibawahnya ada code
  6. <b:widget id='Label2' locked='false' title='Label Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:else/>
    <b:loop values='data:labels' var='label'>
    <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
    </b:if>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
    pasti ada nie kode,..terus diapain? lanjut..
  7. Okeh kalo dah ketemu kode tadi kita ganti sama kode dibawah ini

    <b:widget id='Label99' locked='false' title='Cloud Category' 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'>Tutorial by <a href='http://newbi-blogs.blogspot.com/'>Newbi Blog's</a> and <a href='http://newbi-blogs.blogspot.com/'>Newbi Blog's</a></div>
    <script type='text/javascript'>
    var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "180", "200", "7", "#FFFFFF");
    // uncomment next line to enable transparency
    //so.addParam("wmode", "transparent");
    so.addVariable("tcolor", "transparant");
    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>
    NB : merah : Tinggi ma Lebarnya
    Kuning : Warna Background
    Biru : gak penting tuh gak usa diganti ganti
  8. kalo sudah diganti, ya Simpan Template 
  9. Selamat Label kamu dah jadi Cloud Berputar putar.. sampe pusing dah putarnya


5 INFO MENARIK: Cara Membuat Label Cloud Berputar Dulu pertama saya ngeliat Label berputar di blog wodpress milik kakak kelas saya, saya liahat keren sekali saya ingin banget yang kayak gi...

No comments:

Post a Comment

< >