Cara Buat Widget Label Cloud Unik Dan Elegant

Cara Memasang Widget Label Tag Cloud Terbaru + Memasang Label Cloud Pada Blogger + Cara Memasang Widget Label Cloud Animasi Pada Blog + Cara Membuat Widget Label Cloud Terbaru di Blog

Tentunya Anda sudah tahu dengan tampilan widget label bawaan template standar blogger.com tapi tampilan dari widget tersebut bagi saya tidak menarik sama sekali dan tidak bisa menarik perhatian dari pengunjung blog.

Pada Postingan kali ini Saya akan memberikan tips blogger untuk memodif tampilan widget label tersebut supaya kelihatan menarik dan bisa memikat perhatian para pengunjung di blog kita. Untuk contoh nya bisa Anda lihat sendiri pada sidebar bagian bawah blog ini dan coba anda sorot dengan mouse.

Langkah-langkah dari pembuatan widget tersebut sebagai berikut;

Pada langkah ini kita akan menyimpan kode CSS nya pada terlebih dahulu

1. Seperti biasa login dulu kea kun blogger Anda

2. Didasbor pilih menu Template

3. Kemudian pilih lagi Edit HTML

4. Klik Lanjutkan

5. Centang kotak Expand Template Widget

7. Cari kode ]]></b:skin>

8. Setelah ketemu copy kode berikut dan paste diatas kode ]]></b:skin>

/*-----Widget by i-net9.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;

9. Setelah itu klik simpan template kemudian klik tutup.

Pada  Langkah selanjutnya Kita akan mengatur tampilan widget cloud nya;

1. Klik menu Tata Letak

2. Kemudian Pilih menu Tambah Gadget, terserah Anda mau meletakkan kode nya bisa disidebar kanan/kiri atau pun dibagian bawah.

3. Pilih tulisan HTML/JavaScript --> klik Label kemudian atur lah sesuai dengan contoh gambar dibawah ini

(Catatan; untuk judul blog, silahkan tulis sesuai keiginan Anda , kalau ingin menampilkan semua label klik kolom semua label)

4. Langkah terakhir silahkan klik simpan dan lihat lah hasilnya.