How To Add Blogger Label Widget Style #2

Continuing from my recent flyer near Blogger Widget Style , I instant another CSS3 supercharged call. It uses :before and :after selectors extensively & trickily to chisel the shapes accompanied with CSS3 metamorphose. CSS3 gradients are victimised for backgrounds. It also highlights the the determine besides each marque. It was originally intentional by Jakob Cosoroaba , I conscionable regenerate it into Blogger operational .

How  To add this Label Style #2 to your blog?

• Go to Blogger > Design.
• Click add a Gadget > HTML/JavaScript.
• Paste the code and save it.

<style type="text/css">
/*<![CDATA[*/
.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;}

/*]]>*/
</style>
<a href="http://bloggers-hero.blogspot.com" >Blogger Hero</a>

Hope you liked the Label Design #2.

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 7:27 PM and have 0 comments

Writed by : Admin ID-Netblog

My friend was reading the article onHow To Add Blogger Label Widget Style #2 . Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below. <a href="https://bloggerheroe.blogspot.com/2012/10/how-to-add-blogger-label-widget-style-2.html" target="_blank">How To Add Blogger Label Widget Style #2 </a>

ARTIKEL TERKAIT: