Cara Membuat Label Cloud Yang Keren
tanpa basa-basi..
Langsung aja ini caranya :
Langkah Pertama Membuat Label
1. Masuk dulu ke blogger sobat.
2. Pada tampilan Dashboard pilih Tata-Letak >> Tambahkan Gadget >> pilih Label.
4. Simpan Label..
Langkah Selanjutnya Membuat Tampilan Label Dengan CSS.
1. Kembali ke menu Dashboard sobat .
2. Lalu pilih Template >> Edit Html
3. Lalu sobat cari kode beikut ]]></b:skin> gunakan CTRL+F biar mempercepat percarian.
4. Setelah ketemu lalu copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>.
#Label1 a{outline:none;
border: 1px rgba(0,0,0,0.2) solid;
padding: 4px 6px 4px 12px;
text-decoration:none;
color:black;
width:auto;
white-space: nowrap;
font-family: arial;
font-size: 13px;
font-weight: bold;
position: relative !important;
background-image: linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -o-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -moz-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -ms-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.47, rgb(32,107,107)),
color-stop(1, rgb(34,201,184)),
color-stop(1, rgb(35,95,97))
);
float:left;
padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px;
}
#Label1 a:hover {
background-image: linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -o-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -moz-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -ms-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.47, rgb(92,12,12)),
color-stop(1, rgb(0,0,0)),
color-stop(1, rgb(120,26,26))
);
color:#fff;
}
#Label1 a:active {
background:#EC88C9;}
border: 1px rgba(0,0,0,0.2) solid;
padding: 4px 6px 4px 12px;
text-decoration:none;
color:black;
width:auto;
white-space: nowrap;
font-family: arial;
font-size: 13px;
font-weight: bold;
position: relative !important;
background-image: linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -o-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -moz-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -ms-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.47, rgb(32,107,107)),
color-stop(1, rgb(34,201,184)),
color-stop(1, rgb(35,95,97))
);
float:left;
padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px;
}
#Label1 a:hover {
background-image: linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -o-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -moz-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -ms-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.47, rgb(92,12,12)),
color-stop(1, rgb(0,0,0)),
color-stop(1, rgb(120,26,26))
);
color:#fff;
}
#Label1 a:active {
background:#EC88C9;}
5. Simpan Template Sobat , Dan lihat hasilnya.
6. Kalau mau Variasi sendiri tinggal edit aja background, ukuran dan yang lainnya...
Langganan:
Posting Komentar (Atom)
