Skapa din egen bloggdesign med Artisteer

I dag tänkte jag göra lite reklam för ett riktigt smart webdesignprogram som heter Artisteer.

Med det här programmet kan du på enklast möjliga sätt göra din egen bloggmall, välja bakgrund, header, ikoner i rubriker, fonter, färger, byta rubrikbakgrunder och dessutom välja din egen layout  med antal sidebarer, var de ska ligga och hur breda de ska vara. Allt med enkla knapptryckningar och inte minsta kodning.

Och bäst av allt - du laddar upp din mall direkt till din blogg via programmet - det tar till och med en backup på din gamla mall! Alla bilder som bloggen byggs upp av hamnar i ditt Picasaalbum, på samma plats där alla andra dina bilder finns som du laddat upp i dina blogginlägg.

Artisteer använder en så kallad WYSIWYG-redigerare, det betyder What You See Is What You Get och innebär att du direkt ser varje liten förändring du gör i mallen direkt i programmet. Så fort du håller musen över en knapp testas det alternativet och du ser hur det ser ut. Flytta musen till en annan bild och du ser den istället - praktiskt, eller hur!

Så, kanske är du nyfiken på hur det kan se ut när man använder Artisteer?
Kika här, jag har tagit lite skärmklipp för att visa dig lite vad som finns, men det finns en otrolig mängd alternativ jag helt enkelt inte har plats att visa upp, du får prova själv!

En gratis demo finns att ladda ner på Artisteers hemsida, se länk i sidebaren.

 

Här finns en mängd alternativ till bakgrunder, men du kan alltid ladda upp egna bilder/filer.
Det gäller i princip överallt där Artisteer använder bilder, du kan alltid välja egna.

Välj vilken layout du vill ha och bredd på de olika kolumnerna

 

Du kan skugga din sida (outer wrappern) eller välja rundade hörn högst upp.

 

Välj mellan en rad olika alternativ för dina blogginlägg och deras rubriker

Varför inte välja en snygg ikon brevid rubriken?

Samma val finns för blocken, alltså dina gadgetar

Välj hur dina inlägg och block ska se ut, med eller utan bakgrund,

inringad rubrik eller kanske helt utan?

Om du vill ha en länkmeny väljer du hur den ska se ut och vart den ska ligga-ovanför headern eller under. Bestäm hur knapparna ska se ut och om de ska ligga till vänster, höger eller i mitten.

Vill du ha läckra blanka knappar eller mer diskreta? Med kantlinje eller kanske mönstrade?

Designa klart hela din mall, glöm inte footern och vilken färg dina länkar ska ha ;-)

Det och allt annat du vill sätta din egen prägel på!

Du kan också skriva dit din egen copyright-text.

När du är färdig klickar du på publicera till blogger. Då får du fram en ruta

där du kan fylla i dina inloggningsuppgifter och får välja vilken blogg som

ska få äran av din nya, snygga mall.

Bilderna i mallen laddas upp på ditt Picasakonto.

Nu är din din nya mall på plats.

Glöm inte att spara arbetskopian också, kanske ser du saker du vill gå tillbaka

och ändra, då är det bra att bara kunna öppna din mall igen och fixa det du vill.

Publicera sedan din mall på nytt.

Tänk vad mycket smart de kommer på!

Om du skapar en bloggmall med Artisteer vore det jättekul om du länkar till din blogg här i inlägget så att vi får se vad du skapat! Jag är jättenyfiken!

Lägg in ett Label Cloud för dina etiketter

Har du sett att vissa bloggar har en ruta med ord - blogginläggens etiketter - samlade i en hög?
Ju fler inlägg det finns med en viss etikett, desto större ord.
Ett roligt sätt att visa upp vad man skrivit om och länka till inläggen, men hur gör man då?

Det första du börjar med är att lägga in ett sidelement med Etiketter/Labels. Det gör du från din bloggs Layoutläge. Om du redan har ett sånt här sidelement låter du det bara vara som det är.
Det spelar ingen roll vart det ligger, du kan byta placering efteråt om du vill.


Gå så till din bloggs Redigera HTML-läge.
Tryck på Ctrl+F för att få fram din webläsares sökruta och skriv in

</b:skin>

Tryck enter eller sök. Du kan också söka upp ordet i din kodmall utan hjälp förstås, men det här är lättare.

Klistra in följande kod precis ovanför den här skin-taggen, enligt bilden nedan.

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

Nu söker du efter ( skriver in i sökrutan eller manuellt)

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Det är det sidelement du lade in med rubriken Label. Du hittar det antagligen under sidebar-wrapper.

Markera den raden i din kodmall och klistra in koden jag skrivit under följande bild. Du ska alltså ersätta den enda raden med all kod i stycket här under!

<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'> <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></div>
<script type='text/javascript'>
// Label Cloud User Variables
var maxFontSize = 20;
var maxColor = [0,0,0];
var minFontSize = 8;
var minColor = [0,0,0];
var lcShowCount = false;
var minPostCount = 0; //integer

