Galleritva -

Bloggdesign tips

Bildspel i menyn eller headern
Dela upp dina kategorier
Hur stilmallen och kodmallen hänger ihop
Ändra utseende på ett visst ord/mening
Bild i menyn
Tips på en enkel bloggdesign
Länkarna dras isär vid mouseover
Lägg in en egen bild som header
Egen ikon i webbläsaren
Ta bort den vita ramen runt headern
Lägg in Rosa bandet på bloggen
Sträck under rubrikerna i menyn
Bild i kommentarsfältet
Ändra stora bokstäver till små
Fixerad bakgrund (så den ligger stilla när du scrollar ner)
Mouseover bilder
HTML grundkoder
Hur man gör en transparent header
Menyn får samma färg som bakgrunden
Ruta att ha kod/text i, i dina inlägg
Öka bredden på bloggen
Mellanrum mellan menyn och inläggen

Bloggdesign tips från julkalendern 2010

Bilderna visas inte i vissa inlägg och jag har inte kvar dem. Men om det är något ni undrar över kan ni kommentera inlägget eller skicka ett mejl till mig ([email protected]) så ska jag hjälpa er :) Ge gärna förslag på mer tips jag kan visa er också!

2012-01-21 @ 19:11:00 Permalink Allmänt Kommentarer (0) Trackbacks ()

Bildspel i menyn eller headern

Fick ju en fråga i min frågestund innan om jag kunde visa hur man gjorde ett bildspel i menyn t.ex. So here you go!

1. Kopiera denna koden här nedan och lägg in den under </head> i dina kodmallar (framsida, inläggsida, kategorisida och arkivsida).

<script type="text/javascript">

// Browser Slide-Show script. With image cross fade effect for those browsers

// that support it.

// Script copyright (C) 2004-2011 www.cryer.co.uk.

// Script is free to use provided this copyright header is included.

var FadeDurationMS=1000;

function SetOpacity(object,opacityPct)

{

// IE.

object.style.filter = 'alpha(opacity=' + opacityPct + ')';

// Old mozilla and firefox

object.style.MozOpacity = opacityPct/100;

// Everything else.

object.style.opacity = opacityPct/100;

}

function ChangeOpacity(id,msDuration,msStart,fromO,toO)

{

var element=document.getElementById(id);

var msNow = (new Date()).getTime();

var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;

if (opacity>=100)

{

SetOpacity(element,100);

element.timer = undefined;

}

else if (opacity<=0)

{

SetOpacity(element,0);

element.timer = undefined;

}

else

{

SetOpacity(element,opacity);

element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);

}

}

function FadeInImage(foregroundID,newImage,backgroundID)

{

var foreground=document.getElementById(foregroundID);

if (foreground.timer) window.clearTimeout(foreground.timer);

if (backgroundID)

{

var background=document.getElementById(backgroundID);

if (background)

{

if (background.src)

{

foreground.src = background.src;

SetOpacity(foreground,100);

}

background.src = newImage;

background.style.backgroundImage = 'url(' + newImage + ')';

background.style.backgroundRepeat = 'no-repeat';

var startMS = (new Date()).getTime();

foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);

}

} else {

foreground.src = newImage;

}

}

var slideCache = new Array();

function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)

{

var imageSeparator = imageFiles.indexOf(";");

var nextImage = imageFiles.substring(0,imageSeparator);

if (slideCache[nextImage] && slideCache[nextImage].loaded)

{

FadeInImage(pictureID,nextImage,backgroundID);

var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)

+ ';' + nextImage;

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",

displaySecs*1000);

// Identify the next image to cache.

imageSeparator = futureImages.indexOf(";");

nextImage = futureImages.substring(0,imageSeparator);

} else {

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",

250);

}

// Cache the next image to improve performance.

if (slideCache[nextImage] == null)

{

slideCache[nextImage] = new Image;

slideCache[nextImage].loaded = false;

slideCache[nextImage].onload = function(){this.loaded=true};

slideCache[nextImage].src = nextImage;

}

}

</script><head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="fadeslideshow.js">

/***********************************************

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

***********************************************/

<script>var slide1foldername='';</script><script charset="utf-8" src="slide1.js"></script>

</script>

<script>

var mygallery=new fadeSlideShow({

wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "ondemand",

togglerid: ""

})

