Tuesday, June 11, 2013

Cara Membuat Widget Label Cloud Unik Dan Elegant

Pada tutorial blog kali ini saya akan berbagi cara membuat label cloud unik dan elegant. Dengan tampilan widget label cloud yang ini, blog kita akan terlihat lebih keren. Langsung aja deh berikut cara membuat widget label cloud unik dan elegant.


  1. Masuk ke Blogger Dashbord
  2. Pilih template >> Edit HTML
  3. Cari Kode ]]></b:skin>
  4. Setelah ketemu copy kode dibawah ini dan paste diatas kode ]]></b:skin>
.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 itu klik simpan template. Selesai, lihat deh hasilnya...


5 comments:

  1. keren labelnya,tapi ane udah pakai yang label berputar jadi ga perlu ubah label lagi deh gan :-d

    ReplyDelete
  2. Thanks for post :D
    Kunjungan balik :
    http://firmanardyansyah.blogspot.com/

    ReplyDelete
  3. makasih gan atas caranya...Komen nomor 3 gan..hahahh

    ReplyDelete
  4. Koq gak bereaksi di blog saya sobat padahal sudah betul saya pasang css nya menurut panduan artikel sobat di atas mohon di koreksi kode css nya ..? apa memang template blog saya nya yang gak support sama kode css ini..?
    Visit : Karrysta | Blog Berbagi
    URL : http://karristaent.blogspot.com

    ReplyDelete
  5. @Saud Karrysta: Kalau agan pke readmore taruh kodenya diatas kode css readmore atau breadcrumbs

    ReplyDelete