laupäev, 18. oktoober 2008

DIY: Bloggeri sildipilv

… ehk lugu sellest kuidas lisada oma Bloggeri blogi enimkajastatud teemade sildipilv. Pidin natukene Googledama, et saada omale sellist lahedat sildipilve, mis postituste teemade kaupa tooks esile teemad mida ma siin blogis olen läbi aegade enim kajastanud.
image

Seda teemade/kategooriate/siltide lisamist postitustele olen alles viimasel ajal harrastama hakanud, kuid tore ikka kui saab näha milline temaatika on domineerivaim. Vastavalt sellele on sildipilves enimkajastatud temaatika suurema tähesuurusega esile toodud.

A kuidas sellist vahvat vigurit oma blogi lisada?

Panen siia lihtsa õpetuse kuidas mina seda tegin.

Võta bloggeri esilehelt (Dashboardilt) blogi seaded (Settings)
image

Vali ülevalt sakkidest/tabidest Layout ehk see koht kust saab muuta seda kuidas su blogikujundus välja näeb.
image

Lisa oma blogi uus Gadget. Add a Gadget
image

Vali Gagdeti tüübiks Labels, ning vajuta sinisele + ikoonile, et see Gadget oma blogi lisada.
image

Salvesta Gadget, vajutades Save.

Võta lehe ülevalt vasakust äärest Edit HTML
image

Nüüd tuleb STOP teha! Paras aeg oma olemasolev blogikujundus igaks juhuks salvestada, et vältida olukorda kus õnnestub kogu olemasolev kood vussi keerata. Blogi kujunduse salvestamiseks kasuta võimalust “Download Full Temaplate
image

… ning salvesta olemasolev blogikujunduse kood oma arvuti kõvakettale.
image 

Enne kui sa koodi muutma hakkad, siis pane linnuke “Expand Widget Temaplates” kasti
 image

Vajuta klaviatuuril Ctrl+F ning otsi koodist üles selline koht nagu type='Label'
image

Nüüd kui sa leidsid üles selle rea kuhu oli kirjutatud eelnev otsingusõna, siis tuleks ära kustutada lõik koodi selle sama rea alt. Sul võib selle esimese rea alguses id=’ ‘ väärtus olla midagi muud. Tõenäoliselt Label1, kui sa varem pole ühtegi Labeli widgetit oma blogi paigaldanud.  
image

ning kustutada ära see osa kuni tuleb allpool esimest korda rida kuhu on kirjutatud

</b:widget>

image

Kui tekst on ära kustutatud, siis jäta kursor vilkuma sinna kus ta parasjagu asub, ning kopeeri sinna alljärgnev koodiosa.

<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/
//Variables:
var max = 150; //max css size (in percent)
var min = 75; //min css size (...)
var showCount = 0;  // show counts? 1 for yes
var minCount = 5;  // what is the minimum count for a Tag to be shown? 1 for all.

//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
   labels.push(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
   urls.push(&quot;<data:label.url/>&quot;);
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
   counts.push(&quot;<data:label.count/>&quot;);
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] &gt;= minCount)
{
  //Calculate textSize
  var textSize = min + (counts[x]) * 8;
  //Show counts?
  if(showCount == 1)
  {
   var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
  }else{
   var count = &quot;&quot;;
  }
  //Output
  document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}
</script>
</div>
</b:includable>
</b:widget>

Nüüd vaata järgi kas tore sildipilv tekkis su blogi või mitte.
image

Kui sildipilv tekkis, siis on hästi, sest minu blogis on ta tekitatud just sellise koodi põhjal. Kui eelvaate põhjal (Preview) oli kõik hästi, siis võid oma uue blogikujunduse salvestada (Save template). Kui mingid jamad tekkisid, siis tuleb kahjuks Google poole pöörduda. Alati saad selle sama koodijupi mille sa just lisasid, uuesti koodist välja lõigata ja midagi halva pole juhtunud. Kui aga ikkagi midagi läks lõplikult sassi, siis alati saab blogi viimati kasutatud kujunduse taastada kõvakettale salvestatud failist.

Viide: A Simple Blogger Tag Cloud Widget

Kommentaare ei ole: