Header Ads

Kommentera i din kodmall för minnets skull



Ibland när man lägger till kod i kodmallen kan det vara bra att kommentera det man lägger till så att man senare minns vad varje stycke är till för. Just när du lägger in något känns det självklart, men hur mycket minns vi fyra månader och fem andra koder senare?

Då är det praktiskt att skriva in några ord som stöd för minnet.

Säg att jag lagt in en kod för en speciell gadget jag har i min sidebar, en html-gadget som har id "html3". Just när jag gör det här känns det väldig enkelt att minnas, men om jag sen gör samma sak för "html5" och "html9", då kan det bli lite svårare att reda ut ett halvår senare.

Du kan inte bara skriva in vanlig text ovanför din kod, då syns den ute i bloggen och det är ju inte så roligt. Du behöver använda så kallade css-kommentarer eller html-kommentarer, en slags paranteser för kod.

En kommentar kan se ut så här:

/* ---  Min etikettsgadget som ska ha blå text  --- */
#html3 {
font-family: Verdana;
color: blue;
}

Det som kan vara svårt med att kommentera i koden är att en parantes (som gör din kommentar osynlig i bloggen) ser olika ut i css och html, men det ska vi reda upp här.




CSS-KOMMENTARER


CSS är stilmallsdelen av koden. Den del som talar om hur bloggens innehåll ska se ut.
Det är också den del som kommer först i en Blogspot-mall.
Du känner igen css-en på att det är små stycken som ligger inom klamrar, alltså såna här: { }

Css-delen ligger före ]]</b:skin> taggen. Det är viktigt, det är därför jag ofta skriver att du ska lägga in något före den här taggen.

När du kommenterar i CSS-delen ska du använda /* före det du vill skriva och avsluta med */ (alltså i omvänd ordning, stjärnorna ska vara innerst)

/*  min kommentar  */

Många med mig föredrar att göra några bindestreck på varje sida om kommentaren också eftersom en streckad linje är lätt att se.

/*    --- min kommentar ---    */



En kort gif-video för att visa hur det kan se ut i css-delen.
För att få fram sökrutan, klicka på Ctrl och F på tangentbordet. (Cmd och F på Mac)






HTML-KOMMENTARER


När det kommer till html-delen i koden ser du så kallade taggar < innehåll > </innehåll>
Det du egentligen behöver veta just nu är att här hittar du bloggens uppbyggnad, dess skelett. Allt "material" din blogg innehåller ligger i html-delen. En websida går att bygga upp med enbart html, då får man med text, bilder och länkar, men inget egentligt utseende, bara svart text, blå länkar och inga kolumner etc. (Förr stylade man varje liten tagg för sig, nu använder vi css istället.)

I html-delen hittar du bland annat dina gadgets, dina kolumner, header etc. Du kan också lägga in kod i en html-gadget via bloggens Layout-läge i adminpanelen. Samma slags tagg-parentes gäller där.

Om du vill kommentera i html-delen ska du använda en parentes som ser ut så här:

<!--   min kommentar   -->

Ett exempel kan vara om du skapar en html-gadget där du lägger upp ett antal bilder som du länkar till andra websidor. Med många bilder i samma gadget kan det bli rörigt och då kan det vara bra att separera dem med kommentarer som sen inte syns på bloggen, bara för dig när du öppnar gadgeten.


<!-- Annas blogg -->
<a href="http://bloggadress.se"><img src="http://bildadress.se" /></a>

<!-- Bedas blogg -->
<a href="http://bloggadress.se"><img src="http://bildadress.se" /></a>

<!-- Cecilias blogg -->
<a href="http://bloggadress.se"><img src="http://bildadress.se" /></a>


När du sen ska rensa i gadgeten, kanske någon bytt bannerbild till sin blogg till exempel, hittar du lätt till rätt kodstycke.
Dela gärna upp kod med radbrytningar (din entertangent). Det syns inte ute i bloggen men gör det lättare att hitta när du ändrat i koden. Du ska självklart inte sitta och göra radbrytningar i en hel kodmall, men lägger du in kod i en html-gadget kan det vara bra att ha den lite uppdelad så att du ser vad som är vad bättre.


En kort gif-video hur det kan se ut i en html-gadget.






DÖLJ EN GADGET


Ett litet extra tips är att du kan dölja en gadget temporärt om du har det behovet.
Kanske har du återkommande tävlingar i din blogg och lägger då upp en speciell banner som talar om att "Nu är något på gång" Att lägga till och ta bort samma gadget varje gång kan kännas lite jobbigt, speciellt om du måste ladda upp en bild eller hämta en kod någonstans ifrån.

Då kan du enkelt lägga in gadgeten i en html-parentes inne i kodmallen, så här:

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

<!--  <b:widget id='HTML1' locked='false' title='' type='HTML'/>  -->

       <b:widget id=''HTML2' locked='false' title='' type='HTML'/>
</div>

Här har vi dolt gadgeten HTML1. När vi raderar parantesen ( De här tecknen:  <!--   --> ) syns gadgeten igen.


Verkar allt det här krångligt?
Om du har frågor om hur det fungerar i just din fall är du välkommen att ställa dem på vårt forum


1 comment:

  1. Smart,mycket smart för ....
    Det där med minnet hihi

    Tack för bra tips!
    /Kram

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------