Sunday, 15 June 2014
LABEL WIDGET RAINBOW/MULTI COLOUR STYLE


-------------------------------------------------------------------------------------------------
- FIRST ADD LABEL WIDGET AND SET LIST OPTION
- REPLACE YOUR B SKIN TAG WITH BELOW CODE
- ITS HTML CODE WORKS LABEL ID
- SO USE SMILER LABEL CSS/HTML ID IN CODE
- Read More:
http://fbgadgets.blogspot.co.uk/2014/06/label-widget-rainbowmulti-colour-style.html
http://fbgadgets.blogspot.co.uk/2014/05/label-widget-simple.html
http://fbgadgets.blogspot.co.uk/2014/08/multi-color-label-cloud-widget.html
COLOR CHARTS:
#Label1 ul {
margin: 0;
padding: 2px 0;
list-style-type: none;
}
#Label1 ul li {
position: relative;
margin: 5px 0;
border: 0;
padding: 10px;
}
#Label1 ul li:first-child:after,#Label1 ul li:first-child + li:after,#Label1 ul li:first-child + li + li:after,#Label1 ul li:first-child + li + li + li:after,#Label1 ul li:first-child + li + li + li + li:after,#Label1 ul li:first-child + li + li + li + li + li:after,#Label1 ul li:first-child + li + li + li + li + li + li:after,#Label1 ul li:first-child + li + li + li + li + li + li + li:after,#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after {
position: absolute;
top: 20px;
right: -15px;
border-radius: 50%;
background: #353535;
width: 30px;
height: 30px;
line-height: 1em;
text-align: center;
font-size: 28px;
color: #fff;
}
#Label1 ul li .item-thumbnail {
float: left;
border: 0;
margin-right: 10px;
background: transparent;
padding: 0;
width: 70px;
height: 70px;
}
#Label1 ul li a {
font-size: 12px;
color: #444;
text-decoration: none;
}
#Label1 ul li a:hover {
color: #222;
text-decoration: none;
}
#Label1 ul li:first-child {
background: #ff4c54;
width: 90%;
}
#Label1 ul li:first-child:after {
content: "1";
}
#Label1 ul li:first-child + li {
background: #ff764c;
width: 87%;
}
#Label1 ul li:first-child + li:after {
content: "2";
}
#Label1 ul li:first-child + li + li {
background: #ffde4c;
width: 84%;
}
#Label1 ul li:first-child + li + li:after {
content: "3";
}
#Label1 ul li:first-child + li + li + li {
background: #c7f25f;
width: 81%;
}
#Label1 ul li:first-child + li + li + li:after {
content: "4";
}
#Label1 ul li:first-child + li + li + li + li {
background: #33c9f7;
width: 78%;
}
#Label1 ul li:first-child + li + li + li + li:after {
content: "5";
}
#Label1 ul li:first-child + li + li + li + li +li {
background: #7ee3c7;
width: 75%;
}
#Label1 ul li:first-child + li + li + li + li + li:after {
content: "6";
}
#Label1 ul li:first-child + li + li + li + li + li +li {
background: #f6993d;
width: 72%;
}
#Label1 ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
#Label1 ul li:first-child + li + li + li + li + li + li +li {
background: #f59095;
width: 69%;
}
#Label1 ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li {
background: #c7f25f;
width: 66%;
}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
]]></b:skin>
-------------------------------------------------------------------------------------------------
LABEL HTML CODE AND LABEL ID:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
</b:widget>
--------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------
OR USE THIS CSS CODE FOR DIFFERENT STYLE:
- FIRST ADD LABEL WIDGET AND SET LIST OPTION
- REPLACE YOUR B SKIN TAG WITH BELOW CODE
- ITS HTML CODE WORKS LABEL ID
- SO USE SMILER LABEL CSS/HTML ID IN CODE
#Label1 ul li a:hover{color:#fff;text-decoration:none}
#Label1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#Label1 ul li:first-child:after,
#Label1 ul li:first-child + li:after,
#Label1 ul li:first-child + li + li:after,
#Label1 ul li:first-child + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#Label1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#Label1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#Label1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#Label1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#Label1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#Label1 ul li:first-child + li + li + li + li:after{content:"5"}
#Label1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#Label1 ul li:first-child + li + li + li:after{content:"4"}
#Label1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#Label1 ul li:first-child + li + li:after{content:"3"}
#Label1 ul li:first-child + li{background:#ff764c; width:90%}
#Label1 ul li:first-child + li:after{content:"2"}
#Label1 ul li:first-child{background:#ff4c54 ;width:90%}
#Label1 ul li:first-child:after{content:"1"}
#Label1 ul{margin:0;padding:0px 0;list-style-type:none}
#Label1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
]]></b:skin>
--------------------------------------------------------------------------------------
RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE:
ADD HTML/JAVA WIDGET AND PASTE BELOW CODE
COPY AND PASTE BELOW CODE
CHANGE BLOG URL
--------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
------------------------------------------------------------------------------------------------------------
<style type="text/css">
.FBGaddgets-random-posts ul li {
list-style-image:none;
}
.FBGaddgets-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.FBGaddgets-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.FBGaddgets-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.FBGaddgets-random-posts ul li:first-child:after {
content: "1";
}
.FBGaddgets-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.FBGaddgets-random-posts ul li:first-child + li:after {
content: "2";
}
.FBGaddgets-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.FBGaddgets-random-posts ul li:first-child + li + li:after {
content: "3";
}
.FBGaddgets-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.FBGaddgets-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.FBGaddgets-random-posts ul li:first-child:after, .FBGaddgets-random-posts ul li:first-child + li:after, .FBGaddgets-random-posts ul li:first-child + li + li:after, .FBGaddgets-random-posts ul li:first-child + li + li + li:after, .FBGaddgets-random-posts ul li:first-child + li + li + li + li:after, .FBGaddgets-random-posts ul li:first-child + li + li + li + li + li:after, .FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li:after, .FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .FBGaddgets-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.FBGaddgets-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class="FBGaddgets-random-posts">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=9;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://fbgadgets.blogspot.co.uk/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</div>
----------------------------------------------------------------------------------------------------
FIND B SKIN TAG AND REPLACE :
]]></b:skin>
-----------------------------------------------------------------------------------------------------
.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 3px 3px 0 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:last-child {
margin-bottom: 3px;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
]]></b:skin>
Related movie you might like to see :

WHACK A RAT CSS GAME

POST DATE THUMBNAIL IN BLOG

POST DATE HEADER IN BLOG

HTML SYNTAX HIGHLIGHTER

HTML CSS GREEN COMMENTS NOTEPAD++

EDIT IMAGE IN NOTEPAD++

NOTEPAD++ REMOVE UNWANTED LINES

GOOGLE FILTER BUTTON IN IMAGE SEARC...

Direct Link Generator CODE

Direct Links to your Files on Googl...

ON LINE JAVA LIBRARY

GOOGLE CUSTOM SEARCH BOX

CSS SLIDER WITHOUT JS

FLICKITY SLIDER SCROLL WITH RADIO N...

FLICKITY JS CSS SLIDER

RADIO BUTTON SLIDER TO KEY FRAME SL...

BODY JS FILE LINK IN MAGENTO

INTENSO MAGENTO QUICK VIEW BUTTON

Magento Hello World Module (Extensi...

NOTE PAD ++ SYNTAX HIGHLIGHTER FOR ...
?
+
X
Recommended for you
Loading..
Related Post for LABEL WIDGET RAINBOW/MULTI COLOUR STYLE
White Space Remover /************************************BODY************************************/ body { background-color: #eee; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; fo…
SEARCH BOX WITHOUT JAVA CODE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE <input id='input' name='q' placeholde…
SEARCH BOX EXCELENCIA ----------------------------------------------------------------------------------------------------- FIND B SKIN TAG AND REPLACE WITH BELOW CODE ]]></b:skin> --…
INTENSO MAGENTO QUICK VIEW BUTTON ---------------------------------------------------------------------------------------------------------------- 6:01 REMOVE QUICK VIEW BUTTON IN MAGE…
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------…
SEARCH YOUR VIDEO IN GOOGLE ----------------------------------------------------------------------------------------------- 1) CLICK SEAACH TOOLS TAB 2) CLICK 24 HOUR PAST OPTION ------------------------…
WHITE SPACE REMOVER CODE --------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION COPY CODE …
INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' di…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-h…
RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepe…
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ▶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/…
FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FIL…
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://s…
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/s…
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+no…
LABEL WIDGET RAINBOW/MULTI COLOUR STYLE ------------------------------------------------------------------------------------------------- FIRST ADD LABEL WIDGET AND SET LIST OPTION REPLACE YOUR B SKIN TAG WITH BELO…
CONVERT FILE PATH TO A URL LINK -------------------------------------------------------------------------------------------------------- ANY LIST TO SCROLLER CODE: http://accordionslider.com/ http://anroots.…
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.