Cara membuat widget label cloud unik pada blogger - Pemasangan widget digunakan agar tampilan blog semakin menarik pengunjung, sehingga pengunjung merasa betah dan dapat dipastika mereka akan kembali lagi mengunjungi blog anda jika mereka suka dengan isi blog anda. maka dari itu saya kali ini akan membuat postingan tentang Cara membuat widget label yang menarik untuk dipasang di blog.

Sebelum memasang alangkah baiknya anda lihat terlebih dahulu tampilan widget label cloud yang akan anda pasang seperti gambar berikut ini :


Untuk mendapatkan tampilan widget cloud seperti gambar diatas silahkan anda ikuti langkah membuat tampilan widget label menjadi menarik dibawah ini.

  • Masuk ke akun blog anda
  • Pilih >> Rancangan-edit HTML.
  • Centang pada >> Expand Widgets Templates
  • Silahkan anda cari kode berikut : ]]></b:skin> (gunakan Ctrl + F) untuk mempermudah pencarian kode tersebut.
  • Jika sudah ketemu kemudian pasang kode dibawah ini :
/*-----Widget by http://waroenkblog.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;
  • Setelah kode diatas terpasang simpan pengaturan anda kemudian keluar/close dari edit HTML
  • Kemudian masuk ke layout >> Add Gadget >> Label
  • Pilih seperti dibawah ini dan save pengaturan label.
  • Kemudian atur letak tag cloud sesuai template anda.
  • Terakhir simapan semua perubahan, dan chek hasilnya.
NB :
Jika Sahabat blogger ingin mengubah warna kotaknya agar sesuai dengan warna template sahabat silahkan ganti kodeyang berwarna merah dengan kode warna yang sesuai dengan warna template blog sahabat.


Setelah sahabat mengikuti langkah-langkah diatas sudah pasti akan berhasil seperti gambar dibawah ini :
Demikian penjelasan saya tentang  Cara membuat widget label cloud unik pada blogger. Semoga artikel ini bermanfaat. Temukan widget lainnya disini untuk mempercantik blog anda. 

0 komentar:

Posting Komentar

Site search

    Link Aktif

    Page Rank
    IP

    Pengikut