Blogger has finally added a Cloud option in their Labels gadget. To add a Label cloud, just select Cloud option (instead of List) in Configure Labels window. With this new Labels widget you can also choose to show all or only selected labels.
-------------------------------------------------------------
I just finished installing tag / label cloud on the right sidebar. Spent some time searching for codes, and finally found what I consider as the simplest one. Made some minor alteration to it, and I thought I share it with you.
Just follow the steps below:
- Login to your to your Blogger account.
- Back up your template.
- At Dashboard go to Layout>Edit HTML.
- Make sure the Expand Widget Templates check box on top right of the HTML window is unticked/unchecked.
- Find the following lines in your HTML codes:
<b:section class='sidebar' id='sidebar1' preferred='yes'> <b:widget id='HTML3' locked='false' title='' type='HTML'/>
- This is your sidebar section, where widgets are located. The ids and other properties may not necessarily similar to the above. What’s important is the “<b:section class=’sidebar’…” tags must be there.
- Now copy the codes below (all of them):
<b:widget id='Label88' locked='false' title='Labels' type='Label'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <div id='Labelcloud'> </div> </div> <script language='javascript' type='text/javascript'> function Magnifytxt() { var max = 0; var min = 10000; <b:loop values='data:labels' var='label'> if (<data:label.count/> > max) max = <data:label.count/>; if (<data:label.count/> < min) min = <data:label.count/>; </b:loop> var display = ""; <b:loop values='data:labels' var='label'> var delta = <data:label.count/> - min; var size = 80 + (delta * 100) / (max - min); display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span> "; </b:loop> obj = document.getElementById('Labelcloud'); obj.innerHTML = display; } Magnifytxt(); </script> <b:include name='quickedit'/> </b:includable> </b:widget>Insert (paste) the codes immediately below the line in step 5.
<b:section class='sidebar' id='sidebar1' preferred='yes'> Insert the code here <b:widget id='HTML3' locked='false' title='' type='HTML'/>
- Click PREVIEW and look for your label cloud! If it’s there, then click SAVE TEMPLATE.
- If you want to reposition or change the name of the label cloud go to Layout>Page Elements. Just drag it to reposition or type in the new name.
- Done.
No comments:
Post a Comment