var mygallery2=new fadeSlideShow({

wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "always",

togglerid: "fadeshow2toggler"

})

</script>

2. Sen ska du lägga in koden för själva bildspelet och den lägger du in i dina kodmallar någonstans, beroende på vart du vill ha bildspelet.

Headern: Lägg koden under <div id="wrapper">
Menyn: Lägg koden under <div id="side">

Koden:

<div id="EmilyPictureBackground"> <img alt="slide show" src="ADRESSEN TILL FÖRSTA BILDEN" mce_src="/1032356/entries/article/new/" width="BREDDEN PÅ BILDERNA" height="HÖJDEN PÅ BILDERNA" id="EmilyPicture"> </div>

<script type="text/javascript">

RunSlideShow("EmilyPicture","EmilyPictureBackground",

"ADRESSEN TILL FÖRSTA IGEN;ADRESSEN TILL ANDRA BILDEN;ADRESSEN TILL TREDJE BILDEN;ADRESSEN TILL SISTA BILDEN",5);

</script>

<script type="text/javascript">

RunSlideShow("EmilyPicture","EmilyPictureBackground",

"ADRESSEN TILL FÖRSTA IGEN;ADRESSEN TILL ANDRA BILDEN;ADRESSEN TILL TREDJE BILDEN;ADRESSEN TILL SISTA BILDEN",5);

</script>

3. Nu ska du ladda upp bilderna du vill ha med i bildspelet på din blogg. Kopiera sedan bildadresserna (URL koderna) och lägg in den första bildadressen på tre ställen och sen resten av bilderna (allt står i koden).

Det går att lägga till fler bilder och ta bort, men efter varje adress ska det vara ett ; förutom efter den sista då det ska vara ",5); ja, ni ser i koden! Glöm inte att ändra höjden och bredden på bilderna också!

4. Om headern sitter fel kan du lägga in denna koden:

<div style="position:absolute; width:903px; x-index:0; left: 0px; top:0px;">KODEN HÄR</div>

Ändra width, left och top så att headern passar och lägg in bildspelskoden du kopierade innan där det står "KODEN HÄR"

Om det är något du undrar över så fråga!♥

2012-01-21 @ 19:10:09 Permalink Allmänt Kommentarer (0) Trackbacks ()

Dela upp dina kategorier

<font face="Georgia" size="3" color="#c5b9b3"><b>Personligt</b></font><br>

<a href="http://novalas.blogg.se/category/allmant.html

">Mixed up</a> <br>

<a href="http://novalas.se/category/outfits.html

">Outfit's</a> <br>

<a href="http://novalas.se/category/novala-shoppar.html

">Novala shoppar</a> <br>

<a href="http://novalas.se/category/usa-2011.html

">USA 2011</a><br><br></b>

</ul>

</div>

<a href="http://novalas.blogg.se/category/natur.html

">Natur</a> <br>

<a href="http://novalas.se/category/portratt.html

">Porträtt</a> <br>

<a href="http://novalas.se/category/vatten.html

">Vatten</a> <br>

<a href="http://novalas.se/category/ovrigt.html

">Övrigt</a> <br>

<a href="http://novalas.se/category/dagens-knasbilder-med-molly.html

">Dagens knasbilder med Molly</a><br><br></b>

</ul>

</div>Nu

Nu tänktee jag visa hur man delar in sina kategorier i olika delar så som jag har med rubriker, t.ex. Personligt, Foto o.s.v. Det är rätt komplicerat så man bör ha en viss förkunskap om html kodning! Här finns lite hjälp som kan vara bra att ha!

1. Börja med att skapa alla kategorier du vill ha genom att gå in på Blogg» Kategorier» Ny kategori. Skriv ett ett litet testinlägg i varje kategori så att alla kategorierna syns på din blogg under "Kategorier" i menyn.

2. Nu ska du kopiera denna koden:

<font face="TYPSNITT" size="STORLEK" color="FÄRG">RUBRIK</font><br>

<a href="#">
KATEGORI 1</a> <br>

<a href="#">
KATEGORI 2</a> <br>

<a href="#">
KATEGORI 3</a><br><br>

</ul>

</div>

3. Sedan går du in i dina kodmallar och gör som bilden säger! För att lättare hitta till det stället kan du trycka Ctrl + F och skriva in början på koden som är gråmarkerad.

