Mar 19, 2009

How to create Label Cloud for Blogspot Blogger | Label cloud for blogger

.
Mar 19, 2009

Blogspot bloger களுக்கான Label Cloud (or) Tag Cloud பெறுவது எப்படி என்ற ஒரு செயல்முறை

Label Cloudநாம் பல இணையதளங்களில் label cloud னை கண்டிருப்போம், இது நமது blog கலீல் அல்லது நமது இனைய தொகுப்புகளில் எத்தனை பிரிவு (Category) உள்ளது என்பதனை மிகவும அழகாக காட்டும் . இதை Wordpress blog இல் default அக அவர்கள் தந்துள்ளனர், Blogspot blogger களுக்கு இத்தகைய ஒரு வசதி Google நிறுவனம் தரவில்லை, இதற்கு மாறாக Label அல்லது Tag னை வரிசையாக பக்கவாட்டில் widget அக கொடுக்கின்றன. நமது blog களில் மிக அதிக எண்ணிக்கையில் tag கள் இருந்தால் நமது வலை பக்கங்கள் மிகவும் நீளமாக கீழே நீண்டு கொண்டே செல்லும்.
Blogspot blogger ன் இத்தகைய  ஒரு நிலைக்கு இதோ இங்கு தீர்வு உள்ளது.


கிழே குறிபிட்டுள்ள செய்முறைகளை மிகவும் கவனமாக கையாளவும்.

1. முதலில் உங்கள் blog னை பதிவு எடுத்து வைத்து கொள்ளுங்கள் (back up your template)
backingup your template

2. அடுத்து, label widget னை Page element ல் சேர்க்க வேண்டும்

Adding Page element Label cloud

3. Edit HTMl கு செல்லவும், பின்பு அங்குள்ள " Expand widget Template" என்ற check box னை தேர்வு செய்யவும்.
Expand widget template - blogger

4. பின்னர் உங்கள் template ல் ]]></b:skin> என்பதனை தேடி இங்கு கொடுக்கப்பட்டுள்ள code னை ]]></b:skin> இற்கு மேலே copy செய்யவும்.



/* 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}
Search the template

5. கீழை கொடுக்கப்பட்டுள்ள code னை ]]></b:skin> என்ற வார்த்தைக்கு கீழே copy செய்யவும்.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
copy the code here
6. மேலே கொடுக்கப்பட்டுள்ள code னை </head>tag இன் இடையே எந்த ஒரு இடத்திலும் copy செயலாம்,ஆனால் உங்களுக்கு எளிதாக புரியும் வண்ணம் இங்கு ]]></b:skin இற்கு கீழேயே copy செய்கிறேன். நீங்களும் அவ்வாறே செய்யுங்கள்.

7. save செய்யவும்.

8. இதுதான் மிகவும் முக்கியமான பகுதி, உங்கள் template HTML code ல் < label> என்று தேடவும். இது என்ன என்று தெரியுமா ??? நீங்கள் label விட்ஜெட் னை முன்பு சேர்த்தீர்களே அதன் code தான் இது, ஆகா இந்த code னால் label cloud னை உண்டாக முடியாது .. எனவே கீழ் கண்ட code னை இதற்கு பதிலாக copy செய்யவும்

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Code starts from this..
replace this label widget code
Just replace the code by this.

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

9. Save செய்யவும்

10. அவ்வளவு தான் உங்கள் label cloud தயார் .. உங்கள் blog னை போய் பாருங்கள் அங்கு label cloud அழகாக இருக்கும்.
Label cloud displayed in your blog look like this.

11. மேலும் இதனால் நீங்கள் அழகு படுத்த விரும்பினால் இங்கு கீழே குறிபிடுவது போல் செய்தல் உங்கள் label cloud மேலும் அழகாக தெரியும்.

நீங்கள் அதிகமாக பயன் படுத்திய label அல்லது tag கள் பெரியதாக தெரியும், இதனின் வண்ணத்தை மாற்ற உங்கள் கொடினில் குர்ரிபிடிருகும் போய் code னை edit செய்தால் அல்லகாக இருக்கும்.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;


உங்கள் label எண்ணிக்கை எத்தனைக்கு மேல் இருந்தால் label cloud ல் காட்ட வேண்டும் என்பதனை போய் code nil  மாற்றம் செய்தல் மாறும் 
var cloudMin= 1;

இதை போன்று உங்கள் blog களில் நீங்களும் காணலாம்



அப்படி உங்களால் முடியவில்லை என்றல் கிழ்கண்ட e-mail முகவரிக்கு உங்கள் blog கலை back up செய்த xml ஐ அனுப்புங்கள் உங்களுக்கு நான் "Label cloud" ஐ சேர்த்து அனுப்புகிறேன்.


இந்த செய்முறை உங்களக்கு உபயோகமாக இருப்பின் உங்கள் கருத்துகளை கூறவும்.
Vote போடா மரகதீர்கள்

Source: My friend

 

Blog Archive

Views

Contact me

Name

Email *

Message *

Hot Discussion is proudly powered by Blogger.com | Template by Hot Discussion