Blogger Label Widget Style #2

Continuing from my recent post about Blogger Label Widget style , I present another CSS3 powered style. It uses :before and :after selectors extensively & cunningly to manipulate the shapes accompanied with CSS3 transform. CSS3 gradients are used for backgrounds. It also highlights the the count besides each label. It was originally designed by Jakob Cosoroaba , I just converted it into Blogger usable .

 

Before you get started make sure that your Blog has the Label Widget present already and set the Display option to Cloud and also tick the option to display the count.

Demo

CSS3 Label Style

To add this Label Style to your blog, you can use the one click installer

<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://www.stylifyyourblog.com/” >Stylify Your Blog</a>

Or you can add it manually

To do that just add the following CSS to your Blog

.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;}

Here the height in the Line 130 of the CSS above has to be adjusted according to the number of Labels your blog has . If this is not done then the Labels might overlap with other widgets.

Will be publishing one more design in the next week and also a tutorial on how to create the Add to Blogger button as asked my many readers . In case you have any problem implementing this in your Blog, feel free to ask .

34 Replies to “Blogger Label Widget Style #2”

    1. I checked your blog ,There is no Label Widget present in the sidebar

      Firstly add a Label widget by going to Layout > Add a Gadget > add the widget named Labels

      Set the Display to Cloud and tick the option to show the number of post per label

      Also the widget you added , has a link of Stylify Your Blog ,whose address is .co instead of .com in the end ,please fix that too

      Also when I saw your comments ,there was bit of a problem with the images , to fix it add the following CSS

      .comments .avatar-image-container img {max-width: 40px !important;}

    2. Thank you so much, both label and comment issues are solved, I need to do modification in labels , I wanted to cut short the labeling and want to keep only few labels, I want to know will changing labels effect SEO ? ?

      Also I want to have the commentor's name highlighter like you have in the comment section, the css you gave me did not worked, please suggest.

    3. In case you are reducing the no. of labels to see any effect in SEO, then there will be none

      This is because by default Blogger does not allow indexing of the URL of the type /search (if you observe the URL of Label pages its like /search/label/label-name )in the Blog. So it increasing and decreasing will not effect the SEO a lot.

      The only downside can be when you have a very large number of labels , then that can be considered as keyword stuffing , but very large like 100s of them

      To remove Labels from post in bulk ,go to Edit Post page , tick the post and click the Label Action dropdown menu and select the label to remove or add (This is possible in Older Interface only)

      To remove labels manually you will have to go to each post (Edit) and then remove the label from their

      For comment Author highlighting , just add the following CSS


      cite.user {
      color: #F0F0F0;
      text-transform: uppercase;
      background-color: #FFE87C;
      border: 1px solid #9C1406;
      text-align: center;
      text-transform: uppercase;
      font-size: 14px;
      padding: 0px 10px 0px 10px;
      text-decoration: none;
      font-family: Arial,Helvetica,sans-serif;
      font-weight: bold;
      -moz-box-shadow: 2px 2px 4px #666;
      -webkit-box-shadow: 2px 2px 4px #666;
      box-shadow: 1px 1px 6px #666;
      text-shadow: none;
      position: relative;
      left: -10px;
      margin-left: 15px;
      }

      This is the same code I gave before, it works , i applied it to your blog and checked , Here is a screenshot of it
      http://1.bp.blogspot.com/-dVhLlAT_Uu8/T6gWTpX1pOI/AAAAAAAAEhA/ebcTzW_b9Ls/s1600/test.PNG

    4. To change spacing and font size ,add the following CSS

      .label-size {
      margin-right: 10px !important;
      padding: 0px 5px !important;
      font-size: 10px !important;
      }

      To change the background color , you will first have to go here CSS3 Gradients

      Select the gradient of your choice and copy the CSS markup , and then add the following CSS

      .label-size , .label-size::after { the copied opied CSS }

      .label-size {
      border: 1px solid #000000 !important;
      box-shadow: inset 0 1px 0 #000000 !important;
      background-color: #000000 !important;
      text-shadow: 0px 1px 1px #000000 !important;
      }
      .label-size::after {
      content: " ";
      border-top: 1px solid #000000 !important;
      border-right: 1px solid #000000 !important;
      box-shadow: inset 0 1px 0 #000000 !important;
      background-color: #000000 !important;
      text-shadow: 0px 1px 1px #000000 !important;
      }

      Replace #000000 with the colors of similar shades to the color selected in the CSS3 gradient tool

      Make sure to add the !important tag before every ; in the copied CSS

      Changing color is a little lengthy process as it requires shades matching and stuff ,so the result might not be very pleasing in the first go

    5. Thank you so much for spending your time for helping me, I am done with the labels but comment Author highlighting is not happening correctly with me , I have applied the css you can check it in my blog, it is still there.

    6. Try using this CSS

      .user {
      color: #F0F0F0;
      text-transform: uppercase;
      background-color: #FFE87C;
      border: 1px solid #9C1406;
      text-align: center;
      text-transform: uppercase;
      font-size: 14px;
      padding: 0px 10px 0px 10px;
      text-decoration: none;
      font-family: Arial,Helvetica,sans-serif;
      font-weight: bold;
      -moz-box-shadow: 2px 2px 4px #666;
      -webkit-box-shadow: 2px 2px 4px #666;
      box-shadow: 1px 1px 6px #666;
      text-shadow: none;
      position: relative;
      left: -10px;
      margin-left: 15px;
      }

    7. The code is not working because your CSS has a stray } (closing bracket) just above the .user code , remove that single closing brace ( } ) and it will work

      Also to reduce the size , this is the CSS

      .label-size::after {
      content: " ";
      height: 18px !important;
      line-height: 18px !important;
      font-size: 25px !important;
      top: 0.12em !important;
      }

      .label-size span {
      padding: 1px 3px !important;
      margin-left:0px !important;
      }

    8. Comment highlighter worked but there is some glitch is still present still present please check .

      Also the label size is not getting reduced, please check that too.

      thank you Prayag

  1. Amazing, this looks better than previous post, i am not a professional but in my opinion widget text colcor should be changes, it does not suit with green, i suggest you to change this into white color, can i do this?
    Thanks anyways.

  2. Great work bro, but unfortunately this is not working on my blog-www.makeuseofandroid.com (Now I removed the css from my template). I tried adding this widget from many other site too, but nothing worked. I think it should be my template problem. Kindly have a look at my site and give me a fix. I know you can fix this, so thanks in advance 😀

Leave a Reply

Your email address will not be published. Required fields are marked *