(Bry er inte om att det står kategorisida längst upp i rullgardinsmenyn på bilden, ni ska först och främst göra detta i framsidan så det är inget ni behöver ändra på!)

4. Gör som bilden säger! Men sen ska du nu ändra koden så att det blir rätt! Förklaring i koden:

Först ändrar du typsnittet, färgen o.s.v på rubriken och skriver er rubrik där det står "RUBRIK" (den kan t.ex. vara personligt). Ändra också namnen på dina kategorier där det står "KATEGORI 1", alltså de kategorierna som kommer hamna under rubriken personligt (eller vad nu er rubrik ska vara).

Om du sen vill ändra färg m.m på dina kategori namn kan du lägga till denna koden efter "</font><br>" och ändra till det du vill ha:

<font face="TYPSNITT" size="STORLEK" color="FÄRG">RUBRIK</font>

5. När du ska skriva in länken till varje kategori så att man kommer rätt, går du in på din blogg och trycker på kategorin du ska skriva länken till. Kopiera sedan hela URL adressen längst upp i webbläsaren (där man skriver www...).

6. Klistra sedan in URL adressen enligt bilden:

Alltså ersätter du # med din URL adress till din länk.

7. Om du vill ha fler underkategorier kopierar du denna koden:

<a href="#">
KATEGORI 4</a> <br>

Om du vill ha "allt en gång till" d.v.s. både rubriker och underkategorier lägger du bara till hela koden du kopierade först igen!

8. Om du först vill ha en rubrik för allt där det står t.ex. Kategorier och dina rubriker och namnen på alla kategorier hamnar under kan du göra så här: Kopiera koden här nedan och sätt in den precis ovanför hela koden som börjar med <font... (alltså den första koden du kopierade).

<div class="navheader">Kategorier</div>

9. Testa att spara kodmallen nu och se hur det ser ut. Om något ser fel ut kan du testa att ta bort det sista </ul> i koden. Om du INTE har använt koden här ovanför (i nummer 8) kan du testa att ta bort </div> också.

Fråga om det är något du inte förstår! Lycka till!♥

2012-01-15 @ 17:47:17 Permalink Allmänt Kommentarer (1) Trackbacks ()

Hur stilmallen och kodmallen hänger ihop

Här kommer ett väldigt bra designtips enligt mig haha ;) Stilmallen och kodmallen hänger ju ihop och jag tänkte visa hur nu. T.ex. kodavsnittet #side i stilmallen har en kod i kodmallen också. Den börjar med <div id="side"> och slutar med </div>. Emellan där finns själva innehållet. Detta är rätt komplicerat så det gäller att man har lite kunskaper om bloggdesign o.s.v. när man gör detta! Enjoy!

1. Själva koden du använder:

Kodmall:
<div id="ditt namn"> INNEHÅLLET HÄR </div>

Stilmall:
#Ditt namn (måste vara samma namn som i kodmallskoden) {
INNEHÅLLET HÄR
}

2. Innehållet kan vara vad som helst. Du kanske till exempel vill göra en till meny på andra sidan. Då kanske namnet blir "Side2". Då kan du ju kopiera din "Side" kod som redan finns i stilmallen och sätta dit där innehållet ska vara. I kodmallen sen så lägger du in det som ska vara i den andra menyn helt enkelt. Kanske en bild, då skriver du bildkoden som vanligt och så kan du skriva en text o.s.v. Lägg sedan hela koden precis innan <div id="side"> till exempel.

3. Om du nu vill göra en till meny måste du ju kunna placera den där du vill. Då använder du denna koden i kodmallen:

<div style="position:absolute; width:903px; x-index:0; left: 100px; top:350px;">DET DU VILL POSITIONERA HÄR</div>

Där du ska sätta in det du vill positionera sätter du helt enkelt in själva <div id="ditt namn"> koden. Så här kan det se ut i kodmallen:

Som ni ser har jag skrivit <ul> innan menyns innehåll och </ul> efter menyns innehåll för att det ska bli en box.

Så här kan det då se ut i stilmallen:

Det spelar ingen roll vart man sätter denna koden, men till exempel längst ner.

4. Det här med en till meny var ju bara ett exempel. Du kan ju göra massa andra saker, till exempel om du har din meny uppdelad i boxar kanske du vill ha skugga runt boxarna. Då kan du använda denna koden då du lägger in skuggkoden i stilmallen och innehållet i din box i kodmallen.

Väldigt komplicerat att förstå, men om man testar sig fram så kanske det lossnar till slut! Var inte rädd för att ställa frågor nu, för detta är komplicerat!

2012-01-02 @ 17:44:33 Permalink Allmänt Kommentarer (0) Trackbacks ()

Ändra utseende på ett visst ord/mening

Jag fick en design fråga innan och jag tänkte att jag kunde sammanfatta den i det här inlägget. Koden är alltså till för att man ska kunna byta färg, storlek eller typsnitt på ett visst ord eller en viss mening.

KODEN:
<font color="färgkod här" size="siffra mellan 1-6 här" face="typsnittets namn här">
ORDET/MENINGEN DU VILL ÄNDRA PÅ SKRIVER DU HÄR
</font>

FÖRKLARING:
Där det står "färgkod här" får ni inte glömma att sätta ut detta tecknet: #, innan färgkoden. Sen om man inte vill ha någon speciell färg (t.ex. svart) så räcker det med att man skriver "black" istället för färgkoden. Koden fungerar bara i kodmallen!

Sen tror jag att ni förstår det mesta! :)

2011-12-05 @ 12:56:41 Permalink Allmänt Kommentarer (0) Trackbacks ()

Bild i menyn

Fick en fråga för ett tag sedan en fråga om hur om man får i in bilder i menyn. Så det hade jag tänkt att visa nu!

1. Börja med att ladda upp bilden du vill ha i menyn på din blogg (Gå först in på Skapa > sen Bild). Tänk på att menyn oftast inte är så bred, så att ladda upp bilden i 200px bredd räcker nog.

2. När bilden är uppladdad trycker du på den två gånger. Då kan du kopiera bildens url adress, d.s.v koden längst upp. Spara den koden någonstans (t.ex. i en anteckning) för du ska snart använda den.

3. Kopiera sedan den här koden:

<img src="BILDENS URL ADRESS HÄR">

4. Klistra sen in den i dina kodmallar någonstans under <div id="side"> för att den ska hamna i menyn. Där det står "bildens url adress här" ska du klistra in bilden url adress som du sparade innan.

5. Glöm nu inte att spara allt också så är det klart! :)

2011-11-01 @ 11:07:01 Permalink Allmänt Kommentarer (0) Trackbacks ()

Enkel bloggdesign

Det fick bli tre videos för att hela klippet var så långt heheee...

Koden för #header (headern)

#header { position: absolute; left: 200px; top: 50px; width: 600px; display: inline; background: transparent; }

Koden för #Side (menyn)

#side { position: absolute; left: 60px; top: 90px; width: 225px; display: inline; padding:0px 0px 0px; background: #FFFFFF; }

Koden för #content (inläggen)

div#content { position: absolute; font-family: arial; font-size: 13px; font-color: #7a7a7a;  top:500px;   left:300px;   float: right;   clear: right;   display: inline;   padding: 0 5px 5px 5px;   width: 692px; background: #ffffff; }

Koden för din header i kodmallen:

Hoppas ni förstår vad jag babblar om, det blev väldigt rörigt. Ni får kommentera annars så kan jag hjälpa er!

2011-07-12 @ 19:56:48 Permalink Allmänt Kommentarer (0) Trackbacks ()

Länkarna dras isär vid mouseover

Fick en fråga om hur man gör så att bokstäverna i en länk glider isär när man håller musen över länken. Tänkte besvara det nu!

1. Börja med att kopiera denna koden: letter-spacing:.2em;

2. Gå in i din stilmall och klistra in koden där du vill ha den. Om du vill ha den vid kommentarer, permalink osv ska det se ut så här:

Alltså lägger du in koden vid .entrymeta a:hover

3. Om du vill ha den i menyn såhär:

Alltså vid .nav a:hover

4. Om du vill ha den i inläggen såhär:

Alltså vid a:hover

Kommentera ifall ni undrar något!

2011-06-26 @ 14:20:00 Permalink Allmänt Kommentarer (0) Trackbacks ()

Lägg in en egen bild som header

Nu tänkte jag visa hur man lägger in en egen bild som header! Hoppas att ni förstår (om ni inte gör det är det bara att fråga)

1. Du börjar med att göra en bild som du vill ha som header och ladda upp den på din blogg. Du kan göra bilden i ett vanligt bildpogram som paint eller Picasa 3, eller om du har photoshop kan du ju göra det där med. Jag gör mina headers i Photoshop elements 8.

Jag brukar ladda upp min header i 900 pixlar men det beror på hur stor bilden och bloggen är men ni får helt enkelt testa er fram.

2. När du har laddat upp bilden så ser det ut så här:

Då trycker du på bilden och kopierar bildens adress (Ctrl+C)

Det som är markerat längst upp ska du kopiera.

3. Nu går du in i din stilmall (Först "design" och sen "Redigera stilmall") och letar upp kodavsnittet

#header {

Sen ska du kopiera denna koden: background: #FFFFFF url(adressen till din bild här) no-repeat right center; (inom parantesen ska du klistra in adressen till din bild)
och leta upp background: (som är markerat med rött och en tvåa på bilden) ta bort HELA den raden och ersätt den med koden du just kopierade. Alltså klistra in (Ctrl+V).

Nu är det bara att förhandsgranska och se så allt är bra och om den är väldigt liten eller stor får du ändra där det står width och height (längst ner i kodavsnittet header)

2011-06-16 @ 14:22:24 Permalink Allmänt Kommentarer (0) Trackbacks ()

Så får du en egen ikon i webbläsaren

Jag har fått några frågor om hur man skaffar sig en egen ikon uppe i webbläsaren istället för blogg.se ikonen och det tänkte jag visa er hur man gör:

1. Gör en bild som är 16x16 pixlar stor eller googla på: "pixel icons" eller liknande.

2. Ladda sedan upp bilden på din blogg och spara bildadressen (kopiera Ctrl + C)

3. Gå nu in i dina kodmallar och leta upp kodavsnittet </head> under det ska du klistra in (Ctrl + V) denna koden:

<LINK REL="SHORTCUT ICON"
HREF="Adressen till din bild här">

Där det står adressen till din bild här ska du klistra in adressen till din bid som du sparade. Tryck sedan på spara kodmall och gör likadant på dom andra mallarna.

KLART!

2011-06-16 @ 14:19:41 Permalink Allmänt Kommentarer (0) Trackbacks ()

Ta bort ramen runt headern

Fick en fråga om hur jag hade gjort så att min header flyter ihop med bakgrunden (alltså så att det inte blir en vit ram runt headern) och det finns många sätt att göra det på, det sättet jag har gjort är nog lättast att förklara men ändå svårt...

Det är dessa koder man får jobba lite med i stilmallen:

padding-left:

padding-bottom:

padding-top:

margin:

width:

height:

Utgå ifrån det du har och (oftast) minska värdet på siffrorna.

Sen måste du ändra en till sak, nämligen i kodavsnittet #wrapper. Om du bara bläddrar upp lite i stilmallen så ser du det.

Det du ska ändra är:

margin:

padding:

och kanske width: (det beror på om du har ändrat i #header)

Om du vill ha mer hjälp kan du gå in på designadinblogg.se. Du kommer direkt till inlägget. Men för mig stämde inte riktigt allt men ni kan ju försöka :D

Om ni undrar över något är det bara att fråga!

Lycka till

2011-06-16 @ 14:19:08 Permalink Allmänt Kommentarer (0) Trackbacks ()

Lägg in Rosa Bandet 2010 på bloggen

Hej, fick en fråga om hur jag har lagt in Rosa Bandet 2010 på bloggen och det är väldigt lätt så jag tänkte visa hur man gör :)

1. Börja med att kopiera denna kodsnutten:

<script type="text/javascript" src="http://kampanj.cancerfonden.se/blog_badge/js/badge.pack.js"></script>

2. Klistra in den under <div id="wrapper"> i kodmallen, glöm inte att spara och klistra in den i de andra kodammallarna också ;)

3. RESULTAT:

Hoppas ni förstod och om ni har några frågor är det bara att kommentera!

Puss&Kram♥

2011-06-16 @ 14:18:23 Permalink Allmänt Kommentarer (0) Trackbacks ()

Bloggdesign tips från julkalendern 2010

Här har jag tagit alla luckor från julkalendern 2010 som det gömde sig bloggdesign tips bakom ;) Hoppas ni uppskattar detta!

(Tryck på bilderna för att komma till tipset)

10 - Gratis stilmall

11 - Jobba med rubrikerna i menyn

12 - Jobba med kommentarsfältet

15 - Få fixerad bakgrund på bloggen

16 - Bård eller liknande i bakgrunden (längst upp)

20 - Hur gör man mouseover bilder?

21 - Skugga bakom rubrikerna

23 - Enkla HTML grundkoder

2011-06-16 @ 14:17:36 Permalink Allmänt Kommentarer (0) Trackbacks ()

Sträck under rubrikerna i menyn

border-top-width: 0px;

border-top-style: solid;

border-top-color: #959595;

border-bottom-width: 1px;

border-bottom-style: dotted;

border-bottom-color: #959595;

Fick en fråga om hur jag har gjort så att det blir ett streck under rubrikerna i menyn, t.ex:

Det strecket under Senaste Nytt

1. Börja med att kopiera denna koden:

border-bottom-width: 1px; /* Hur tjock strecket ska vara */

border-bottom-style: dotted; /* Vilken "stil" strecket ska vara t.ex: solid, dotted, dashed m.m */

border-bottom-color: #959595; /* Vilken färg strecket ska ha */

2. Gå nu in under design >> redigera stilmall och bläddra ner till kodavsnittet .navheader. Klistra in koden du kopierade någonstans i den kodsnutten under navheader, t.ex längst ner.

3. Förhandsgranska och se så att det ser bra ut och spara!

Om ni har några frågor är det bara att slänga in en kommentar ;)

Kram♥

2011-06-16 @ 14:16:04 Permalink Allmänt Kommentarer (0) Trackbacks ()

Lägg till en bild i kommentarsfältet

Det var en tjej som undrade hur man gör för att lägga in en bild i kommentarsfältet, så som jag har det där det står lite olika punkter man ska tänka på innan man kommenterar. Så det tänkte jag visa nu!

Det är denna bilden jag menar ;)

1. Börja med att göra en bild du vill ha och ladda upp den på bloggen. Storleken beror på hur stor din content är vilket du bara kan gå in och kolla i stilmallen innan du laddar upp bilden. Kopiera sedan bildadressen.

2. Gå nu in i dina kodmallar och bläddra i rullgardinsmenyn till inläggssidan. Leta sedan upp följande (se bild)

Det gråa är koden du ska klistra in senare...

Det ser olika ut i nästan alla kodmallar, men om ni trycker på Ctrl + F så kommer det upp en sökruta, skriv i <input type och tryck enter. Då kommer du hit (som på bilden) och precis efter hela koden som börjar med <input type och slutar med > (det är olika för nästan alla så därför kan jag inte skriva exakt) klistrar du in denna koden:

<img src="BILDADRESSEN HÄR">

Sedan sparar du och ser om det ser bra ut. Pröva dig fram helt enkelt! Då lär du dig mer :D Du kan även ta hjälp av inlägger "HTML grundkoder". Har du några frågor? Var inte rädd för att ställa dem!

LYCKA TILL♥

2011-06-16 @ 14:15:05 Permalink Allmänt Kommentarer (0) Trackbacks ()

Ändra stora bokstäver till små

Fick en fråga om hur man ändrar bokstäverna i rubrikerna på bloggen till små istället för stora, så tänkte ta det lite kort.

Leta upp kodavsnittet h3 (entry headers) i stilmallen. Där finns det en kod som heter text-transform: uppercase; Skriv text-transform: none; om du vill ha små bokstäver istället, se bilden:

Detta fungerar även med rubrikerna i menyn. Det gör du genom att bläddra ner lite i stilmallen till kodavsnittet navheader så ska den koden finnas där med ;)

LYCKA TILL♥

2011-06-16 @ 14:12:22 Permalink Allmänt Kommentarer (0) Trackbacks ()

Fixerad bakgrund (så den ligger stilla)

Ett litet tips jag tänkte ge er idag (kommer från julkalendern) tänkte berätta hur man gör för att få bakgrunden på sin blogg fixerad, alltså att den sitter still när man scrollar neråt.

Det är väldigt lätt att få den så, det ni ska göra är att lägga in denna koden under kodavsnittet body (längst upp i stilmallen)

background-attachment: fixed;

Så här kan det se ut:

Ni ser body längst upp och den gråmarkerade koden är den ni ska klistra in.

Svårare än så är det inte :D

2011-06-16 @ 14:11:29 Permalink Allmänt Kommentarer (0) Trackbacks ()

Mouseover bilder

Här kommer ett tips från julkalendern! Tänkte berätta hur man gör mouseoverbilder (bilden ändras när man håller musen över den). Hoppas ni kommer ha nytta av det :D

1. Börja med att göra två bilder - en som du använder som vanligt och en bild som kommer upp när man håller musen över den "vanliga bilden". Ladda sedan upp dom på din blogg och spara bildadresserna.

2. Kopiera sedan denna koden och lägg över </head> i alla kodmallarna.

<mce:script LANGUAGE="JavaScript"><!-- // This is the implementation of SimpleSwap // by Jehiah Czebotar // Version 1.1 - June 10, 2005 // Distributed under Creative Commons // // Include this script on your page // then make image rollovers simple like: // <img src="/images/ss_img.gif" mce_src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif"> // // http://jehiah.com/archive/simple-swap // function SimpleSwap(el,which){ el.src=el.getAttribute(which || "origsrc"); } function SimpleSwapSetup(){ var x = document.getElementsByTagName("img"); for (var i=0;i<x.length;i++){ var oversrc = x[i].getAttribute("oversrc"); if (!oversrc) continue; // preload image // comment the next two lines to disable image pre-loading x[i].oversrc_img = new Image(); x[i].oversrc_img.src=oversrc; // set event handlers x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');"); x[i].onmouseout = new Function("SimpleSwap(this);"); // save original src x[i].setAttribute("origsrc",x[i].src); } } var PreSimpleSwapOnload =(window.onload)? window.onload : function(){}; window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();} // --></mce:script>

3. Nu ska du lägga in bilden/bilderna och det gör du med hjälp av denna kod:

<a onfocus="blur()" href="länkadressen" mce_href="/1901887/entries/article/105719780/länkadressen"><img src="adressen till bild 1" mce_src="/1901887/entries/article/105719780/adressen till bild 1" oversrc="adressen till bild 2" border="0"/></a>

Du lägger in koden i kodmallarna där du vill ha mouseoverbilden. T.ex. om du vill ha den i menyn lägger du den någonstans under <div id="side">

4. Om du bara vill ha mouseoverbilder, alltså utan länk så att man inte kan klicka på dom lägger du in denna kod istället:

<img src="adressen till bild 1" mce_src="/1901887/entries/article/105719780/adressen till bild 1" oversrc="adressen till bild 2" border="0">;

KLART

Om du undrar över något är det bara att fråga!
Puss&Kram♥

2011-06-16 @ 14:10:51 Permalink Allmänt Kommentarer (0) Trackbacks ()

HTML grundkoder

(från julkalendern) Idag tänkte jag visa de enklaste html - grundkoderna som man ofta har nytta av (i kodmallen)

Mellanslag:

 

Fet stil:

<b>DIN TEXT HÄR</b>

Kursiv stil:

<i>DIN TEXT HÄR</i>

Understruken text:

<u>DIN TEXT HÄR</u>

Överstruken text:

<strike> DIN TEXT HÄR</strike>

Byt "rad - hoppa ner ett snäpp":

<br>

Lägg in en bild:

<img src="DIN BILDADRESS HÄR">

Lägg in en länkad bild:

<a href="ADRESSEN TILL SIDAN"><img src="DIN BILDADRESS HÄR" border="0"></a>

Lägg in en vanlig länk:

<a href="LÄNK TILL SIDAN HÄR">LÄNKTEXT HÄR</a>

Centrera något:

<center>DIN BILD/TEXT HÄR</center>

Tror att det var dom flesta, i alla fall det jag kunde komma på men om ni saknar något så är det bara att fråga eller kommentera :D

Puss&Kram♥

2011-06-16 @ 14:10:19 Permalink Allmänt Kommentarer (0) Trackbacks ()

Hur man gör en transparent header

Alltså, istället för färgkoden (tex: #FFFFFF = Vit) skriver ni transparent.

Inte världens bästa video men jag hoppas ni förstår i alla fall, annars får ni lämna en kommentar som sagt ;)

2011-06-16 @ 14:09:09 Permalink Allmänt Kommentarer (1) Trackbacks ()

Tidigare inlägg