יום שני, 3 בספטמבר 2007

מדריך: איך להתקין ולהגדיר ענן תגים לבלוג שלכם


cloud


חשוב לקרוא:

  • המדריך הבא מתאים למשתמשים ברמה מתקדמת שמרגישים בטוחים להתעסק עם קצת קוד. משתמשים שלא מוכנים להתעסק עם קוד יכולים להוריד את אחת התבניות שאני מתרגם שיכללו את הקוד.


  • המדריך מתייחס לבעלי בלוג בגרסה החדשה של בלוגר שמשתמשים בתבניות המתקדמות בלבד (לא מתאים למי שמשתמש בתבניות הישנות או מפרסם באמצעות FTP).


  • אם עדיין לא פרסמתם לפחות שני פוסטים שתוייגו באותו תג, יתכן ותקבלו הודעת שגיאה.


  • גבו את הבלוג לפני שתבצעו את השינויים.


התחברו למערכת בלוגר וגשו לאיזור התבניות (layouts). בעמוד Page Elements וודאו שכבר מותקן אצלכם ווידג'ט להצגת תגים (תגיות). בחרו בסרגל הניווט ב Edit HTML. אין לסמן וי בתיבה Expand Widget.

הקוד מחולק לשלושה חלקים: עיצוב, הגדרות, והווידג'ט עצמו. כעת נתעסק עם קוד העיצוב.


/* 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}


את הקוד יש להעתיק אל התבנית בחלק העיצוב. הדרך הקלה לעשות זאת היא למצוא את התגית הסוגרת של העיצוב ]]></b:skin> ולהכניס את הקוד לפניה.


עכשיו נעבור לחלק הקוד שמגדיר את הווידג'ט.



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


את הקוד יש להעתיק אל ה head אבל לא אל תוך איזור העיצוב. הכניסו את הקוד מיד אחרי התגית ]]></b:skin> ולפני התגית </head>.

את ההגדרות בקוד אפשר לשנות אבל לא נתעסק בהם כעת.

כעת נעבור לווידג'ט עצמו. חפשו בתבנית את הקוד של ווידג'ט התגים שלכם. הוא צריך להיראות דומה לזה:


<b:widget id='Label1' locked='false' title='תגים' type='Label'>


החליפו את שורת הקוד הנ"ל בקוד הבא:

<b:widget id='Label1' locked='false' title='תגים' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div align='center'>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don&#39;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(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
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(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
li.style.lineHeight = &#39;1&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; פוסטים ב &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
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(&#39; &#39;);
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>
</div>
</b:includable>
</b:widget>


עכשיו,
אם אתם עומדים בכללים שציינתי בהתחלה והעתקתם את הקוד כמו שצריך, תוכלו
לראות בתצוגה מקדימה את ענן התגים. אם הוא מוצג שמרו את התבנית. סיימתם.
אם הוא לא מוצג, כנראה שהיתה בעיה באחד השלבים. בידקו שוב את ההערות
שכתבתי בתחילת הפוסט ונסו שנית. אם לא הצלחתם פנו אלי או הגיבו כאן.

גרסה נוספת של המדריך אפשר לראות כאן.
ניתן למצוא הסברים נוספים ועדכונים במקור באנגלית
כאן.

בהצלחה.

תגובה 1: