Label Cloud Blogger dengan Tampilan yang Lembut

Bismillahirrahmanirrahim...

MULTI PASTE - Blogger saat ini telah banyak melakukan pembaharuan, mulai dari tampilan interface sampai fasilitas widget yang akan digunakan oleh para blogger, antara lain tersedianya widget label yang bersifat dinamis. Widget ini dapat disesuaikan, diantaranya label dapat ditampilkan secara keseluruhan atau berdasarkan pilihan,  dapat diurutkan berdasarkan alphabetik dari A - Z atau diurut berdasarkan frekwensi, mulai dari label yang paling sering di klik pengunjung sampai label yang paling jarang diklik oleh pengunjung.  Label juga dapat ditampilkan dalam bentuk daftar atau dalam bentuk cloud yang lebih dinamis.  Saat ini angka yang yang menunjukkan banyaknya postingan pada setiap label yang biasa tampil dibekang label sudah bisa diatur sesuai keinginan, akan ditampilkan atau tidak, sebelumnya untuk Menghilangkan Angka yang Tertera di Belakang Label ini harus dilakukan melalui edit dokumen HTML template.

Pada artikel ini saya akan memberikan sedikit trik untuk memodifikasi tampilan label cloud agar kelihatan lebih cantik dan menarik.  Akan terlihat sedikit animasi pada label saat mouse pengunjung diarahkan tepat di atas label.  Untuk menggunakan label ini, anda hanya perlu menambahkan sedikit kode CSS pada dokumen HTML template, bentuk tampilan label seperti di bawah ini, atau anda dapat melihat live demo pada homepage atau halaman utama blog ini.

label clouds 

Berikut ini adalah cara memodifikasi label cloud blogger agar tampil lembut dan menarik.
  • Login ke blogger dengan ID anda
  • Klik link title blog anda
  • Pilih menu Layout ->> Add a gadget ->> pilih gadget Label
label blogger 
  • Seting gadget sesuai keinginan anda, lihat gambar di bawah ini, kemudian simpan gadget dengan menekan tombol Save
configure labels
    • Masih dalam posisi login di blogger pilih menu Template ->> Edit HTML ->> Proceed
    • Cari kode seperti ini ]]></b:skin>
    • Paste kode di bawah ini tepat di atas kode ]]></b:skin>
      /*-----Custom Labels Cloud widget by http://multipaste.blogspot.com----*/
      .label-size{
      margin:0 2px 6px 0;
      padding: 3px;
      text-transform: uppercase;
      border: solid 1px #C6C6C6;
      border-radius: 3px;
      float:left;
      text-decoration:none;
      font-size:10px;
      color:#666;
      }

      .label-size:hover {
      border:1px solid #6BB5FF;
      text-decoration: none;
      -moz-transition: all 0.5s ease-out;
      -o-transition: all 0.5s ease-out;
      -webkit-transition: all 0.5s ease-out;
      -ms-transition: all 0.5s ease-out;
      transition: all 0.5s ease-out;
      -moz-transform: rotate(7deg);
      -o-transform: rotate(7deg);
      -webkit-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
      transform: rotate(7deg);
      filter: progid:DXImageTransform.Microsoft.Matrix(
      M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
      zoom: 1;
      }

      .label-size a {
      text-transform: uppercase;
      float:left;
      text-decoration: none;
      }
      .label-size a:hover {
      text-decoration: none;
      }
    • Simpan template anda dengan menekan tombol Save templates

    Sekarang periksa blog anda, pastikan widget label sudah tampil seperti apa yang anda harapkan, jika berhasil jangan lupa ucapkan Alhamdulillah, dan jangan sungkan untuk memberikan komentar di di bagian bawah artikel ini.  Komentar anda akan menjadi masukan bagi kami.. happy blogging.. :)