Blogger Ever

5 styles to customize your label widget in Blogger

15 styles to customize your label widget in BloggerThere are some widgets that are provided by Blogger while some are custom made.One of the Blogger widget,post labels is available to install.I've shared snippets to make up the label widget according to your needs.I am sharing the 5 different style snippets that are provided by different bloggers around the world.I've chosen some of them to show up here.So lets begin!





Lets start by adding the widget.

  • Go to Layout>Add widget>Labels.
15 styles to customize your label widget in Blogger

  • Now do the following settings.

    • 15 styles to customize your label widget in Blogger
      • Title (your choice)
      • Show (your choice)
      • Sorting (your choice)
      • Display (set to Cloud)
      • Do not tick Show number of posts per label.
      • Now go to Template > Edit HTML
      • Find ]]></b:skin> and paste one of the following snippet just above it.

      Style 1

      5 styles to customize your label widget in Blogger
      CODE
      /*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
      .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;
      }
      Credit goes to My Blogger Tricks

      Style 2

      5 styles to customize your label widget in Blogger
      CODE
      /*--- MBL Custom Label Cloud With CSS3 --- */
      .Label a{
      padding-left:20px;
      background:#000;
      padding:0 20px;
      color:#fff!important;
      border-radius:100px;
      -moz-border-radius:100px;
      height:32px;
      line-height:32px;
      text-transform:uppercase;
      text-decoration:none;
      border:none !important;
      -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
      float:left;
      margin-left:5px;
      margin-top:5px;
      font-size:14px; }
      .Label a:hover{
      color:#000 !important;
      background: #ff0; }
      Credit goes to My Blogger Lab

      Style 3

      5 styles to customize your label widget in Blogger
      CODE
      .label-size {
      float: left;
      margin: 0 0 7px 20px;
      position: relative;
      font-family: &<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;Helvetica Neue&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;, Helvetica, Arial, sans-serif;
      font-size: 0.75em;
      font-weight: bold;
      text-decoration: none;
      color: <a class="_hootified" a="" href="#" #996633"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#996633"}); document.body.dispatchEvent(e); return false;">#996633</a>;
      text-shadow: 0px 1px 0px rgba(255,255,255,.4);
      padding: 0.417em 0.417em 0.417em 0.917em;
      border-top: 1px solid <a class="_hootified" a="" href="#" #d99d38"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#d99d38"}); document.body.dispatchEvent(e); return false;">#d99d38</a>;
      border-right: 1px solid <a class="_hootified" a="" href="#" #d99d38"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#d99d38"}); document.body.dispatchEvent(e); return false;">#d99d38</a>;
      border-bottom: 1px solid <a class="_hootified" a="" href="#" #d99d38"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#d99d38"}); document.body.dispatchEvent(e); return false;">#d99d38</a>;
      -webkit-border-radius: 0 0.25em 0.25em 0;
      -moz-border-radius: 0 0.25em 0.25em 0;
      border-radius: 0 0.25em 0.25em 0;
      background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
      background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
      background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
      background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
      background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;<a class="_hootified" a="" href="#" #feda71"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#feda71"}); document.body.dispatchEvent(e); return false;">#feda71</a>&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;, EndColorStr=&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;<a class="_hootified" a="" href="#" #feba47"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#feba47"}); document.body.dispatchEvent(e); return false;">#feba47</a>&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;);
      -webkit-box-shadow: inset 0 1px 0 <a class="_hootified" a="" href="#" #faeaba"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#faeaba"}); document.body.dispatchEvent(e); return false;">#faeaba</a>,
      0 1px 1px rgba(0,0,0,.1);
      -moz-box-shadow: inset 0 1px 0 <a class="_hootified" a="" href="#" #faeaba"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#faeaba"}); document.body.dispatchEvent(e); return false;">#faeaba</a>,
      0 1px 1px rgba(0,0,0,.1);
      box-shadow: inset 0 1px 0 <a class="_hootified" a="" href="#" #faeaba"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#faeaba"}); document.body.dispatchEvent(e); return false;">#faeaba</a>,
      0 1px 1px rgba(0,0,0,.1);
      z-index: 1;
      }
      .label-size:before {
      content: &<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;;
      width: 1.30em;
      height: 1.39em;
      background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
      background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
      background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
      background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
      background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;<a class="_hootified" a="" href="#" #feda71"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#feda71"}); document.body.dispatchEvent(e); return false;">#feda71</a>&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;, EndColorStr=&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;<a class="_hootified" a="" href="#" #feba47"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#feba47"}); document.body.dispatchEvent(e); return false;">#feba47</a>&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;);
      position: absolute;
      left: -0.69em;
      top: .2em;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      border-left: 1px solid <a class="_hootified" a="" href="#" #d99d38"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#d99d38"}); document.body.dispatchEvent(e); return false;">#d99d38</a>;
      border-bottom: 1px solid <a class="_hootified" a="" href="#" #d99d38"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#d99d38"}); document.body.dispatchEvent(e); return false;">#d99d38</a>;
      -webkit-border-radius: 0 0 0 0.25em;
      -moz-border-radius: 0 0 0 0.25em;
      border-radius: 0 0 0 0.25em;
      z-index: 1;
      }
      .label-size:after {
      content: &<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;;
      width: 0.5em;
      height: 0.5em;
      background: <a class="_hootified" a="" href="#" #fff"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#fff"}); document.body.dispatchEvent(e); return false;">#fff</a>;
      -webkit-border-radius: 4.167em;
      -moz-border-radius: 4.167em;
      border-radius: 4.167em;
      border: 1px solid <a class="_hootified" a="" href="#" #d99d38"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#d99d38"}); document.body.dispatchEvent(e); return false;">#d99d38</a>;
      -webkit-box-shadow: 0 1px 0 <a class="_hootified" a="" href="#" #faeaba"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#faeaba"}); document.body.dispatchEvent(e); return false;">#faeaba</a>;
      -moz-box-shadow: 0 1px 0 <a class="_hootified" a="" href="#" #faeaba"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#faeaba"}); document.body.dispatchEvent(e); return false;">#faeaba</a>;
      box-shadow: 0 1px 0 <a class="_hootified" a="" href="#" #faeaba"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#faeaba"}); document.body.dispatchEvent(e); return false;">#faeaba</a>;
      position: absolute;
      top: 0.667em;
      left: -0.083em;
      z-index: 9999;
      }
      <a class="_hootified" a="" href="#" #label1"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#Label1"}); document.body.dispatchEvent(e); return false;">#Label1</a> {
      height: 210px;
      }
      .label-size:hover {
      background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
      background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
      background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
      background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
      background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;<a class="_hootified" a="" href="#" #fee18d"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#fee18d"}); document.body.dispatchEvent(e); return false;">#fee18d</a>&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;, EndColorStr=&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;<a class="_hootified" a="" href="#" #fec86c"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#fec86c"}); document.body.dispatchEvent(e); return false;">#fec86c</a>&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;);
      border-color: <a class="_hootified" a="" href="#" #e1b160"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#e1b160"}); document.body.dispatchEvent(e); return false;">#e1b160</a>;
      }
      .label-size:hover:before {
      background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
      background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
      background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
      background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
      background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;<a class="_hootified" a="" href="#" #fee18d"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#fee18d"}); document.body.dispatchEvent(e); return false;">#fee18d</a>&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;, EndColorStr=&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;<a class="_hootified" a="" href="#" #fec86c"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#fec86c"}); document.body.dispatchEvent(e); return false;">#fec86c</a>&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;);
      border-color: <a class="_hootified" a="" href="#" #e1b160"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#e1b160"}); document.body.dispatchEvent(e); return false;">#e1b160</a>;
      }
      Credit goes to Helper Blogger

      Style 4

      5 styles to customize your label widget in Blogger

      CODE
      .Label a
      {
      background: #0090D5;
      border: none !important;
      color: #fff!important;
      float: left;
      font-size: 13px;
      height: 26px;
      line-height: 26px;
      margin-left: 1px;
      margin-top: 1px;
      padding: 0 10px;
      padding-left: 10px;
      t: 30pxt: 30px;
      text-decoration: none;
      webkit-transition: all .3s ease-in-out !important;
      }
      .Label a:hover
      {
      background: #69625A;
      border-radius: px;
      moz-border-radius: 1px;
      webkit-border-radius: 1px;
      }
      Credit goes to Tricks Hunt

      Style 5

      5 styles to customize your label widget in Blogger
      CODE
      .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:15px;
      color:#000;
      }
      .label-size:hover {
      border:1px solid #6BB5FF;
      text-decoration: none;
      background:#000;
      }
      .label-size a {
      text-transform: uppercase;
      float:left;
      text-decoration: none;
      }
      .label-size a:hover {
      text-decoration: none;
      color:#fff;
      }
      Credit goes to Area 51
      Blogger

      2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.