How To Make Flour Baby

Link Tag Cloud for blogger beta

The tag, tag or label cloud cloud - whatever you call it, serves to keep a list of categories or labels more colorful in your blog. The groups and dimensions, depending on the number of posts that each contains.


started!

Enter your blogger account as usual and go to the part of "Page Elements" section of the template. Add a new item and choose "labels."

Then go to "Edit HTML" and without expanding the widgets template, find the following:

]]> </b:skin>

BEFORE it hits the SIGTE. code:

/ * Label Cloud Styles
------------------------------------- ---------- * /
labelCloud # {text-align: center; font-family: arial, sans-serif;}
# labelCloud. label-cloud li {display: inline; background-image: none! important; padding: 0 5px; margin: 0; vertical-align: baseline! important; border: 0! important;}
# LabelCloud ul {list-style-type: none; margin: 0 auto; padding: 0;}
# labelCloud a img {border: 0; display: inline; margin: 0 0 0 3px; padding: 0}
# labelCloud a {text-decoration: none} # labelCloud
a: hover {text-decoration: underline} # labelCloud
li a {} # labelCloud
. label-cloud {}
# labelCloud. label-count {padding-left: 0.2em; font-size: 9px; color: # 000} # labelCloud
. label-cloud li: before {content: ""! important}

Then, between "b: skin" and the end of "HEAD" ]]> </b:skin> ---> HERE <--- </head> you paste the following:

<script type="'text/javascript'"> <br /> / / Label Cloud User Variables var <br /> cloudMin = 1; <br /> maxFontSize var = 20; <br /> maxColor var = [0,0,255]; <br /> minFontSize var = 10; <br /> minColor var = [0,0,0]; <br /> lcShowCount var = false; <br /> </script>



Finally, you go down to the part of the sidebar (near the end of the template) and Search:

<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'/">

and replace by:

<b:widget id="'Label1'" locked="'false'" title="'Label" type="'Label'"> <br /> <b:includable id="'main'"> <br /> <b:if cond="'data:title'"> <br /> <h2> <data:title/> </h2> <br /> </b:if> <br /> <br /> <div class="'widget-content'"> <br /> <div id="'labelCloud'/"> <br /> <script type="'text/javascript'"> <br /> <br /> / / Do not change anything past this point ----------------- <br /> / / Cloud function s () ripped from del.icio. na <br /> function s (a, b, i, x) {<br /> if (a> b) {<br /> where m = (ab) / Math.log (x), v = a-Math.floor (Math.log (in ) * m) <br /> <br />} else {<br /> where m = (ba) / Math.log (x), v = Math.floor (Math.log (i) * m + a) <br /> <br />} return v} <br /> <br /> <br /> <br /> var c = []; <br /> was Label count = new Array (); <br /> was ts = new Object; <br /> <b:loop values="'data:labels'" var="'label'"> <br /> was theName = "<data:label.name/>"; <br /> ts [theName] = <data:label.count/>; <br /> </b:loop> <br /> <br /> for (t in ts) {<br /> if (! Label count [ts [t]]) {<br /> label count [ts [t]] = new Array (ts [t]) <br />} <br />} <br /> was ta = cloudMin-1; <br /> tz = labelCount.length - cloudMin; <br /> LC2 = document.getElementById ('label cloud'); <br /> ul = document.createElement ('ul'); <br /> ul.className = 'label-cloud'; <br /> for (var t in ts) {<br /> if (ts [t] \u0026lt;cloudMin) {<br /> continue;} <br /> <br /> for (var i = 0; 3> i, i + +) {<br /> c [i] = s ( minColor [i], maxColor [i], ts [t]-ta, tz) <br /> } <br /> var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); <br /> li = document.createElement('li'); <br /> li.style.fontSize = fs+'px'; <br /> li.style.lineHeight = '1'; <br /> a = document.createElement('a'); <br /> a.title = ts[t]+' Posts in '+t; <br /> a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; <br /> a.href = '/search/label/'+encodeURIComponent(t); <br /> if (lcShowCount){ <br /> span = document.createElement('span'); <br /> span.innerHTML = '('+ts[t]+') '; <br /> span.className = 'label-count'; <br /> a.appendChild(document.createTextNode(t)); <br /> li.appendChild(a); <br /> li.appendChild(span); <br /> } <br /> else { <br /> a.appendChild(document.createTextNode(t)); <br /> li.appendChild(a); <br /> } <br /> ul.appendChild(li); <br /> abnk = document.createTextNode(' '); <br /> ul.appendChild(abnk); <br /> } <br /> lc2.appendChild(ul); <br /> </script> <br /> <br /> <noscript> <br /> <ul> <br /> <b:loop values="'data:labels'" var="'label'"> <br /> <li> <br /> <b:if cond="'data:blog.url"> <br /> <data:label.name/> <br /> <b:else/> <br /> <a href="'data:label.url'"> <data:label.name/> </a> <br /> </b:if> <br /> (<data:label.count/>) <br /> </li> <br /> </b:loop> <br /> </ul> <br /> </noscript> <br /> <b:include name="'quickedit'/"> <br /> </div> <br /> <br /> </b:includable> <br /> </b:widget>

This list will already have your tag and you'll be very happy.

If you go to set some variables:

maxFontSize var = 20; --- maximum font size
maxColor var = [0,0,255]; --- Color ultimate source
minFontSize var = 10; --- minimum font size
minColor var = [0,0,0]; --- Font color
minimum font size can change as in any text. The font color is based on the RGB system, if you want to see change -> HERE <-- and choose your favorite color.

lcShowCount var = false;
If you want to see the number of posts in each cloud changes the value "false" to "true."
Via: phydeaux3