Cara Membuat Atau Memodifikasi Label Blog Dengan Css3

Cara Membuat Atau Memodifikasi Label Blog Dengan Css3 - Assalamu'alaikum sahabat blogger semua.. apakabar mu hari ini.. semoga dalam keadaan baik-baik saja ya..??
Di kesempatan kali ini saya akan berbagi __Cara membuat atau memodifikasi label blog dengan css3__.
Dengan menggunakan **Cara Membuat atau memodifikasi label blog dengan css3** ini agar tampilan label pada blog kita kelihatan lebih bagus. Baiklah langsung saja kita simak __cara membuat atau memodifikasi label blog dengan css3__ berikut ini :
Silahkan masuk ke BLOGGER
Klik pada TEMPLATE dan EDIT HTML
Selanjutnya sobat cari kode ]]></b:skin> kalau sudah ketemu, lalu copy kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>


.label-size{
display: inline-block ;
padding: 0px 10px;
height: 29px;
line-height:29px;
border-radius: 5px;
font-weight: bold ;
font-size:12px;
text-decoration:none;
}
.label-size{
  border: 1px solid #769e42;
box-shadow: inset 0 1px 0 #
c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #6ea23b;
color: #fff;
background-image: linear-gradient
(bottom, rgb(125,196,64) 0%, rgb
(157,210,88) 100%);
background-image: -o-linear-
gradient(bottom, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -moz-linear-
gradient(bottom, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -webkit-linear-
gradient(bottom, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -ms-linear-
gradient(bottom, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
}
.label-size:hover{
  background-color: #b7fa66;
background-image: linear-gradient
(top, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-
gradient(top, #b7fa66 0%, #7ec940
100%);
  background-image: -moz-linear-
gradient(top, #b7fa66 0%, #7ec940
100%);
  background-image: -webkit-linear-
gradient(top, #b7fa66 0%, #7ec940
100%);
  background-image: -ms-linear-
gradient(top, #b7fa66 0%, #7ec940
100%);
}
.label-size:active{
  background-image: linear-gradient
(top, rgb(125,196,64) 0%, rgb
(157,210,88) 100%);
background-image: -o-linear-
gradient(top, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -moz-linear-
gradient(top, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -webkit-linear-
gradient(top, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -ms-linear-
gradient(top, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
}
.label-size{
  display:inline-block;
  border-radius: 5px 0 0 5px;
border-right-width:0;
position:relative;
z-index:5;
margin-right: 20px;
margin-bottom: 10px;
}
.label-size:after{
  content: " ";
width: 22px;
height: 22px;
line-height: 18px;
font-size:25px;
border-top: 1px solid #769e42;
border-right: 1px solid #769e42;
box-shadow: inset 0 1px 0 #
c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #7eac46;
border-radius: 3px 7px 3px 0;
color: #fff;
background-image: linear-gradient
(135deg, rgb(125,196,64) 0%, rgb
(157,210,88) 100%);
background-image: -o-linear-
gradient(135deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -moz-linear-
gradient(135deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -webkit-linear-
gradient(135deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -ms-linear-
gradient(135deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
position:absolute;
top: 3px;
right: -12px;
z-index:-3;
-webkit-transform: rotate(45deg);  /
* Saf3.1+, Chrome */
-moz-transform: rotate(45deg)
; /* FF3.5+ */
-ms-transform: rotate(45deg); /
* IE9 */
-o-transform: rotate(45deg);  /
* Opera 10.5 */
transform: rotate(45deg);
filter:
progid:DXImageTransform.Microsoft.Matrix
(/* IE6–IE9 */
M11=0.7071067811865476,
M12=-0.7071067811865475,
M21=0.7071067811865475,
M22=0.7071067811865476,
sizingMethod='auto expand');
zoom: 1;
}
.label-size:hover:after{
  background-color: #b7fa66;
background-image: linear-gradient
(-45deg, #b7fa66 0%, #7ec940 100%)
;
  background-image: -o-linear-
gradient(-45deg, #b7fa66 0%, #
7ec940 100%);
background-image: -moz-linear-
gradient(-45deg, #b7fa66 0%, #
7ec940 100%);
background-image: -webkit-linear-
gradient(-45deg, #b7fa66 0%, #
7ec940 100%);
background-image: -ms-linear-
gradient(-45deg, #b7fa66 0%, #
7ec940 100%);
}
.label-size:active:after{
  background-image: linear-gradient
(-45deg, rgb(125,196,64) 0%, rgb
(157,210,88) 100%);
background-image: -o-linear-
gradient(-45deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -moz-linear-
gradient(-45deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -webkit-linear-
gradient(-45deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -ms-linear-
gradient(-45deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
}
.label-size:before{
  content: " ";
height:5px;
width:5px;
display:block;
position:absolute;
right:-3px;
top:11px;
background-color: #fcfdf5;
border: 1px solid #83ab52;
border-radius:5px;
box-shadow: 0 1px 0 #b2ddd83;
}
.label-size span{
padding:2px 5px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
background-color: #ed943f;
text-shadow: 0px 1px 1px #000;
margin-left: 10px;
background-image: linear-gradient
(bottom, rgb(211,95,32) 0%, rgb
(223,131,45) 100%);
background-image: -o-linear-
gradient(bottom, rgb(211,95,32) 0%,
rgb(223,131,45) 100%);
background-image: -moz-linear-
gradient(bottom, rgb(211,95,32) 0%,
rgb(223,131,45) 100%);
background-image: -webkit-linear-
gradient(bottom, rgb(211,95,32) 0%,
rgb(223,131,45) 100%);
background-image: -ms-linear-
gradient(bottom, rgb(211,95,32) 0%,
rgb(223,131,45) 100%);
}
#Label1 {height:210px !important;}




Setelah itu simpan... dan lihatlah label pada blog sobat. Taraaaaa sudah berubah menjadi lebih bagus... hehehe Untuk demonya silahkan lihat label di homepage blog ini.
**NB** : saya mohon maaf jika penampilan scrip di atas kurang rapi. Tidak menggunakan kotak scrip, sepoiler dan lain-lain. Dikarenakan peralatan yang saya gunakan untuk posting agak susah bila di gunakan untuk post scrip..
Nah itulah  Cara Membuat Atau Memodifikasi Label Blog Dengan Css3 yang bisa saya bagika untuk sahabat blogger semua.. setelah beberapa hari bingung cara postingnya. Karena tidak bisa posting script. Hehehehe semoga bermanfaat untuk sahabat blogger semua..

Posted via Blogaway