selamat datang

SELAMAT DATANG DAN SELAMAT MEMBACA

Wednesday, June 26, 2013

Cara Membuat Label Dengan Efek Css Di Blog

Cara Membuat Label Dengan Efek Css Di Blog

Cara Membuat Label Dengan Efek Css Di Blog
Assalamualaikum wr.wb. kali ini saya akan posting tentang Cara Membuat Label Dengan Efek Css Di Blog. postingan ini masih berhubungan dengan cara buat label berputar di blog ya,sama-sama menggunakan label versi cloud bedanya label yang satu ini dia ditempat dan tampil lebih elegan dengan border yang tak terlalu nyentrik,perbedaan lainnya ada pada efek hover, jika anda mengarahkan mouse ke arah label maka label tersebut akan menjadi miring kesamping

Jika anda ingin memasang seperti demo diatas ikuti langkah-langkah berikut
PEMASANGAN LABEL
ini adalah hal yang harus dilakukan yaitu  memasang label anda,dan mengubah tampilannya menjadi cloud caranya seperti ini
1.buka blogger > blog anda
2.tata letak      > tambahkan widget
3.label > lalu pilih tampilan cloud seperti ini Tampilkan
4.simpan

MENGEDIT TAMPILAN
langkah kedua adalah mengedit tampilannya ikuti langkah berikut
  • 1.buka blogger > blog anda
  • 2.template        > edit html
  • 3.cari kode  ]]></b:skin> lalu pastekan kode berikut diatasnya
.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:12px;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;
}


  • 4.ubah kode font-size:12px untuk mengubah ukuran label.loh kenapa yang diganti ukuran teks ? ya karena besar label menyesuaikan dengan besar teks itu sendiri
  • 5.pratinjau,lalu klik simpan