There 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.
- 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
/*-----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
/*--- 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
.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
.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
.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
Post A Comment:
0 comments: