FixaDinBlogg: 3D-sökmoln

Edit 28/4 - 2010

Det här sökmolnets kod fungerar inte längre pga filer som saknas. När jag får lite bättre tid ska jag uppdatera med en fungerande kod!

---------------------------------------------------------------------------

Vill du göra ett eget tre-dimensionellt sökmoln (tagcloud) som det jag har i min sidebar?

Det är en flash-animation som på ett riktigt häftigt sätt visar fram dina etiketter.

För att du ska kunna se molnet behöver du ha javascript och flash player installerat i din webläsare, detsamma gäller för dina besökare. Om du/de inte har det kommer sökmolnet istället att visas som ett vanligt, stillastående moln. Klicka på ovanstående länkar om du saknar något av det, båda programmen är gratis och kommer att göra mycket av din surfning på internet både roligare och lättare.

Från början skapades 3D-molnet av Roy Tanck som ett plugin för wordpress men Amanda från Blogger Buster konverterade det så att det funkar för Blogspot. Hon är en av mina absoluta favoriter när det kommer till blogghjälp, hon är jätteduktig! Om du uppskattar den här gadgeten skulle jag bli glad om du tackade henne på hennes websida, hon har lagt mycket tid på att låta oss få ta del av det här!

Så här gör du:

För att få 3D molnet i din blogg behöver du lägga in en kod i kodmallen. Den ska ligga precis efter <b:section class='sidebar'

För att du ska hitta rätt plats i din kodmall ska du klicka på Ctrl och f på ditt tangentbord. Då får du fram en sökruta och i den klistrar du in ovanstående röda text. Klicka på enter och du kommer direkt till rätt plats.

Den här raden är lite längre, men eftersom koden skiljer lite mellan mallarna väljer jag att bara visa den här biten. På så sätt kan fler hitta rätt plats lättare

Om du har minimas bloggmall heter hela raden:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Nu ska du klistra in följande kod under hela den raden, så här:

Koden:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Som du ser heter din nya gadget Label99.
Du kan byta färger på text och bakgrund i koden samt bestämma textstorlek.
Du kan också ändra storlek på gadgeten och öka/minska farten den för sig med.

Höjd och bredd är markerat i blått
Bakgrunden är markerad i turkost
Textfärgen är markerad i rött

Hastigheten är markerad i rosa

Textstorleken är markerad i grönt

Om du vill ändra något i koden efter att du har sparat mallen behöver du kryssa i Utökade Gränssnittskomponentmallar, den rutan finns ovanför din bloggmall. Då visas hela din kod. Sedan använder du åter Ctrl och f för att hitta label99

Färgkoder kan du hitta här: Web color picker

Du kan också göra bakgrunden transparant genom att lägga till lite i koden. Det gör du så här.

Leta upp de här två raderna.

// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");

Den undre raden ändrar du till den här:

De här tecknen i början och slutet på koden gör att din blogg inte läser koden utan bara hoppar över den. Om du ångrar dig kan du enkelt radera tecknen igen.

När du är nöjd bör du förhandsgranska - sedan spara din bloggmall.

Nu kommer du att se att du har en ny gadget i bloggens layoutläge och du kan placera den vart du vill. Njut!

Om du redan har många flash-animationer på din sida eller om du har långa etiketter kan du uppleva att din gadget blir tom, blank. Det här har Amanda hittat en lösning på och du kan läsa om den här: Alternativ installation

fredag 25 september 2009

3D-sökmoln