Langkah Pertama ( Membuat Label Cloud)
- Login Ke Blogger Sobat.
- Pilih Tata Letak >> Tambah Gatget >> Label.
- Lalu Edit Pengaturan Labelnya menjadi seperti Gambar.
Keterangan :
bila sobat sudah menambahkan label cloud pada blog sobat,Sobat tidak usah ikuti langkah pertama.
Langkah Kedua ( Menambahkan CSS )
- Pergi Ke Tamplate >> Edit HTML >> Lanjutkan
- Cari Kode ]]></b:skin> Untuk Mempermudah Gunakan F3 atau Ctrl+F.
- Copy Kode Di bawah ini lalu pastekan tepat di atas kode ]]></b:skin>
/* Code By www.blogsbaddy.com */
.list-label-widget-content ul
{
list-style-type:none;
padding-left:0px !important;
display:inline-block !important;
}
.list-label-widget-content li {
display:inline-block;
}
.list-label-widget-content li a {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background:
#f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0
#fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background:
#f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
border: solid 1px
#ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none;
}
.list-label-widget-content li a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px
rgba(0,0,0,0.15);
}
- Simpan dan Lihat Hasilnya
salam kenal.....
BalasHapuslam kenal juga gan
Hapusgak ngerti...
Hapusyg mana yg blm ngerti. msh baru ya mba
Hapus