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
jika ada yang ingin agan tanyakan silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.