// Don't change anything past this point -----------------
function s(a,b,i,x){
if(a>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 ta=0;
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.count'>
if (<data:label.count/> > minPostCount) ts["<data:label.name/>"] = <data:label.count/>;</b:if></b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
lc2.innerHTML = '';
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > 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>

<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Förhandsgranska och se om du har fått ett Label Cloud istället för dina tidigare etiketter i en rad.
Spara!

Nu kan du börja fundera på om du vill redigera texten i ditt Label Cloud. Du kan själv bestämma om du vill ändra färg och storlek på etiketterna. Just nu är de största bokstäverna 20 pixlar höga och de minsta 8pixlar. Färgen på texten är svart. Du ändrar variablerna i den här delen av den andra koden du la in i din blogg:

// Label Cloud User Variables
var maxFontSize = 20;
var maxColor = [0,0,0];
var minFontSize = 8;
var minColor = [0,0,0];
var lcShowCount = false;
var minPostCount = 0; //integer

Vad max och min FontSize betyder är ju inte så svårt att förstå. Storleken räknas i antal pixlar.

Max och Min Color är de färgkoder som de större orden respektive mindre orden har. Du byter färg genom att ändra till en annan färgkod, en så kallad RGB-kod.

IcShowCount bestämmer om du ska visa antalet poster som har etiketten som en siffra efter ordet, exempelvis (2) och false betyder att det inte visas. Byt till true om du vill visa antalet.

MinPostCount avgör vilka etiketter som ska visas beroende på hur många poster som har just den etiketten. 0 betyder att alla etiketter visas, högre tal kan vara bra om man har många etiketter och bara vill visa de viktigaste.

Så ett sista ord, naturligtvis måste du ha satt etiketter på dina poster för att du ska kunna skapa ett Label Cloud. Utan dem - inget "moln". Inte heller blir det så fint om du bara har en eller ett par olika etiketter, det behövs lite fler för att skapa ett snyggt "moln" Lagom är bäst!

Padding och margin - vad är det?

Något man ofta stöter på i bloggmallen är orden padding och margin. Vad betyder de egentligen?

Enkelt förklarat är padding det utrymme som finns mellan ditt objekt (här en bild och en exempeltext) och kanten på wrappern som den ligger på. Paddingen talar alltså om hur mycket luft vi vill ha inne i vår wrapper.

Margin är det utrymme som finns mellan den här wrappern och nästa. Större margin ger kolumner som ligger längre isär, mindre margin för dem närmre varandra.

Så, hur gör vi då för att flytta på saker?
För att kunna ändra på rätt siffra behöver vi veta vilken siffra som är vilken. När man skriver ut margin eller padding börjar man alltid räkna uppifrån och går sedan medsols, som en klocka. Se exemplet nedan!


Genom att öka respektive minska padding och margin kan vi flytta objekt både upp och ner, åt höger och åt vänster.

Ett litet tips avslutningsvis.
Man kan faktiskt använda ett minustecken framför en siffra och det gör man när man vill flytta ett objekt utanför sin wrapper eller om man vill flytta något som har en placering som är benämnd auto eller center. Det är dock lite överkurs och kan kräva en del trixande innan det blir rätt, men om inget annat fungerar kan det vara värt att prova.

Att flytta sidelement

Visste du att du ofta kan flytta sidelementen i bloggen, även till till platser i kolumnerna där det inte finns en "lägg till sidelement-ruta"?
I Bloggers egen Minima mall här nedan har jag rödmarkerat de fält där du kan lägga till en gadget, men där ingen sådan ruta finns. Gå till Layoutläget och prova själv att dra runt dina sidelement, du kan få fram ett riktigt spännande nytt utseende på din blogg

Så, hur fungerar det här egentligen då?

I den nedre delen av din kodmall ligger koden för hur många kolumner din blogg ska ha och hur de ska fungera. Om man tar headern som första exempel, där ser koden ut så här:

maxwidgets='1' - betyder att det inte får ligga fler än ett sidelement/gadget/widget i den här kolumnen. I bloggsammanhang är gadget och widget ungefär samma sak, översatt till sidelement på svenska. Du kan själv öka siffran om du vill ha fler gadgets i kolumnen.

showaddelement='yes' - betyder att det finns en "lägg till sidelement-ruta" i din bloggs layoutläge. Om det däremot står 'no' finns ingen sådan ruta, men kolumnen finns där ändå. Det är det vi utnyttjar när vi flyttar runt våra gadgets som i texten ovan.

' locked='true' - betyder att du inte kan plocka bort sidelementet. Du behöver inte lägga in något i det om du inte vill att det ska synas, men du kan inte flytta runt det. Om du vill låsa upp ditt sidelement letar du reda på den här delen i koden och ändrar till "false" istället. Då blir sidelementet rörligt.

Jag ska senare ta upp hur du gör för att lägga till en extra kolumn i din blogg, och då är det här nyttig kunskap!