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

  • 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 ------------------------------------------…
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