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 :

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

GOOGLE CONSOLE

GOOGLE CHROME EXTENSION FILE SAVE O...
?
+
X
Recommended for you
Loading..
Related Post for LABEL WIDGET RAINBOW/MULTI COLOUR STYLE
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
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…
Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
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/…
LABEL WIDGET RAINBOW/MULTI COLOUR STYLE ------------------------------------------------------------------------------------------------- FIRST ADD LABEL WIDGET AND SET LIST OPTION REPLACE YOUR B SKIN TAG WITH BELO…
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+no…
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
BLOGGER INCLUDABLE SECTION ------------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------…
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------…
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN W…
INTENSO MAGENTO QUICK VIEW BUTTON ---------------------------------------------------------------------------------------------------------------- 6:01 REMOVE QUICK VIEW BUTTON IN MAGE…
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/s…
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
CODE OR TEXT WRITING BOX -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN HTML --------------------------------…
MULTI COLOR -------------------------------------------------------------------------------------------------------------- Colors in alphabetical order A-F https://en.wikipedia.org/wiki/Li…
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
BLOGGER MEGA GRID AND LIST TEMPLATE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE: BLUE GRID AND LIST CODE WHICH SHOW YOUR PO…
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN THIS CODE U NEED SAME POST HTML CODE,P…
RECOMMENDED POST SLIDE OUT FOR BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ------------------------------------------…
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.