Cara Buat Stylish CSS Custom Labels Untuk Blog

CSS stylish label widget
Hi...kepada pemilik blog blogspot diluar sana, hari ni ada tutorial saya nak kongsi macam mana atau bagaimana nak buat atau ubah custom labels kepada stylish CSS custom labels widget versi cloud yang lebih cantik dan menarik dalam blogger. 

Tips ini boleh digunakan dalam label blog widget dengan hanya menambah beberapa kod CSS mudah ke dalam blog. Labels Cloud digunakan untuk menunjukkan semua kategori label. Direka untuk label widget seperti butang CSS yang lebih menarik untuk blogger.

Macam mana nak mengubahnya hanya Ikuti langkah-langkah mudah dibawah:

masuk akaun blogger > Dashboard > Blogger Template > Edit HTML 

kemudian cari tag dibawah dalam template blogger anda,
 ]]> </ b: skin> 

Kemudian copy dan paste kod CSS di atas sebelum tag ini  ]]> </ b: skin>,

/*----- Custom Labels Cloud Belajar Blogging.com-----*/ 
.label-size 
{ 
position:relative; 
margin:0; 
padding:0; 
} 
.label-size a 
{ 
float:left; 
height:24px; 
line-height:24px; 
position:relative; 
font-size:12px; 
margin-bottom:9px; 
margin-left:20px; 
background:#2aa4cf; 
color:#fff; 
text-decoration:none; 
-moz-border-radius-bottomright:4px; 
-webkit-border-bottom-right-radius:4px; 
border-bottom-right-radius:4px; 
-moz-border-radius-topright:4px; 
-webkit-border-top-right-radius:4px; 
border-top-right-radius:4px; 
padding:0 10px 0 12px; 
} 
.label-size a:before 
{ 
content:""; 
float:left; 
position:absolute; 
top:0; 
left:-12px; 
width:0; 
height:0; 
border-color:transparent #0089e0 transparent transparent; 
border-style:solid; 
border-width:12px 12px 12px 0; 
} 
.label-size a:after 
{ 
content:""; 
position:absolute; 
top:10px; 
left:0; 
float:left; 
width:4px; 
height:4px; 
-moz-border-radius:2px; 
-webkit-border-radius:2px; 
border-radius:2px; 
background:#fff; 
-moz-box-shadow:-1px -1px 2px #004977; 
-webkit-box-shadow:-1px -1px 2px #004977; 
box-shadow:-1px -1px 2px #004977; 
} 
.label-size a:hover 
{ 
background:#555; 
} 
.label-size a:hover:before 
{ 
border-color:transparent #555 transparent transparent; 
}

Klik save template. 
Itu saja....mudah je kan!....selamat mencuba.

Saya berharap ia berfungsi untuk blog korang - Jika korang menghadapi sebarang masalah, maka sila komen dan jika korang mendapat post entri ini membantu maka sila berkongsi post ini dengan rakan-rakan di laman Sosial. Terima kasih kerana membaca.