KREATiV -- Text I Foto I Design

Helvetica och varför webbdesigners inte ska använda det

Av någon outgrundlig anledning har Helvetica, speciellt Helvetica Neue, blivit en ny standardfont för många webbdesigners. Det är ett väldigt känt typsnitt och 'älskat' av designers världen över. Jag skriver 'älskat' inom citationstecken för när alltför många människor 'älskar' samma sak börjar jag genast misstänka att det är flockbeteende på g.

Och visst är Helvetica snyggt, på planscher och t-shirts och allt vad det är. Det finns dock två problem med all denna kärlek när det gäller webbdesign:

Helvetica är en tryckfont, i praktiken om inte i teorin.
Helvetica är en Macfont.

Men vaddå, tänker du säkert nu - Helvetica är jättesnyggt ju, använder det till allt och det är super på alla webbsidor jag besöker.

Det tror jag säkert det är också om:

Du faktiskt inte har Helvetica installerat (default som serveras är då Arial, även i Word där du faktiskt kan välja Helvetica trots att du inte har det installerat).
Du använder en Mac.

Roten till problemet här ligger förstås i att många designers sitter på Mac-datorer. Därmed ser de i princip aldrig sina skapelser som merparten av deras publik (PC-användare) ser dem.

Den största boven i dramat är Helvetica Neue. Det råkar också vara den font som allra flest vill envisas med att använda. Det finns två anledningar till varför detta inte är någon höjdaridé:

Helvetica renderas olika i olika webbläsare/OS.
'Helvetica Neue' tolkas olika i olika webbläsare/Os.

PC-publik som överhuvudtaget inte har Helvetica installerat lider inte så mycket förutsatt att man i sin CSS har gett något lämpligt alternativ och inte svävat ut för mycket i modifikationerna. Förhoppningsvis ser man då Arial i lämplig storlek och på lämpligt vis.

De stackare som råkar ha Helvetica installerat får det däremot mindre roligt:

I många webbläsare renderas fonten under 16px mycket otydligt - vi snackar i princip oläsligt här; ett problem med cleartype. Dessutom är Internet Explorer, som vanligt, notoriskt dålig på att rendera tunnare fonter, även i större format. Därmed kan man kanske tycka att problemen ligger hos webbläsarna och inte hos fonten. Visst, men de flesta av dina besökare använder förmodligen ändå inte Safari hur mycket du än önskar att de gjorde det och deras problem är dina problem.

I olika webbläsare läses också stavningen av 'Helvetica Neue' olika. En del browsers, exemeplvis Firefox, kräver att du skriver ihop namnet till HelveticaNeue om du vill att användaren ska se det typsnittet och inte något lämpligt substitut (i många fall en kursiv bold/black version av fonten).

Slutligen och sammanfattningsvis alltså:

Förväxla inte en bra tryckfont med en bra webbfont.
Förväxla inte din skärm med dina besökares skärmar.

PS. Jag har medvetet varierat mig med termerna typsnitt och font, nuförtiden räknas dessa två ord som synonymer till varandra.

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2012-02-19 @ 18:45:05 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (3)

Tryck F5 eller tryck alt + klicka på reload

Jag var inte helt nöjd med förra designen på Kreativ. Den kändes lite framstressad. Här kommer därför en ny ny-design som känns lite renare och mer genomtänkt.

Nytt med designen är att jag äntligen har gett upp det där med bakåtkompatibilitet. Nu kör vi .png och CSS3 all the way. Har du en webbläsare som inte klarar det uppmanar jag dig starkt att uppgradera.

Jag har också bestämt mig för att inte använda filter för att pressa Internet Explorer till lite mer simulans av webbstandard. Den som envisas med att använda Explorer får helt enkelt leva utan gradients.

Jag har såklart också uppdaterat mobildesignen så om du surfar in med din mobil bör min bloggdesign se ut ungefär som bilden nedan. (I liggande läge alltså, annars blir allt förstås smalare och en del av headerbilden försvinner.) Dock kanske du måste rensa cache-minnet först.

Hoppas du gillar den nya bloggdesignen och som vanligt är jag tacksam om du hör av dig ifall något ser konstigt ut på just din skärm.

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2012-02-19 @ 12:57:03 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (1)

Illustration - Tooth

Vector-illustration av en tand och lite bubblor.

"Vilka vita, fina tänder, bleker du dem?" Sånt gillar man att höra från sin tandhygienist. Okej, sen var det ju allt detta med hotande hål, besvärliga områden och "tandtråd, fluorsköljning, upprepa". Men jag väljer att fokusera på det positiva. ;)

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2012-02-09 @ 17:38:24 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (5)

Uppdatering av gratisdesignen "Vinternatt"

Har gjort en uppdaterad version av den gamla gratisdesignen på testbloggviii.

Hur lägger jag in en ny bloggdesign i stilmallen?

Radera allt i din stilmall. Kopiera sedan koden i rutan här nedanför och klistra in. Ser det konstigt ut? Du kanske behöver ändra tema på din blogg för att stilmallen ska fungera. Välj Anchor eller Fashion exempelvis. Sen gör du om hela grejen igen, alltså radera allt i stilmallen, kopiera koden från min ruta och klistra in.

Radera allt i din stilmall och klistra in följande kod istället:

@charset "utf-8";
/* CSS Document */

body {
    background: url("http://farm3.static.flickr.com/2580/4141179453_fcbd69b665_o.jpg") repeat-x scroll 0 0 #000116;
    margin: 0;
    padding: 0;
}
img {
    border: medium none;
}
#profile img {
    background: none repeat scroll 0 0 white;
    border: 1px solid #CCCCCC !important;
    margin-left: -16px;
    padding: 5px;
}
img a {
    border: medium none;
}
a {
    color: #003333;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #003333;
    font-weight: bold;
    text-decoration: underline;
}
#wrapper {
    clear: none;
    margin: 30px auto;
    padding: 0;
    width: 960px;
}
#wrapper:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
p {
    margin: 0;
    padding: 0;
}
#header {
    background: url("http://farm3.static.flickr.com/2710/4141179459_fc25a78ed5_o.jpg") no-repeat scroll center top #F1F1F1;
    height: 503px;
    text-align: center;
    width: 760px;
}
.mattblacktabs {
    border-bottom: 0 none;
    margin-top: -28px;
    overflow: hidden;
    width: 100%;
}
.mattblacktabs ul {
    font: bold 12px Verdana;
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 15px;
}
.mattblacktabs li {
    display: inline;
    margin: 0;
}
.mattblacktabs li a {
    background: none repeat scroll 0 0 #121B2C;
    border-left: 2px solid silver;
    color: #F1F1F1;
    display: block;
    float: left;
    margin: 0;
    padding: 7px 8px;
    text-decoration: none;
    border-right: 1px solid #ccc;
}
.mattblacktabs li a:visited {
    color: #F1F1F1;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a {
    background: none repeat scroll 0 0 #f1f1f1;
    color: #121B2C;
}
#side {
    background: url("http://farm8.staticflickr.com/7155/6772332985_a951c8c030.jpg") no-repeat scroll center top #FFFFFF;
    border-bottom: 1px solid silver;
    float: right;
    margin-top: -350px;
    padding: 120px 10px 10px;
    width: 170px;
}
#content {
    background: none repeat scroll 0 0 #F1F1F1;
    float: left;
    left: 0;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 740px;
}
#header a {
    background-color: transparent;
    color: #CCCCCC;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
#header a:hover {
    background-color: transparent;
    padding: 0;
    text-decoration: none;
}
h1 {
    color: #CCCCCC;
    float: right;
    font-family: "century gothic",arial,sans-serif;
    font-size: 36px;
    font-weight: normal;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 20px;
    padding: 0;
    text-align: right;
    width: 250px;
}
h2 {
    clear: right;
    color: #999999;
    float: right;
    font-family: georgia serif;
    font-size: 16px;
    font-style: italic;
    font-weight: normal;
    margin-right: 30px;
    margin-top: 0;
    padding: 0;
    text-align: right;
    width: 400px;
}
h3 {
    border-bottom: 1px dotted silver;
    color: #333333;
    font-family: georgia,serif;
    font-size: 30px;
    font-weight: normal;
    margin: 5px 5px 15px;
    padding: 5px;
}
.navheader {
    background-color: #F7F7F7;
    border-bottom: 1px dotted #CCCCCC;
    color: #333333;
    font-family: "georgia",serif;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0;
    padding: 5px;
    text-transform: uppercase;
}
.nav {
    color: #333333;
    font-family: verdana,Arial,Helvetica,Sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin: 0;
}
.nav ul {
    background-color: transparent;
    font-weight: normal;
    margin: 5px 0;
    padding: 0;
}
.nav li {
    font-weight: normal;
    list-style: none outside none;
    padding: 0 0 7px;
}
.nav a {
    color: #003333;
    text-decoration: none;
}
.nav a:hover {
    color: #121B2C;
    text-decoration: underline;
}
.entrybody {
    border-bottom: 1px groove #CCCCCC;
    color: #333333;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 150%;
    margin: 5px;
    padding: 0 0 100px;
}
.entrybody a {
    color: #003333;
    text-decoration: none;
}
.entrybody a:hover {
    background-color: #F1F1F1;
    color: #121B2C;
    text-decoration: none;
}
.entrymeta {
    clear: both;
    color: #333333;
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    font-weight: normal;
    padding-bottom: 10px;
    text-align: right;
}
.entrymeta a {
    color: #003333;
    text-decoration: none;
}
.entrymeta a:hover {
    background-color: #F1F1F1;
    color: #121B2C;
    text-decoration: none;
}
.commentheader {
    background-color: #003333;
    color: #F1F1F1;
    font-family: arial,helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 5px;
}
.commenttext {
    background-color: #F1F1F1;
    border: 1px solid silver;
    color: #000000;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 130%;
    padding: 5px;
}
.commenttext a {
    color: #121B2C;
    text-decoration: none;
}
.commenttext a:hover {
    color: #121B2C;
    text-decoration: underline;
}
.commentmeta {
    color: #999999;
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    font-weight: normal;
    margin: 5px 0 20px;
}
.commentmeta a {
    color: #003333;
    text-decoration: none;
}
.commentmeta a:hover {
    background-color: #F1F1F1;
    color: #121B2C;
    text-decoration: none;
}
.commentform {
    color: #333333;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    font-weight: normal;
    margin: 0 0 20px;
}
.separator {
    display: none;
}
.default {
    color: #333333;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 0 0 10px;
    text-transform: uppercase;
}
.subside {
    font-size: 11px;
    font-weight: normal;
    padding: 10px;
    text-align: right;
}
.xmlButton {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FF6600;
    border-color: #FFCC99 #663300 #333300 #FF9966;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    font: bold 10px Verdana,Arial,Helvetica,Sans-serif;
    margin: 0;
    padding: 0 3px;
    text-decoration: none;
}
.image {
    border: medium none;
}
.thumbnail {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    margin: 0 6px 6px 0;
    padding: 2px;
}
.video {
    border: 0 none;
    padding: 0;
}
.fieldName {
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    margin: 0 0 12px;
}
select {
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
}
#calendar {
    background-color: #FFFFFF;
    color: #333333;
    font-family: 'Trebuchet MS',Verdana,sans-serif;
    margin: 12px 0;
    padding: 10px;
    text-align: left;
}
#calendar table {
    border: 0 none;
    padding: 1px;
}
#calendar table caption {
    border-bottom: 1px solid #999999;
    color: #666666;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.3em;
    padding: 3px;
    text-align: left;
    text-transform: uppercase;
}
#calendar table th {
    font-size: xx-small;
    font-weight: bold;
    text-align: center;
}
#calendar table tr td {
    border: 1px solid #666666;
    font-size: xx-small;
    text-align: center;
}
#calendar table tr ul {
    color: #666666;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 0.7em;
    margin: 0 0 0 20px;
}
#calendar table tr td.cssDayMouseOver {
    border: 1px dotted red;
}
#calendar table tr td.cssDayMouseOut {
    border: 1px solid #666666;
}
#calendar table tr td.cssEntryBox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid gray;
    color: #666666;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 0.8em;
    padding: 6px;
    text-align: left;
}
#calendar table tr td ul li {
    color: #666666;
}
#calendar table tr td div.cssDayEntryHeader {
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    text-align: left;
}
#calendar table tr td div.cssDayAvailable {
    text-decoration: underline;
}
form {
    background-color: transparent;
    margin: 0 0 10px;
    padding: 10px;
}
#profile {
    background: url("http://farm8.staticflickr.com/7027/6772174895_dd2f32ed93_m.jpg") no-repeat scroll center top transparent;
    font-family: Verdana,Helvetica,Sans-serif;
    font-size: 11px;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 0;
    text-align: center;
}
#profile h4 {
    color: #CCCCCC;
    font-family: georgia,serif;
    font-size: 24px;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 30px;
    padding: 5px;
    text-align: left;
}
#profile p {
    margin-top: 10px;
}

Hur gör jag för att få in en sån där horisontell meny då?

Tab-menyn är en ganska basic meny från DynamicDrive. Jag har anpassat den till min design färdigt i stilmallen, så det behöver du inte bekymra dig om. Det enda du behöver göra är att lägga in själva kodsnutten för menyn i din kodmall (alltså inte stilmall). Den del av den horisontella menyn du ska klistra in i kodmallen består i princip bara av en enkel lista och du bör kunna lägga in den och dina egna länkar utan problem.

När du har lagt in stilmallen sparar du alltså och går sedan in i kodmallen istället.

Leta rätt på följande kodrader:

<div id="header">
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

Direkt efter detta klistrar du in:

<div>
<ul>
<li><a href="../http://kreativ.blogg.se">Länk 1</a></li>
<li><a href="../http://kreativ.blogg.se">Länk 2</a></li>
<li><a href="../http://kreativ.blogg.se">Länk 3</a></li>
<li><a href="../http://kreativ.blogg.se">Länk 4</a></li>
<li><a href="../http://kreativ.blogg.se">Länk 5</a></li>
</ul>
</div>

Ersätt adresserna med dina egna adresser och 'Länk 1', 'Länk 2' osv med dina egna namn. När du är färdig markerar du koden och kopierar. Spara kodmallen och bläddra sedan vidare i rullistan för att komma till nästa kodmall (det finns fyra stycken). Klistra in koden i nästa kodmall, spara, upprepa.

Och hur gör jag den där fallande snön?

Det är javascript, kopiera koden nedan och klistra in den innan </body>

<script type="text/javascript">
Width =1200; // ange bredden på sidan som ska snöas in...
Height =2000; // ange höjden på sidan som ska snöas in...
Count =25; // antal snöflingor OBS! ange inte för stort antal!
MaxStep=3; // max steg i rörelsen
MinStep=1; // min steg i rörelsen
MaxFlake=10; // max storlek på snöflinga
MinFlake=4; // min storlek på snöflinga

PosX = new Array();
PosY = new Array();
StepX = new Array();
StepY = new Array();
StarSize=new Array();

for (i = 0; i < Count; i++) {
PosX[i] = Math.random()*Width;
PosY[i] = Math.random()*Height; 
StepX[i] =MinStep+Math.random()* -MaxStep;
StepY[i] =MinStep+Math.random()* MaxStep;
StarSize[i]=MinFlake+Math.random() * MaxFlake;

document.write("<div id='Obj" + i + "' style='position:absolute; left:0px; top:-20px; z-index:10000; visibility:hidden; color:#fff; font-weight:normal; font-family:Verdana; font-size:"+StarSize[i]+"pt'>•</div>");
}

function animate() { 
for (i = 0; i < Count; i++) {
PosY[i] += StepY[i];
PosX[i] += StepX[i];

document.getElementById("Obj"+i).style.visibility = "visible";
if (PosY[i] > Width || PosX[i] > Height || PosX[i]<0) { // starta om från toppen av sidan när mitten nås
PosX[i] = Math.random()*Width; ///2
PosY[i] = -20;
StepX[i] = MinStep+Math.random()* -MaxStep;
StepY[i] = MinStep+Math.random()* MaxStep;
}

document.getElementById("Obj"+i).style.top = PosY[i] + "px";
document.getElementById("Obj"+i).style.left = PosX[i] + "px";
}
setTimeout("animate()", 50);// hastighet
}

setTimeout("animate()", 1000);

</script>

Presto! Färdigt ska det vara nu.
Hoppas du blir nöjd med din nya vinterlayout!

OBS! OBS! OBS!

Detta är en stilmalldesign endast, därför har jag inte lagt in någon länk till mig färdigt. Du SKA länka till mig i sidomenyn om du använder denna design.

OBS! OBS! OBS!

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2012-01-27 @ 22:56:04 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (0)

Gästskribent på Designa Din Blogg - Vad vill du läsa om?

Jag har fått förmånen att hjälpa Lari på DesignaDinBlogg att bredda sajten och lägga till ännu mer innehåll. Snart kommer ni alltså att kunna höra av mig där med. Måste bara komma på vad jag ska skriva om. Är det någon som har några önskemål? Något speciellt du vill lära dig om bloggdesign, webbdesign, grafisk design, illustrator/photoshop eller att skriva för webben?

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2012-01-16 @ 11:42:35 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (2)

Läs bloggen i mobilen

Vector av en läsplatta.

Jag vet att många läser min blogg (eller försöker läsa den) på mobilen. Tidigare har det ju varit lite halvskoj att göra det, men nu har jag fått ändan ur och faktiskt gjort en bloggversion för mobilen. Ungefär hur den ser ut ser ser ni på bilden här ovan. Nu har ju inte jag tillgång till allsköns mobila apparater så om det ser knasigt ut för någon får ni hojta till. Ja, det blev slarvigt med menyerna, men jag orkade faktiskt inte börja mecka med dem. De funkar i alla fall. Enough is enough. Frågor, åsikter eller politiska yttringar? Let me know.

Ha det super!

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2011-09-26 @ 19:47:05 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (3)

Tryck F5/alt+reload

Blev akut trött på min stora header igår så jag lade in en ny. Inte hejdlöst stor skillnad, men nu ser man i alla fall en del av inlägget på en gång man kommer in på sidan. Älskar min fjäril också. Nästa steg blir att bredda bloggen, men det hade jag inte tid med igår. Hope you like!

Godmorgonkramar från mig! ♥

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2011-05-25 @ 08:11:47 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (2)

Gratis bloggdesign - Grafit (kod + grafik)

Häromdagen gjorde jag en header åt den här tjejen. Fick lite frispel och gjorde en matchande design när jag ändå var igång. Och när jag ändå var igång började jag sen snickra ihop en ny gratisdesign. Det var ju rätt längesen sist.

Grafit heter designen, av uppenbara skäl. Mycket grått, lite school days känsla på nåt sätt. Breda bilder äntligen i denna - 740px, det ni. Färdig sliding doors meny och allt, bara att ersätta länkarna med ens egna. Live demo finns här.

Alla kodmallar och stilmallen finns i en komprimerad mapp att hämta ned här. Sen är det bara att klippa och klistra.

Reglerna är som vanligt väldigt enkla. Skriv en inlägg där du berättar varifrån du fått designen och länka till mig i sidomenyn.

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2011-03-26 @ 19:53:46 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (2)

Ny bloggdesign på Rivana

Jag är verkligen bra på att snöa in mig på saker. Nu har jag fått koka om mitt te fyra gånger eftersom jag hela tiden fastnar i någon grafikkomponent eller programmeringsslinga. Jag har i alla fall äntligen gjort färdigt nydesignen på www.rivana.se

Gå in och kolla. Seriöst. Jag är till och med mer kär i den än den här. Men gråa hår alltså, jösses vilken röra innan jag fick ihop layouten. Det ser inte så ut nu, men ni skulle ha sett koden när jag började mecka. :-)

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2010-08-23 @ 23:00:44 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (3)

Ny design på Stilbild

Kände att Stilbild, min blogg på StyleSearch, också behövde en vintage-uppgradering. Det är en lite enklare design, men jag hänger ju inte heller där så ofta. Den här headerbilden gillar jag dock skarp. Funderar på att göra en template av den, mest bara för att det är så skoj att jobba med den här typen av design. Vintage ftw.

Kika in på www.rivana.se för att se designen live.

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2010-03-15 @ 10:19:10 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (0)

Gratis bloggdesign - Valentine (kod+grafik)

Idag är det Alla Hjärtans Dag. Klart ni ska få en Valentine's bloggdesign då. Här kommer en blogglayout i kärlekens tecken. Varsågod.

Ett fungerande exempel på designen hittar du på valentine.

Radera allt i din stilmall och klistra in följande kod istället:

body { margin: 0px; padding:0px; background: #000 url(http://farm5.static.flickr.com/4025/4355376761_a096444f97_o.jpg) repeat-x; }  img{ border:none; }  img a{ border:0 none; }  a { color: #000; background-color:ffb0b0; text-decoration:none;} a:hover { color: #000; background-color:ff7373; text-decoration:underline;}  #wrapper { clear:none; margin: 30px auto; padding: 0px; width: 760px; background: transparent url(); border: 0; }  #wrapper:after { content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden; }  p { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }  #header { background: #0C0C0B url(http://farm3.static.flickr.com/2764/4353053905_e86d4a8a59_o.jpg) no-repeat top center; width: 760px; height: 524px; margin-bottom:25px; }  #side { float: right; width: 140px; margin: 15px 0px 0px 0px; padding: 200px 15px 15px 15px; background:#c30000 url(http://farm5.static.flickr.com/4036/4353701200_cc25d6065a_o.jpg) top center no-repeat; left:-30px; border: none; }  #content { overflow: hidden; width: 560px; position:relative; left:0px; voice-family:"\"}\""; voice-family:inherit; float: left; background-color:transparent; border: none; padding:0px; }  .entries { padding:10px; background:#c30000 url(http://farm5.static.flickr.com/4062/4352909581_9da91348c2_o.jpg) top right no-repeat; margin-bottom: 20px; margin-top:15px; }  #header a { color: #FFB0B0; background-color:transparent; text-decoration: none; padding: 5px 5px 0px 5px; }  #header a:hover { color:#fff; background-color:transparent; }  /* bloggtitel */ h1 { font-family: georgia, serif; font-style:italic; font-size: 24px; color: #FFB0B0; margin-top: 470px; margin-left: 100px; margin-bottom:0px; padding:0px; width:390px; float:left; }  /*bloggbeskrivning */ h2 { font-family: myriad, verdana, sans-serif; font-size: 12px; color: #000; background-color:#ffb0b0; margin-left: 100px; margin-top:5px; margin-bottom:10px; padding: 10px; width:390px; float:left; clear:left; }  .navheader { font-family:  myriad, Helvetica, Sans-serif; font-size: 12px; font-weight: bold; color: #000; background-color: transparent; padding:0px; margin-bottom:0px; text-transform: uppercase; border-bottom: 1px solid black; }  .nav { font-family: verdana, Arial, Helvetica, Sans-serif; font-size: 10px; font-weight: bold; color: #333; margin: 0px; }  .nav ul { margin: 5px 0px 5px 0px; padding: 0px; font-weight: normal; background-color: transparent; }  .nav li { list-style: none; padding: 0px 0px 5px 0px; font-weight: normal;	 }  .nav a { color: #ffb0b0; background-color:transparent; text-decoration:none;} .nav a:hover { color: #fff; background-color:transparent; text-decoration:none;}  /** Entry headers **/ h3 { font-family: myriad, "myriad pro", helvetica, verdana, arial, sans-serif; font-size: 26px; font-weight:300; color: #000; background: transparent; width:250px; margin:100px 200px 100px 100px; padding:5px; }  /** Post's body text **/ .entrybody { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000; line-height: 150%; margin:5px; padding:10px 10px 130px 10px; background:#fff; border-bottom: 1px solid #958557; }  .entrybody a { color: #000; background-color:#ffb0b0; text-decoration:none;} .entrybody a:hover { color: #000; background-color:#ff7373; text-decoration:none;}  /** 'Posted by' txt **/ .entrymeta { font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: normal; color: #ff7373; text-align:right; clear: both; margin: 14px 0px 14px 12px border: none; padding-bottom:10px; }  .entrymeta a { color: #ffb0b0; background-color:transparent; text-decoration:none;} .entrymeta a:hover { color: #fff; background-color:transparent; text-decoration:none;}  .commentheader { font-family:  myriad, verdana, helvetica, sans-serif; font-size: 11px; font-weight: bold; background-color:#ff7373; padding:5px; color: #000; }  .commenttext { font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: normal; color: #000; line-height: 130%; background-color:#fff; padding: 5px; }  .commentmeta { font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: normal; color: #666; margin: 5px 0px 20px 0px }  .commentmeta a { color: #ffb0b0; background-color:transparent; text-decoration:none;} .commentmeta a:hover { color: #fff; background-color:transparent; text-decoration:none;}  .commentform { font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: normal; color: #333333; margin: 0px 0px 20px 0px background-color:#ffb0b0; }  .separator { display:none; }  .default { font-family: Arial, Helvetica, Sans-serif; font-size: 11px; color: #ff7373; font-weight: bold; padding: 0px 0px 10px 0px; text-transform: uppercase; }  .subside { font-family: "Trebuchet MS" Verdana, Arial, Helvetica, Sans-serif; font-size: 11px; font-weight: normal; padding: 0px 0px 0px 0px; }   .xmlButton { border:1px solid; border-color:#FC9 #630 #330 #F96; padding:0 3px; font:bold 10px Verdana, Arial, Helvetica, Sans-serif; color:#FFF; background:#F60; text-decoration:none; margin:0; }  .image { border:none; }  .thumbnail { border: 2px solid #CCCCCC; background-color:#FFFFFF; padding:2px; margin: 0px 6px 6px 0px; }  .video{ padding: 0px 0px 0px 0px; }  .fieldName{ font-family: verdana, arial, sans-serif; font-size: 11px; margin: 0px 0px 12px 0px }  select{ font-family: verdana, arial, sans-serif; font-size: 11px; }  #calendar { color: #333333; font-family: 'Trebuchet MS', Verdana, sans-serif; padding: 0px; text-align: left; background-color: #FFFFFF; margin: 12px 0px 12px 0px; padding: 10px; }  #calendar table { padding: 1px; /*border-collapse: collapse;*/ border: 0px; }  #calendar table caption { color: #666666; font-family : Arial, Helvetica, Sans-serif; font-size : 0.7em; border-bottom: 1px solid #999999; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; letter-spacing: .3em; }  #calendar table th { text-align: center; font-weight: bold; font-size: xx-small; }  #calendar table tr td { border: 1px solid #666666; text-align: center; font-size: xx-small; }  #calendar table tr ul  { color: #666666; list-style: dot; margin: 0px 0px 0px 20px; padding: 4 0 5 0; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 0.7em;	 }  #calendar table tr td.cssDayMouseOver { border: 1px dotted red; cursor: hand; }  #calendar table tr td.cssDayMouseOut { border: 1px solid #666666; }  #calendar table tr td.cssEntryBox { border: 1px solid gray; padding: 6px; text-align: left; background: #FFFFFF; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 0.8em; color: #666666; }  #calendar table tr td ul li { color: #666666; }  #calendar table tr td div.cssDayEntryHeader { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 0.8em; text-align: left; font-weight: bold; padding: 4; }  #calendar table tr td div.cssDayAvailable { text-decoration: underline; text-weight: bold; }  form { padding: 10px; background-color: #ffb0b0; margin: 0px 0px 10px; }  #profile { font-family:  Verdana, Helvetica, Sans-serif; font-size: 11px; font-weight: normal; margin: 0px 0px 10px 0px; padding-left: 0px; text-align:center; }  #profile h4 { font-family:  Arial, Helvetica, Sans-serif; font-size: 12px; font-weight: bold; color: #000; background-color: #ff7373; padding:5px; margin-bottom:10px; text-transform: uppercase; text-align:left; }  #profile p{ }

Radera allt i din kodmall 'Framsida' och klistra in följande kod istället:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>${BlogTitle} - ${BlogDescription}</title>  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  <meta name="generator" content="${AppUrl}" />  <link rel="stylesheet" href="${BlogUrl}style.css" mce_href="/456233/entries/article/68930267/${BlogUrl}style.css" type="text/css" />  <link rel="alternate" href="${BlogUrl}index.rss" mce_href="/456233/entries/article/68930267/${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />   <mce:script type="text/javascript" mce_src="http://static.blogg.se/public/js/script_blogg.js"></mce:script>   <mce:script type="text/javascript" mce_src="http://static.blogg.se/shared/js/script.js"></mce:script>  </head>  <body>  <div id="wrapper">   <div id="header">   <h1><a href="${BlogUrl}" mce_href="/456233/entries/article/68930267/${BlogUrl}">${BlogTitle}</a></h1>   <h2>${BlogDescription}</h2>  </div>   <div id="content"> <div id="content-inner">   <tag:entrylist limit="15">  <div class="entries">     <a name="a${EntryNum}"></a> <h3><a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">${EntryTitle}</a></h3>    <div class="entrybody">${EntryBody}</div>    <div class="entrymeta">     ${EntryDate} @ ${EntryTime}     <a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">Permalink</a>     <a href="${EntryCategoryLink}" mce_href="/456233/entries/article/68930267/${EntryCategoryLink}">${EntryCategoryName}</a>     <a href="${EntryPermaLink}#comment" mce_href="/456233/entries/article/68930267/${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a> 	<a href="${EntryPermaLink}#trackback" mce_href="/456233/entries/article/68930267/${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a> 	<br /><br /> 	<tag:taglist title="Nyckelord: "> 		<a href="${TagURL}" mce_href="/456233/entries/article/68930267/${TagURL}" rel="tag">${TagName}</a> 	</tag:taglist>    </div>    <hr class="separator" /> </div>   </tag:entrylist>  </div> </div>   <div id="side"> <div id="side-inner">   <div id="profile"> 	<tag:profile> 		<tag:if test="${ProfileExists == 'true'}"> 			<h4>Om</h4> 			<a href="${AppUrl}index.bd?fa=pf.view&pf_id=${ProfileID}" mce_href="/456233/entries/article/68930267/${AppUrl}index.bd?fa=pf.view&pf_id=${ProfileID}"><img class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" mce_src="/456233/entries/article/68930267/${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a> 			<p><a href="${AppUrl}index.bd?fa=pf.view&pf_id=${ProfileID}" mce_href="/456233/entries/article/68930267/${AppUrl}index.bd?fa=pf.view&pf_id=${ProfileID}"><span style="font-weight:bold" mce_style="font-weight:bold"> ${ProfileName}</span></a></p> 		</tag:if> 	</tag:profile>   </div>    <div class="nav"> 	<div class="navheader">Sök i bloggen</div> 	<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post"> 		<input type="hidden" name="bl_id" value="${BlogID}" /> 		<input type="text" name="criteria" value="" size="12" maxlength="64" /> 		<input type="submit" value="Sök" /> 	</form>     <div class="navheader">Senaste inläggen</div>    <ul>        <tag:recentlist limit="20">      <li><a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">${EntryTitle}</a></li>        </tag:recentlist>    </ul>    <div class="navheader">Kategorier</div>    <ul>      <tag:categorylist>         <li><a href="${CategoryLink}" mce_href="/456233/entries/article/68930267/${CategoryLink}">${CategoryName}</a></li>        </tag:categorylist>    </ul>    <div class="navheader">Arkiv</div>    <ul>     <tag:archivelist>      <li><a href="${ArchiveLink}" mce_href="/456233/entries/article/68930267/${ArchiveLink}">${ArchiveName}</a></li>     </tag:archivelist>    </ul>    <tag:if test="${hasLinks == 'true'}">    <div class="navheader">Länkar</div>    <ul>     <tag:linklist>      <li><a href="${LinkURL}" mce_href="/456233/entries/article/68930267/${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>     </tag:linklist>    </ul>    </tag:if>    <tag:if test="${hasBooks == 'true'}">    <div class="navheader">Böcker</div>    <ul>     <tag:booklist>      <li><a href="${BookUrl}" mce_href="/456233/entries/article/68930267/${BookUrl}"><img class="thumbnail" src="${BookImageSmall}" mce_src="/456233/entries/article/68930267/${BookImageSmall}" border="0" alt="${BookTitle}" title="${BookTitle}" /></a><br /><a href="${BookUrl}" mce_href="/456233/entries/article/68930267/${BookUrl}">${BookTitle}</a></li>     </tag:booklist>    </ul>    </tag:if>    <tag:if test="${hasMusic == 'true'}">    <div class="navheader">Musik</div>    <ul>     <tag:musiclist>      <li><a href="${MusicUrl}" mce_href="/456233/entries/article/68930267/${MusicUrl}"><img class="thumbnail" src="${MusicImageSmall}" mce_src="/456233/entries/article/68930267/${MusicImageSmall}" border="0" alt="${MusicTitle}" title="${MusicTitle}" /></a><br /><a href="${MusicUrl}" mce_href="/456233/entries/article/68930267/${MusicUrl}">${MusicTitle}</a></li>     </tag:musiclist>    </ul>    </tag:if>    <tag:if test="${hasMovies == 'true'}">    <div class="navheader">Filmer</div>    <ul>     <tag:movielist>      <li><a href="${MovieUrl}" mce_href="/456233/entries/article/68930267/${MovieUrl}"><img class="thumbnail" src="${MovieImageSmall}" mce_src="/456233/entries/article/68930267/${MovieImageSmall}" border="0" alt="${MovieTitle}" title="${MovieTitle}" /></a><br /><a href="${MovieUrl}" mce_href="/456233/entries/article/68930267/${MovieUrl}">${MovieTitle}</a></li>     </tag:movielist>    </ul>    </tag:if>   </div>   <div class="subside">    <a href="index.rss" mce_href="/456233/entries/article/68930267/index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" mce_src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>   </div>  </div> </div> </div>  <img src="http://stats.blogg.se/?id=${BlogID}" mce_src="http://stats.blogg.se/?id=${BlogID}" border="0" width="0" height="0" alt="" />  </body> </html>

Radera allt i din kodmall 'Kategorisida' och klistra in följande kod istället:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>${BlogTitle} - ${PageTitle}</title>  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  <meta name="generator" content="${AppUrl}" />  <link rel="stylesheet" href="${BlogUrl}style.css" mce_href="/456233/entries/article/68930267/${BlogUrl}style.css" type="text/css" />  <link rel="alternate" href="${BlogUrl}index.rss" mce_href="/456233/entries/article/68930267/${BlogUrl}index.rss" type="application/rss+xml" title="RSS 2.0" />  <mce:script type="text/javascript" mce_src="http://static.blogg.se/public/js/script_blogg.js"></mce:script>  <mce:script type="text/javascript" mce_src="http://static.blogg.se/shared/js/script.js"></mce:script> </head>  <body>  <div id="wrapper">   <div id="header">   <h1><a href="${BlogUrl}" mce_href="/456233/entries/article/68930267/${BlogUrl}">${BlogTitle}</a></h1>   <h2>${BlogDescription}</h2>  </div>   <div id="content">   <tag:entrylist limit="300"> <div class="entries">    <a name="a${EntryNum}"></a> <h3><a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">${EntryTitle}</a></h3>    <div class="entrybody">${EntryBody}</div>    <div class="entrymeta">     ${EntryDate} @ ${EntryTime}     <a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">Permalink</a>     <a href="${EntryCategoryLink}" mce_href="/456233/entries/article/68930267/${EntryCategoryLink}">${EntryCategoryName}</a>     <a href="${EntryPermaLink}#comment" mce_href="/456233/entries/article/68930267/${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a> 	<a href="${EntryPermaLink}#trackback" mce_href="/456233/entries/article/68930267/${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a> 	<br /><br /> 	<tag:taglist title="Nyckelord: "> 		<a href="${TagURL}" mce_href="/456233/entries/article/68930267/${TagURL}" rel="tag">${TagName}</a> 	</tag:taglist>    </div>    <hr class="separator" />      {% if loop.last and pagination %}   <div style="text-align: center; font-size: 12px" mce_style="text-align: center; font-size: 12px">     {% if pagination.page_number != 1 %}       <a style="padding-right: 30px" mce_style="padding-right: 30px" href="{{ category.slug }}-{{ pagination.page_number - 1 }}.html" mce_href="/456233/entries/article/68930267/{{ category.slug }}-{{ pagination.page_number - 1 }}.html">Tidigare inlägg</a>     {% endif %}     {% if pagination.page_number not in (pagination.total_pages, pagination.total_pages - 1) %}       <a href="{{ category.slug }}-{{ pagination.page_number + 1 }}.html" mce_href="/456233/entries/article/68930267/{{ category.slug }}-{{ pagination.page_number + 1 }}.html">Nyare inlägg</a>     {% endif %}     {% if pagination.page_number == pagination.total_pages - 1 %}       <a href="{{ category.slug }}.html" mce_href="/456233/entries/article/68930267/{{ category.slug }}.html">Nyare inlägg</a>     {% endif %}   </div>   {% endif %} </div> </tag:entrylist>  </div>   <div id="side">    <div class="nav"> 	<ul> 		<li><a href="index.html" mce_href="/456233/entries/article/68930267/index.html" title="Gå till startsidan"><b>Till bloggens startsida</b></a></li> 	</ul> 	<div class="navheader">Sök i bloggen</div> 	<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post"> 		<input type="hidden" name="bl_id" value="${BlogID}" /> 		<input type="text" name="criteria" value="" size="12" maxlength="64" /> 		<input type="submit" value="Sök" /> 	</form>    <div class="navheader">Senaste inläggen</div>    <ul>        <tag:recentlist limit="20">          <li><a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">${EntryTitle}</a></li>        </tag:recentlist>    </ul>    <div class="navheader">Kategorier</div>    <ul>      <tag:categorylist>         <li><a href="${CategoryLink}" mce_href="/456233/entries/article/68930267/${CategoryLink}">${CategoryName}</a></li>        </tag:categorylist>    </ul>    <div class="navheader">Arkiv</div>    <ul>     <tag:archivelist>      <li><a href="${ArchiveLink}" mce_href="/456233/entries/article/68930267/${ArchiveLink}">${ArchiveName}</a></li>     </tag:archivelist>    </ul>    <tag:if test="${hasLinks == 'true'}">    <div class="navheader">Länkar</div>    <ul>     <tag:linklist>     <li><a href="${LinkURL}" mce_href="/456233/entries/article/68930267/${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>     </tag:linklist>    </ul>    </tag:if>   </div>    <div class="subside">     <a href="index.rss" mce_href="/456233/entries/article/68930267/index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" mce_src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>   </div>   </div>  </div>  <img src="http://stats.blogg.se/?id=${BlogID}" mce_src="http://stats.blogg.se/?id=${BlogID}" border="0" width="0" height="0" alt="" />  </body> </html>

Radera allt i din kodmall 'Arkivsida' och klistra in följande kod istället:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>${BlogTitle} - ${PageTitle}</title>  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  <meta name="generator" content="${AppUrl}" />  <link rel="stylesheet" href="${BlogUrl}style.css" mce_href="/456233/entries/article/68930267/${BlogUrl}style.css" type="text/css" />  <link rel="alternate" href="${BlogUrl}index.rss" mce_href="/456233/entries/article/68930267/${BlogUrl}index.rss" type="application/rss+xml" title="RSS 2.0" />  <mce:script type="text/javascript" mce_src="http://static.blogg.se/public/js/script_blogg.js"></mce:script>  <mce:script type="text/javascript" mce_src="http://static.blogg.se/shared/js/script.js"></mce:script> </head>  <body>  <div id="wrapper">   <div id="header">   <h1><a href="${BlogUrl}" mce_href="/456233/entries/article/68930267/${BlogUrl}">${BlogTitle}</a></h1>   <h2>${BlogDescription}</h2>  </div>   <div id="content">   <tag:entrylist limit="300"> <div class="entries">    <a name="a${EntryNum}"></a> <h3><a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">${EntryTitle}</a></h3>    <div class="entrybody">${EntryBody}</div>    <div class="entrymeta">     ${EntryDate} @ ${EntryTime}     <a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">Permalink</a>     <a href="${EntryCategoryLink}" mce_href="/456233/entries/article/68930267/${EntryCategoryLink}">${EntryCategoryName}</a>     <a href="${EntryPermaLink}#comment" mce_href="/456233/entries/article/68930267/${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a> 	<a href="${EntryPermaLink}#trackback" mce_href="/456233/entries/article/68930267/${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a> 	<br /><br /> 	<tag:taglist title="Nyckelord: "> 		<a href="${TagURL}" mce_href="/456233/entries/article/68930267/${TagURL}" rel="tag">${TagName}</a> 	</tag:taglist>    </div>    <hr class="separator" /> </div>   </tag:entrylist>  </div>   <div id="side">    <div class="nav"> 	<ul> 		<li><a href="index.html" mce_href="/456233/entries/article/68930267/index.html" title="Gå till startsidan"><b>Till bloggens startsida</b></a></li> 	</ul> 	<div class="navheader">Sök i bloggen</div> 	<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post"> 		<input type="hidden" name="bl_id" value="${BlogID}" /> 		<input type="text" name="criteria" value="" size="12" maxlength="64" /> 		<input type="submit" value="Sök" /> 	</form>    <div class="navheader">Senaste inläggen</div>    <ul>        <tag:recentlist limit="20">          <li><a href="${EntryPermaLink}" mce_href="/456233/entries/article/68930267/${EntryPermaLink}">${EntryTitle}</a></li>        </tag:recentlist>    </ul>    <div class="navheader">Kategorier</div>    <ul>      <tag:categorylist>         <li><a href="${CategoryLink}" mce_href="/456233/entries/article/68930267/${CategoryLink}">${CategoryName}</a></li>        </tag:categorylist>    </ul>    <div class="navheader">Arkiv</div>    <ul>     <tag:archivelist>      <li><a href="${ArchiveLink}" mce_href="/456233/entries/article/68930267/${ArchiveLink}">${ArchiveName}</a></li>     </tag:archivelist>    </ul>    <tag:if test="${hasLinks == 'true'}">    <div class="navheader">Länkar</div>    <ul>     <tag:linklist>      <li><a href="${LinkURL}" mce_href="/456233/entries/article/68930267/${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>     </tag:linklist>    </ul>    </tag:if>   </div>      <div class="subside">     <a href="index.rss" mce_href="/456233/entries/article/68930267/index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" mce_src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>   </div>   </div>  </div>  <img src="http://stats.blogg.se/?id=${BlogID}" mce_src="http://stats.blogg.se/?id=${BlogID}" border="0" width="0" height="0" alt="" />  </body> </html>

För sista kodmallen 'Inläggssida' blir det lite klippa och klistra. Leta reda på koden <div id="content">
direkt nedanför detta klistrar du in <div class="entries"> Leta sedan reda på koden </tag:entry> en bit nedanför
direkt nedanför detta klistrar du in </div>

Allt innehåll, om inte annat framgår, är © Terese Mörtvik.
Foton, grafik, eller texter får inte användas utan mitt tillstånd.
Vid användning med tillstånd länka alltid tillbaka till bloggen.

2010-02-14 @ 13:06:05 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp (1)

Gratis bloggdesign - Julenatt/Vinter (kod+grafik)

Edit (jan, 2012): Ny version uppe, version 2.0 Kod nedan.

Egentligen var det layouten inspirerad av Gossip Girl jag skulle lägga upp. Sen insåg jag att det är (natten till) Första Advent. Klart du kanske är lite småsugen på en jullayout till din blogg. Alltså blev det en juldesign istället. Röda stugor, snö och stjärnklara nätter - vad kan vara mer jul och svensk vinter än det?

PS. Det är ju inget speciellt kristet med layouten så om du bara vill ha en mysig vinterdesign funkar den ändå.

Ett fungerande exempel på designen hittar du på testbloggviii.

Hur lägger jag in en ny bloggdesign i stilmallen?

Radera allt i din stilmall. Kopiera sedan koden i rutan här nedanför och klistra in. Ser det konstigt ut? Du kanske behöver ändra tema på din blogg för att stilmallen ska fungera. Välj Anchor eller Fashion exempelvis. Sen gör du om hela grejen igen, alltså radera allt i stilmallen, kopiera koden från min ruta och klistra in.

Radera allt i din stilmall och klistra in följande kod istället: