RATE CARD!Pasang banner disini, dapatkan diskon 50%!

Menambahkan Tag Cloud Pada Template Blogspot

Menambahkan Tag Cloud Pada Template Blogspot

tag cloud blogspot Tidak hanya Blog WordPress saja yang bisa menggunakan fitur Tag cloud, Blogger juga sekarang bisa lho.bisa dilakukan langsung melalui Page Element. Namun terkadang (sesuai dengan pengalaman saya) kebanyakan theme masih belum mendukung tag cloud yang cantik seperti yang terdapat pada wordpress, seperti halnya tidak adanya perbedaan ukuran huruf (yang didasarkan kepada jumlah kategori postingan), semakin banyak kategori postingan, maka ukuran/ size huruf Tag coud tsb akan semakin besar (contohnya seperti gambar diatas).

Nah tidak usah bertele – tele lagi, saya akan langsung saja memberikan tutorialnya dibawah ini, namun dengan catatan: selalu pastikan anda sudah membackup template anda sebelum melakukan perubahan apa pun, hal tsb untuk mengantisipasi kalau – kalau saja akan terjadi kesalahan ada saat proses editing:

  1. pastikan anda sudah memasang Widget label terlebih dahulu pada Layout >Page Elements (Tambah Widget yang bernama LABEL)
  2. Setelah berhasil selanjutnya anda menuju ke Halaman Layout -> Edit HTML, lalu centang opsi “Expand Widgets Template” yang ada disana. Lalu beris perintah berikut:
    <b:widget id='Label1' locked='false' title='Tags' type='Label'/>
  3. Selanjutnya anda Replace/ timpah baris perintah kode diatas dengan kode dibawah ini:
    <b:widget id='Label1' locked='false' title='Tags' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content' style='text-align: justify;'>
    <script type='text/javascript'>
    /*
    Simple Blogger Tag Cloud Widget
    by Raymond May Jr.
    http://www.compender.com
    Released to the Public Domain
    */
    
    //Settings / Variables
    var max = 150; //max css size (in percent)
    var min = 70; //min css size (in percent)
    var showCount = false;  // show counts? true for yes, false for no
    var minCount = 1;  // what is the minimum count for a tag to be shown? 1 for all
    
    
    //Begin code:
    var range = max - min;
    
    //Build label Array
    var labels = new Array();
    <b:loop values='data:labels' var='label'>
    labels.push(&quot;<data:label.name/>&quot;);
    </b:loop>
    
    //URLs
    var urls = new Array();
    <b:loop values='data:labels' var='label'>
    urls.push(&quot;<data:label.url/>&quot;);
    </b:loop>
    
    //Counts
    var counts = new Array();
    <b:loop values='data:labels' var='label'>
    counts.push(&quot;<data:label.count/>&quot;);
    </b:loop>
    
    //Number sort funtion (high to low)
    function sortNumber(a, b)
    {
    return b - a;
    }
    
    //Make an independant copy of counts for sorting
    var sorted = counts.slice();
    
    //Find the largest tag count
    var most = sorted.sort(sortNumber)[0];
    
    //Begin HTML output
    for (x in labels)
    {
    if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
    {
    //Calculate textSize
    var textSize = min + Math.floor((counts[x]/most) * range);
    //Show counts?
    if(showCount)
    {
    var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
    }else{
    var count = &quot;&quot;;
    }
    //Output
    document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
    }
    }
    </script>
    <br/>
    <span style="font-size:80%;float:right;">Powered by <a href="http://www.potter.web.id">Blog Indonesia</a></span>
    </div>
    </b:includable>
    </b:widget>
  4. Nah selesai deh, selanjutnya coba anda preview tampilan index blognya, kalau berhasil (tag cloudnya muncul), ya tinggal anda SAVE saja.

Demikian, semoga dapat bermanfaat.

Penulis: Lilis Mayasari/ LieZMaya, reff dari berbagai sumber.

Print Friendly, PDF & Email
pasang banner premium
Di tulis oleh: | Tags:
Kategori: Blogspot | No Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Please komentar yang nyambung yaaa dengan topik postingan saya diatas!, jangan spam! Ayo buktikan kalau anda adalah manusia! * Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.