Sunday, 15 June 2014

LABEL WIDGET RAINBOW/MULTI COLOUR STYLE

LABEL WIDGET RAINBOW/MULTI COLOUR STYLE


-------------------------------------------------------------------------------------------------
  1. FIRST ADD LABEL WIDGET AND SET LIST OPTION
  2. REPLACE YOUR B SKIN TAG WITH BELOW CODE
  3. ITS HTML CODE WORKS LABEL ID 
  4. SO USE SMILER  LABEL CSS/HTML ID IN CODE
  5. 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:
  1. FIRST ADD LABEL WIDGET AND SET LIST OPTION
  2. REPLACE YOUR B SKIN TAG WITH BELOW CODE
  3. ITS HTML CODE WORKS LABEL ID 
  4. 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 Post for LABEL WIDGET RAINBOW/MULTI COLOUR STYLE

  • RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD  </head> TAG AND PASTE BELOW CODE WHEN W…
  • FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FIL…
  • Search Engine Optimization Toolkit UN USED CSS IN GOOGLE   Free SEO Toolkit Start with the free download, review your website, and make changes fast. The SEO Toolkit with its detailed analysis and search engine friendly suggestion…
  • FIREBUG LITE USE OFFLINE ------------------------------------------------------------------------------------------------------------- 1)GET CSS CODE BY COPY CSS SELECTOR OR GOOGLE INSPECT 2) OR GET CSS…
  • FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://s…
  • ARROW BUTTON ------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ---------------------------------------------…
  • BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
  • 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…
  • HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
  • Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
  • FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
  • RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepe…
  • GOOGLE CUSTOM SEARCH BOX ------------------------------------------------------------------------------------------------------------------ GOOGLE CUSTOM SEARCH BOX -----------------------------------…
  • WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
Posted by on Sunday, 15 June 2014 at 11:19
Labels: , , , ,

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets