Pasang iklan Anda di sini.
https://goo.gl/Io3Xqy

Wednesday, April 24, 2013

0 Customize Labels Cloud in Blogger




Ikuti langkah-langkah berikut:
    
1. Pergi ke Blogger> Settings> Layouts


    2. Klik tambah gadget dan pilih Label
      
3. Di dalam pengaturan pastikan untuk memilih tampilan awan. Anda dapat mengatur options lain sesuai keiginan Anda. Lihat gambar di bawah ini sebagai contoh

labels settings 
4. Sekarang simpan widget dan pergi ke pengaturan> Template
         
5. Backup template Anda
        
6. Klik Edit html> Lanjutkan dan mencari ini

]]></b:skin>

7. Paste kode CSS berikut Tepat di atas kode ]]></b:skin> : 

 /*-----Custom Labels Cloud widget by www.MyBloggerTricks.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;
}

8. Simpan Template anda.

9. all done ;D

*Kunjungi blog anda dan lihat label benar-benar berubah kepada kecil kotak segi empat tepat dengan kemas halus. Jika dalam kes anda mahu kotak label menjadi saiz rawak bergantung kepada selepas mengira kemudian hanya memadam font-size: 10px; dari kode di atas.

Semoga bermanfaat ;)