Attractive CSS Cloud Label Styles For Blogger
.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:10px;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;
}
CSS3 Beautiful Category Widget For Blogger
.label-size a {
margin: 0 2px 6px 0;
padding: 8px;
border: solid 5px #32E097;
border-radius: 3px;
float: left;
color: #FFF;
background-color: #E52C79;
font-family: Raleway;
font-size: 18px !important;
text-decoration: none !important;
word-spacing: 8px;
}
.label-size span {
margin: 0 2px 6px 0;
padding: 8px;
border: solid 1px #C6C6C6;
border-radius: 3px;
float: left;
color: #FFF;
background-color: #932CE5 !important;
font-family: Raleway;
font-size: 18px !important;
text-decoration: none !important;
font-weight: bold;
word-spacing: 8px;
}
.label-size a:hover {
margin: 0 2px 6px 0;
padding: 8px;
border: solid 5px #32E097;
border-radius: 3px;
float: left;
color: #FFF;
background-color: #D22CE5;
font-family: Raleway;
font-size: 18px !important;
text-decoration: none !important;
word-spacing: 8px;
zoom: 1;
}
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="javascript:newPopup('https://googledrive.com/host/0BzPgmXeCwsMRRVk3eFBpcmRuSzQ/');" rel="nofollow"><b>View Code</b></a>
Colorful Cloud Label Style For Blogger
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#BC951A;border-bottom:3px solid #BC761A;}
.sidebar .label-size-1 a:hover {background:#BC761A;}
.sidebar .label-size-2 a {background:#E73C69;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#E73C69;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}
Tahap penerapannya :
Masuk ke blog yang akan Anda sematkan cloud label, lalu pilih TEMPLATE dan EDIT HTML. Kemudian cari kode seperti ini ]]></b:skin> lalu sematkan salah satu kode CSS gaya cloud label di atas sebelum kode ]]></b:skin>.
Setelah itu keluar dari EDIT HTML dan masuk ke LAYOUT lalu tambahkan elemen laman WIDGET HTML dan pilih WIDGET LABEL. Beri tanda tik pada kotak CLOUD.
Selesai.
</>
