Ändra färg på rubrikerna i menyn
Ändra färg på rubrikerna i menyn gör du detta i stilmallen
Bläddra ner till denna koden och ändra där det står color:
Bläddra ner till denna koden och ändra där det står color:
Ändra storlek på rubrikerna i menyn
Om man vill ändra storleken på rubrikerna i menyn gör man detta i stilmallen
Bläddra ner till denna koden, se bild nedan
Ändra storleken där det står font-size:16px;
Förhandsgranska och spara när du är nöjd.
Bläddra ner till denna koden, se bild nedan
Ändra storleken där det står font-size:16px;
Förhandsgranska och spara när du är nöjd.
Ändra färg vid mouseover på horisontell meny
Vissa kanske undrar hur man ändrar på färg på meny flikarna när man drar musen över, detta ändrar man i stilmallen, man kan ändra till vilka färger man vill på bakgrund, text och ram.
Exempel:
1. Kopiera denna koden och lägg den längst ner i din stilmall:
2. Kopiera denna koden:
3. Klistra in i kodmallen efter denna koden: (om du redan har en horisontell meny behöver du ej göra detta)
4. Nu ska får du lägga in dina kategorier eller vad du ska ha där det står "kategori" och "länk"
Mer info om detta har jag förklarat i detta inlägget [Länk]
5. Nu ska du gå in i din stilmall och gå till den kod som du klistrat in, här kommer lite förklaring hur du ändrar utseende på menyn:
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 7px 24px; <----ökar avståndet mellan "kategorierna" och höjden
background: #000000; /*Ändra färgen på menyflikarna här*/ <----ändra bakgrunds färg på hela menyn
border-right: 1px solid #ffffff; <---ändra färg på linjen mellan varje kategori
color: #ffffff; /*Ändra färgen på texten här*/
text-decoration: none;
font-family:arial ; /*Ändra typsnittet här*/
font-size: 12px; } /*Ändra storleken på texten här*/
#navbar li a:hover {
color: #333333; <---ändra färg på texten vid mouseover
background:#ffffff; } <------ändrar färg vid mouseover
Exempel:
1. Kopiera denna koden och lägg den längst ner i din stilmall:
2. Kopiera denna koden:
3. Klistra in i kodmallen efter denna koden: (om du redan har en horisontell meny behöver du ej göra detta)
4. Nu ska får du lägga in dina kategorier eller vad du ska ha där det står "kategori" och "länk"
Mer info om detta har jag förklarat i detta inlägget [Länk]
5. Nu ska du gå in i din stilmall och gå till den kod som du klistrat in, här kommer lite förklaring hur du ändrar utseende på menyn:
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 7px 24px; <----ökar avståndet mellan "kategorierna" och höjden
background: #000000; /*Ändra färgen på menyflikarna här*/ <----ändra bakgrunds färg på hela menyn
border-right: 1px solid #ffffff; <---ändra färg på linjen mellan varje kategori
color: #ffffff; /*Ändra färgen på texten här*/
text-decoration: none;
font-family:arial ; /*Ändra typsnittet här*/
font-size: 12px; } /*Ändra storleken på texten här*/
#navbar li a:hover {
color: #333333; <---ändra färg på texten vid mouseover
background:#ffffff; } <------ändrar färg vid mouseover
Genomskinlig bakgrund på horisontell meny
För att ändra till en genomskinlig bakgrund vid mouseover på horisontell meny gör man detta i stilmallen.
Exempel
Innan:
Efter:
1. Kopiera denna koden:
2. Klistra in den här, se exempel:
3. För att ändra hur genomskinligt du vill ha ändrar du där det står 70 (viktigt att du ändrar alla)
Exempel: Om du vill ha den genomskinligare minskar du ner 70 till 40
Testa dej fram tills du blir nöjd genom att förhandsgranska och sedan spara.
Exempel
Innan:
Efter:
1. Kopiera denna koden:
2. Klistra in den här, se exempel:
3. För att ändra hur genomskinligt du vill ha ändrar du där det står 70 (viktigt att du ändrar alla)
Exempel: Om du vill ha den genomskinligare minskar du ner 70 till 40
Testa dej fram tills du blir nöjd genom att förhandsgranska och sedan spara.
Högerklicksskydd på din blogg
Högerklicksskydd har vissa för att man inte vill att någon ska kunna kopera något på sin sida.
1. kopiera denna koden:
<body oncontextmenu="return false">
2. Gå in i din kodmall och bläddre ner till body, ta bort body och klistra in koden, se exempel:
........................................................................
.........................................................................
.........................................................................
3. Gör nu samma sak på dom andra sidorna:
1. kopiera denna koden:
<body oncontextmenu="return false">
2. Gå in i din kodmall och bläddre ner till body, ta bort body och klistra in koden, se exempel:
........................................................................
.........................................................................
.........................................................................
3. Gör nu samma sak på dom andra sidorna:
Genomskinlig bakgrund på dropdown
För att få en genomskinlig bakgrund på dropdown menyn lägger man till en viss kod i stilmallen.
Om man inte vill ha en genomskinlig bakgrund tar man bort koden.
1. Kopiera denna koden:
2. Klistra in den i din stilmall, se exempel:
3. För att ändra hur genomskinligt du vill ha ändrar du där det står 70 (viktigt att du ändrar alla)
Exempel: Om du vill ha den genomskinligare minskar du ner 70 till 40
Testa dej fram tills du blir nöjd genom att förhandsgranska och sedan spara.
Om man inte vill ha en genomskinlig bakgrund tar man bort koden.
1. Kopiera denna koden:
2. Klistra in den i din stilmall, se exempel:
3. För att ändra hur genomskinligt du vill ha ändrar du där det står 70 (viktigt att du ändrar alla)
Exempel: Om du vill ha den genomskinligare minskar du ner 70 till 40
Testa dej fram tills du blir nöjd genom att förhandsgranska och sedan spara.
Flytta texten mer åt höger i meny
Vissa har kanske fått till texten så här i sin meny, exempel:
1. För att rätta till detta gå in i stilmallen och bläddra ner till div#side
2. För att göra det lättare ta bort denna koden: padding: 0 20px 0 0;
.......................................................
3. Skriv in denna koden, se bild nedan:
Förklaring:
padding-right = Hur långt texten ska flyttas inn från höger
padding-left= Hur långt texten ska flyttas inn från vänster
padding-top= Hur långt avstånd texten ska ha från uppifrån
padding-top= Hur långt avstånd texten ska ha från botten
Öka 7px; till högra siffra om du vill ha större mellanrum mellan text och meny kant, eller minska ner.
1. För att rätta till detta gå in i stilmallen och bläddra ner till div#side
2. För att göra det lättare ta bort denna koden: padding: 0 20px 0 0;
.......................................................
3. Skriv in denna koden, se bild nedan:
Förklaring:
padding-right = Hur långt texten ska flyttas inn från höger
padding-left= Hur långt texten ska flyttas inn från vänster
padding-top= Hur långt avstånd texten ska ha från uppifrån
padding-top= Hur långt avstånd texten ska ha från botten
Öka 7px; till högra siffra om du vill ha större mellanrum mellan text och meny kant, eller minska ner.
Ändra färg på länkar
För att ändra färg på dina länkar på din blogg gör du det i stilmallen.
Denna koden handlar det om, ändra färg genom att ändra färgkod och ändra färg vid mouseover
(ändrar färg när man håller muspekaren över )
Denna koden handlar det om, ändra färg genom att ändra färgkod och ändra färg vid mouseover
(ändrar färg när man håller muspekaren över )
Bloggdesign
En lite annorlunda design som jag har skapat från mina egna ider.
Designen innehåller:
- Dropdown meny men detta kan man ta bort om man inte vill ha det
- Två egna bilder till höger.
- En text i headern
- Fler egna bilder i högra menyn
Vid köp kontakta mej genom att skriva i bloggen eller via mail
Man diskuterar hur man ska ha designen sedan skickar man bilder och text via mail som man vill ha med i sin design.
Därefter börjar jag bygga på designen, när man sen är nöjd betalar man och jag skickar koderna som ni lägger in på eran blogg.
Jag kan även göra detta om man tycker det är svårt.
Mer info om köp finner du under fliken bloggdesign.
Beställnings design klar!
Skapa bilder i slideshow/widgets
Olika slideshows och widgets kan man skapa lätt med hjälp av sidan goodwidgets.com [Länk]
Ska visa steg för steg hur man går till väga.
Exempel:
1. Gå in på sidan och klicka på make a widget now
2. Klicka på någon widget
3. Då kommer detta upp och då fyller du i dina uppgifter och registrerar dej.
4. Logga sedan in på ditt konto, och ladda upp dina bilder, finns lite olika val man kan välja emellan.
5. Klicka sedan på save och configure.
6. Nu kommer du till sidan där du ska bestämma hur det ska se ut, se bild nedan.
När du är klar klickar du på save och där efter på Share.
7. Kopiera nu koden som du har fått.
8. Nu kan du lägga in koden var du vill på din blogg, i ett inlägg eller din meny, beror på var den passar in.
Du får prova dej fram, om du har frågor om var man kan lägga in den skriv så gör jag ett inlägg om det.
Ska visa steg för steg hur man går till väga.
Exempel:
1. Gå in på sidan och klicka på make a widget now
2. Klicka på någon widget
3. Då kommer detta upp och då fyller du i dina uppgifter och registrerar dej.
4. Logga sedan in på ditt konto, och ladda upp dina bilder, finns lite olika val man kan välja emellan.
5. Klicka sedan på save och configure.
6. Nu kommer du till sidan där du ska bestämma hur det ska se ut, se bild nedan.
När du är klar klickar du på save och där efter på Share.
7. Kopiera nu koden som du har fått.
8. Nu kan du lägga in koden var du vill på din blogg, i ett inlägg eller din meny, beror på var den passar in.
Du får prova dej fram, om du har frågor om var man kan lägga in den skriv så gör jag ett inlägg om det.
Tävling Vinn bloggdesign!
Nu har jag gjort en design med mycket färg och liv i, designen innehåller:
Tre egna bilder i headern.
En profilbild + text till vänster.
Bloggnamn i headern.
Kategorierna är i en horisontell meny i mitten som ändrar färg till mörkgrå bakgrund när man drar musen över.
Inläggningsrutan är 650px bred.
För att vinna denna design:
- Skriv lite kort varför just du ska vinna
- Skriv namn och bloggadress
- Lägg till mej på bloglovin
Du kan också se designen via denna länken [Länk]
Lycka till!
Denna tävling gäller er som har blogg.se
vinnare blev Evelina [Länk]
Tre egna bilder i headern.
En profilbild + text till vänster.
Bloggnamn i headern.
Kategorierna är i en horisontell meny i mitten som ändrar färg till mörkgrå bakgrund när man drar musen över.
Inläggningsrutan är 650px bred.
För att vinna denna design:
- Skriv lite kort varför just du ska vinna
- Skriv namn och bloggadress
- Lägg till mej på bloglovin
Du kan också se designen via denna länken [Länk]
Lycka till!
Denna tävling gäller er som har blogg.se
vinnare blev Evelina [Länk]
Klar med Matildas blogg
Köp info
När det gäller köp av design finns det två val, jag gör färdig design som dyker upp på min sida som man kan köpa direkt. Det andra är att man kan göra en beställning på en design.
Färdig design som inte är unika, från 100kr.
Färdig unik design från 150kr.
Beställning på en design, där du skriver hur du vill ha den från 300kr.
Jag bygger klart eran design på en underblogg, ni får se resultatet och ändra om det är något.
När man är nöjd sker betalning och ni får koderna som ni lägger in på eran blogg, om ni tycker detta är krångligt kan jag lägga in dem åt dej.
Jag använder mej av photoshop när det gäller redigering av foton och design.
Färdig design som inte är unika, från 100kr. Färdig unik design från 150kr. Beställning på en design, där du skriver hur du vill ha den från 300kr.Jag bygger klart eran design på en underblogg, ni får se resultatet och ändra om det är något.
När man är nöjd sker betalning och ni får koderna som ni lägger in på eran blogg, om ni tycker detta är krångligt kan jag lägga in dem åt dej.
Jag använder mej av photoshop när det gäller redigering av foton och design.
Ändra färg på en text i ett inlägg
För att ändra en viss text i ett inlägg till annan färg, gör du så här:
Skapa nytt inlägg, klicka på "Ändra redigerare" och klistra in denna koden:
<font color="#FFB6C1">text</font>
Din text ska vara där det står text och färgen ändrar du där det står #FFB6C1
Ändra till en annan färgkod med hjälp av photoshop eller html färger via google.
Skapa nytt inlägg, klicka på "Ändra redigerare" och klistra in denna koden:
<font color="#FFB6C1">text</font>
Din text ska vara där det står text och färgen ändrar du där det står #FFB6C1
Ändra till en annan färgkod med hjälp av photoshop eller html färger via google.
Ändra färg på länkar i inlägg
Ska visa två exempel hur ni kan ändra länken som ni vill i ett inlägg.
1. Gå in i eran stilmall till denna koden och ändra färg på länkarna
Nu kommer detta även ändra andra länkar på din blogg.
/* link colors */
a {
color: #d3d3d3; <-------Ändra färg på länken här
font-family: verdana,arial;
font-size: 11px;
}
a:hover {
color:#797979; <-----Ändra färg på länken här vid mouseover
font-family: verdana,arial;
}
2. Om du enbart vill ändra en länk i ett inlägg gör du så här:
Skapa ett nytt inlägg och klicka på ändra redigerare längst ner till höger
Lägg in denna koden:
<a href="länk"><font color="#FFB6C1">text</font></a>
Ändra länk, färg #FFB6C1 och text till det du vill.
1. Gå in i eran stilmall till denna koden och ändra färg på länkarna
Nu kommer detta även ändra andra länkar på din blogg.
/* link colors */
a {
color: #d3d3d3; <-------Ändra färg på länken här
font-family: verdana,arial;
font-size: 11px;
}
a:hover {
color:#797979; <-----Ändra färg på länken här vid mouseover
font-family: verdana,arial;
}
2. Om du enbart vill ändra en länk i ett inlägg gör du så här:
Skapa ett nytt inlägg och klicka på ändra redigerare längst ner till höger
Lägg in denna koden:
<a href="länk"><font color="#FFB6C1">text</font></a>
Ändra länk, färg #FFB6C1 och text till det du vill.
Ändra utseende på horisontell och dropdown meny
2010-03-25 | 15:42:09
Ändra utseende på horisontell och dropdown meny
6 kommentarer /
Kommentera här!
Ändra utseende på horisontell och dropdown meny
6 kommentarer /
Kommentera här!
För att ändra färg, teckensnitt och övrigt på horisontell och dropdown meny, gör du detta i stilmallen. För att skapa en dropdown meny [Länk]
Gå in i din stilmall och bläddra ner till denna koden:
#navbar {
margin: 0;
padding: 0;
height: 1em; }/*Hur hög menyn ska vara ändra 1 */
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding-left:0px; /*Hur stort avstånd det är mellan meny flikarna */
padding-right:0px; /*Hur stort avstånd det är mellan meny flikarna */
padding-top:5px; /*Hur hög menyn ska vara*/
padding-bottom:0px; /*Hur hög menyn ska vara */
background-color: none; /*Ändra färgen på menyflikarna här, byt ut none; till #333333; */
color: #000000; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: verdana; /*Ändra typsnittet här*/
font-size: 10px; } /*Ändra storleken på texten här*/
#navbar li ul {
display: none;
width: 11em; /* Ändra bredden på undermenyn här */
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #ffffff; /*Ändra färgen på bakgrund på undermenyn*/
border-bottom: 1px dotted #f0abc1; /*Ändra kanten runt om undermenyn */
color: #696969; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
color: #ffffff; /*Färg på texten */
background-color: #898888; } /*Ändra bakgrund när man håller musen över undermenyn*/
För att ändra färg och veta vilken färg du vill ha, kan du antingen använda photoshop eller sök på html färger på google. Ändra sifferkoden till den färg du vill ha exempel: #333333
Om du istället vill lägga in en egen bakgrund, leta upp denna koden:
background-color: none;
Ändra så det ser ut så här:
background-color: url (länk från din bild här);
Har ni några frågor är det bara att skriva :)
Gå in i din stilmall och bläddra ner till denna koden:
#navbar {
margin: 0;
padding: 0;
height: 1em; }/*Hur hög menyn ska vara ändra 1 */
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding-left:0px; /*Hur stort avstånd det är mellan meny flikarna */
padding-right:0px; /*Hur stort avstånd det är mellan meny flikarna */
padding-top:5px; /*Hur hög menyn ska vara*/
padding-bottom:0px; /*Hur hög menyn ska vara */
background-color: none; /*Ändra färgen på menyflikarna här, byt ut none; till #333333; */
color: #000000; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: verdana; /*Ändra typsnittet här*/
font-size: 10px; } /*Ändra storleken på texten här*/
#navbar li ul {
display: none;
width: 11em; /* Ändra bredden på undermenyn här */
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #ffffff; /*Ändra färgen på bakgrund på undermenyn*/
border-bottom: 1px dotted #f0abc1; /*Ändra kanten runt om undermenyn */
color: #696969; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
color: #ffffff; /*Färg på texten */
background-color: #898888; } /*Ändra bakgrund när man håller musen över undermenyn*/
För att ändra färg och veta vilken färg du vill ha, kan du antingen använda photoshop eller sök på html färger på google. Ändra sifferkoden till den färg du vill ha exempel: #333333
Om du istället vill lägga in en egen bakgrund, leta upp denna koden:
background-color: none;
Ändra så det ser ut så här:
background-color: url (länk från din bild här);
Har ni några frågor är det bara att skriva :)
Ändra muspekare
Man kan ändra muspekaren till ett kryss när man håller över tex en bild eller länk, man kan bestämma precis var man vill ha detta på bloggen, på vissa ställen eller att det är så hela tiden.
Ska visa lite exempel:
För att ändra muspekaren så den är så på hela bloggen
Lägg in denna koden i stilmallen: cursor: crosshair;
Den ska ligga här se exempel:
body {
cursor: crosshair;
För att ändra muspekaren på endast länkarna
Lägg in denna koden i stilmallen: cursor: crosshair;
Den ska ligga här se exempel:
/* link colors */
a {
cursor: crosshair;
color: #d3d3d3; text-decoration: none;
font-family: verdana,arial;
font-size: 11px;
}
a:hover {
cursor: crosshair;
color:#797979;
font-family: verdana,arial;
}
För att ändra muspekaren endast i menyn
Lägg in denna koden i stilmallen: cursor: crosshair;
Den ska ligga här se exempel:
#side {
cursor: crosshair;
position: absolute;
Detta var några exempel, testa er fram för hur ni vill ha det.
Ska visa lite exempel:
För att ändra muspekaren så den är så på hela bloggen
Lägg in denna koden i stilmallen: cursor: crosshair;
Den ska ligga här se exempel:
body {
cursor: crosshair;
För att ändra muspekaren på endast länkarna
Lägg in denna koden i stilmallen: cursor: crosshair;
Den ska ligga här se exempel:
/* link colors */
a {
cursor: crosshair;
color: #d3d3d3; text-decoration: none;
font-family: verdana,arial;
font-size: 11px;
}
a:hover {
cursor: crosshair;
color:#797979;
font-family: verdana,arial;
}
För att ändra muspekaren endast i menyn
Lägg in denna koden i stilmallen: cursor: crosshair;
Den ska ligga här se exempel:
#side {
cursor: crosshair;
position: absolute;
Detta var några exempel, testa er fram för hur ni vill ha det.
Skapa en ruta med kod
I mina inlägg har jag ibland en ruta med kod i för det ska vara lättare för folk att kopiera koden.
Detta kan man även lägga i menyn eller någon annanstans på sin blogg.
Exempel:
För att göra det i ett inlägg:
1. Skapa först ett nytt inlägg, klicka på "Ändra redigerare" längst ner till höger.
2. Så här ser koden ut och hur du lägger in det:
<textarea onclick="this.select();" cols="30" rows="2" readonly="readonly">
Din text här emellan
</textarea>
För att lägga in det i sin meny:
Det är samma sak fast man ändrar cols="50" som bestämmer bredden, ändra till tex 20 eller det som passar just din meny, och rows="2" bestämmer höjden.
Detta kan man även lägga i menyn eller någon annanstans på sin blogg.
Exempel:
För att göra det i ett inlägg:
1. Skapa först ett nytt inlägg, klicka på "Ändra redigerare" längst ner till höger.
2. Så här ser koden ut och hur du lägger in det:
<textarea onclick="this.select();" cols="30" rows="2" readonly="readonly">
Din text här emellan
</textarea>
För att lägga in det i sin meny:
Det är samma sak fast man ändrar cols="50" som bestämmer bredden, ändra till tex 20 eller det som passar just din meny, och rows="2" bestämmer höjden.
Redigera bilder med Pixlr Grabber
Egna bilder i horisontell meny
Skapa en egen bild i din meny med hjälp av tex photoshop
Nu syns kanske inte detta på bilden att jag gjort detta men jag har laggt på en skugga och gjort dem
så stora som jag vill, även att dom ändrar färg när man håller musen över, ska visa hur man gör detta med.
1. Skapa din bild först i photoshop.
Ladda upp bilden på din blogg och kopiera länken.
2. Gå in i din kodmall och bläddra ner till din meny, så här ser det ut nu:
<li><a href="#"> Kategori </a>
Kopiera denna koden:
<img src="länk till din bild">
Så det ser ut så här:
<li><a href="#"> <img src="länk till din bild"> </a>
Spara och se hur det blev, gör nu resten på dom andra.
3. Gå in i stilmallen, bläddra ner till denna koden, ändra så det ser ut så här:
Hur ni gör för att ändra bilden när man håller musen över
Gör bilden i photoshop och ladda upp och lägg in den i kodmallen så koden ser ut så här:
<li><a href="#"> <img src="Bild 1" oversrc="bild 2" border="0"> </a>
Lägg in länken från bilden där det står bild 2 och den första bilden på bild 1
Hoppas ni förstår skriv annars om ni har några frågor.
Nu syns kanske inte detta på bilden att jag gjort detta men jag har laggt på en skugga och gjort dem
så stora som jag vill, även att dom ändrar färg när man håller musen över, ska visa hur man gör detta med.
1. Skapa din bild först i photoshop.
Ladda upp bilden på din blogg och kopiera länken.
2. Gå in i din kodmall och bläddra ner till din meny, så här ser det ut nu:
<li><a href="#"> Kategori </a>
Kopiera denna koden:
<img src="länk till din bild">
Så det ser ut så här:
<li><a href="#"> <img src="länk till din bild"> </a>
Spara och se hur det blev, gör nu resten på dom andra.
3. Gå in i stilmallen, bläddra ner till denna koden, ändra så det ser ut så här:
Hur ni gör för att ändra bilden när man håller musen över
Gör bilden i photoshop och ladda upp och lägg in den i kodmallen så koden ser ut så här:
<li><a href="#"> <img src="Bild 1" oversrc="bild 2" border="0"> </a>
Lägg in länken från bilden där det står bild 2 och den första bilden på bild 1
Hoppas ni förstår skriv annars om ni har några frågor.
Ikon i dropdown meny
Skapa en ikon bild innan länk i din dropdown meny
Hur du skapar en dropdown meny [Länk]
1. Ladda upp den bild du vill ha, (ladda inte upp för stor bild) kopiera sedan länken till bilden.
2. Så här ska det se ut, se nedan, klistra in länken där det står "länken till din bild"
<li> <a href="Länk"> <img src="Länk till din bild"> Text och typsnitt </a> </li>
Hur du skapar en dropdown meny [Länk]
1. Ladda upp den bild du vill ha, (ladda inte upp för stor bild) kopiera sedan länken till bilden.
2. Så här ska det se ut, se nedan, klistra in länken där det står "länken till din bild"
<li> <a href="Länk"> <img src="Länk till din bild"> Text och typsnitt </a> </li>
Dropdown meny Tips 2
Dropdown meny med tex dina kategorier
1. Kopiera denna koden:
2. Gå in i kodmallen och klistra in koden efter:
3. Kopiera denna koden och lägg den längst ner i stilmallen:
Nu ska jag förklara hur man lägger in Rubrik och länkarna under
Exempel:
<li><a href="#"> Foto </a>
<ul>
<li><a href="länk"> Landskap </a> </li>
<li><a href="länk"> Djur </a> </li>
<li><a href="länk"> Människor</a> </li>
</ul>
</li>
När du skapat en kategori "Landskap" och gjort ett inlägg, klickar du på
landskap, kopierar länken och klistrar in där det står länk.
Mer förklaring finns i detta inlägget [Länk]
Horisontell meny
Om du vill ha en horisontell meny utan dropdown, gör du så här:
2. Klistra in den efter denna koden i kodmallen:
3. Kopiera denna koden och klistra in längst ner i stilmallen:
Nu ska jag förklara hur du lägger in dina kategorier och länkar:
1. Skapa först dina kategorier se i detta inlägget hur man gör [Länk]
2. När du skrivit ett inlägg klickar du på kategorin, se bild:
3. Kopiera länken
4. Gå in i din kodmall och klistra in länken där det står "länk" se nedan:
1. Kopiera denna koden:
2. Klistra in den efter denna koden i kodmallen:
3. Kopiera denna koden och klistra in längst ner i stilmallen:
Nu ska jag förklara hur du lägger in dina kategorier och länkar:
1. Skapa först dina kategorier se i detta inlägget hur man gör [Länk]
2. När du skrivit ett inlägg klickar du på kategorin, se bild:
3. Kopiera länken
4. Gå in i din kodmall och klistra in länken där det står "länk" se nedan:
<li> <a href="Länk"> Rubrik1 </a> </li>
Byt ut Rubrik1 till vad du vill ha, spara sedan och gör samma sak på dom andra.
Vill du ha mindre kategorier tar du bort <li> <a href="Länk"> Rubrik </a> </li>
Vill du har fler lägger du bara till fler <li> <a href="Länk"> Rubrik </a> </li>
Vill du ha en kategori som länk till annan sida bara gör du bara samma sak, kopierar länken till sidan och lägger in där det står länk...svårare änn så är det inte.
För att få menyn under eller över headern se detta inlägget [Länk]
Dropdown meny Tips 1
Skapa en dropdown meny kan man göra på olika vis och jag ska visa lite exempel
Tips 1 skapa en meny med senaste inlägg, kategorier...se bild nedan.
1. Börja med att gå in i dn kodmall och bläddra ner till <div id="side">
2. Ta bort denna koden:
3. Kopiera denna koden:
4. Klistra in koden direkt efter denna koden:
5. Kopiera denna koden och lägg längst ner i din stilmall:
Spara och så var det klart.
För att ändra färg på menyn gör du det i koden du klistra in i stilmallen.
För att ta bort det genomskinliga i menyn, ta bort denna koden i stilmallen:
/* opacitet for IE */
filter:alpha(opacity=70);
/* opacity: 0.70; filter: alpha(opacity=70); */
/* opacitet CSS3 standard */
opacity:0.70;
/* opacitet for Mozilla */
-moz-opacity:0.70;
Om du vill ha headern över eller under menyn, flyttar du koden till headern
över eller under koden du klistra in i kodmallen.
<img src="LÄNK TILL DIN HEADER">
Skapa en blogg
Nu ska jag visa hur man skapar en blogg hos blogg.se [länk]
1. Klicka på "skapa din egen blogg"
2. Fyll i dina uppgifter, önskat bloggnamn, mail och lösenord och skapa konto.
3. Nu ska du kolla din mail och vertifiera dej.
4. Logga sedan in på din blogg genom att skriva in din e-postadress och lösenord.
Nu ska jag förklara lite hur man skriver inlägg, skapar olika kategorier och länkar:
1. Klicka på kategorier och skapa ny kategori
2. Fyll i en kategori tex Foton och lägg till.
3. Klicka nu ett inlägg genom att klicka på skapa och inlägg, se bild nedan
Spara sedan inlägget i den kategori som du har skapat och spara så ska det vara klart, svårare änn så är det inte.
Nu ska jag visa hur du lägger in och tar bort länkar på din blogg
Så här ser det ut just nu på din nya blogg, se länkar:
1. Ta bort länkar, gå in på arkiv och länkar.
Marke dem som du vill ta bort och klicka ta bort markerade.
2. Lägg till en länk genom att klicka på skapa och länk, se exempel nedan:
Vill ni veta mer om hur något funkar så lägger jag upp det här.
1. Klicka på "skapa din egen blogg"
2. Fyll i dina uppgifter, önskat bloggnamn, mail och lösenord och skapa konto.
3. Nu ska du kolla din mail och vertifiera dej.
4. Logga sedan in på din blogg genom att skriva in din e-postadress och lösenord.
Nu ska jag förklara lite hur man skriver inlägg, skapar olika kategorier och länkar:
1. Klicka på kategorier och skapa ny kategori
2. Fyll i en kategori tex Foton och lägg till.
3. Klicka nu ett inlägg genom att klicka på skapa och inlägg, se bild nedan
Spara sedan inlägget i den kategori som du har skapat och spara så ska det vara klart, svårare änn så är det inte.
Nu ska jag visa hur du lägger in och tar bort länkar på din blogg
Så här ser det ut just nu på din nya blogg, se länkar:
1. Ta bort länkar, gå in på arkiv och länkar.
Marke dem som du vill ta bort och klicka ta bort markerade.
2. Lägg till en länk genom att klicka på skapa och länk, se exempel nedan:
Vill ni veta mer om hur något funkar så lägger jag upp det här.
Statistikräknare med flag counter
Vill du ha en liten mer rolig 
statistiksräknare där du kan se om någon har besökt din blogg från annat land men även sverige såklart visas så kan du lätt skaffa det med Flag counter, gå in på denna [Länk]
Nu finns det lite olika saker man kan göra:
- Ändra färg på bakgrund, text och ram
- Välj hur många flaggor som ska synnas
När du är klar klickar du på Get your flag counter, kopiera koden i rutan högst upp.
Klistra in koden i din kodmall, bläddra ner till <div id="side">
Klistra in koden innan:
<div>
<a href="index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>
</div>
Vill du ha den i mitten (centrerad)
Skriver du precis innan koden <center>
och efter koden </center>
Spara och se hur det blev.
statistiksräknare där du kan se om någon har besökt din blogg från annat land men även sverige såklart visas så kan du lätt skaffa det med Flag counter, gå in på denna [Länk]Nu finns det lite olika saker man kan göra:
- Ändra färg på bakgrund, text och ram
- Välj hur många flaggor som ska synnas
När du är klar klickar du på Get your flag counter, kopiera koden i rutan högst upp.
Klistra in koden i din kodmall, bläddra ner till <div id="side">
Klistra in koden innan:
<div>
<a href="index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>
</div>
Vill du ha den i mitten (centrerad)
Skriver du precis innan koden <center>
och efter koden </center>
Spara och se hur det blev.
Lägg in statistikräknare på din blogg
1. Logga in på http://www.susnet.se/
2. Registrera dej
3. När du loggat in klickar du på statistikmätaren
4. Klicka på ny statistikmätare och sedan på räknarkoder
5. Kopiera koder och klistra in i kodmallen, Klistra in koden på raden innan </head>
6.Klistra in det som står nedan i kodmallen där du vill ha din räknare, nånstans nedanför <body>
<table>
<tr>
<td colspan="2"><b>Mina besökare</b></td>
</tr>
<tr>
<td>Totalt:</td>
<td>Klistra in koden från susnet här</td>
</tr>
<tr>
<td>Denna månad:</td>
<td>Koden från susnet här</td>
</tr>
<tr>
<td>Denna vecka:</td>
<td>Koden från susnet här</td>
</tr>
<tr>
<td>Idag:</td>
<td>Koden från susnet här</td>
</tr>
<tr>
<td>Online nu:</td>
<td>Koden från susnet här</td>
</tr>
</table>
7.
Kopiera tex: antal besökare denna vecka och klistra in i koden på punkt 6 där det står koden från susnet här.
8. Om du inte vill ha med tex antal besökare denna vecka osv tar du bort denna koden:
<tr>
<td>Denna vecka:</td>
<td>Koden från susnet här</td>
</tr>
När du är klar spara och se hur det blev.
Lägg in bloglovin ikon på din blogg
1. Logga in på ditt konto på bloglovin
2. Klicka på konto och knappar/ikoner
3. Välj den ikon du vill ha, "skaffa den här ikonen" och kopiera koden som dök upp.
4. Gå in i din kodmall och bläddra ner till <div id="side"> och lägg koden direkt efter.
Spara så ska det vara klart!
Klocka på bloggen
Det är mycket lätt att lägga upp en klocka på sin blogg, klicka in på denna sidan: [Länk]
Där finns det flera olika varianter man kan välja bland.
Klicka på View html tag och accept
Nu ska du välja vilken färg du vill ha, storlek och ställa in rätt tid
Tex GTM +18
Kopiera den översta koden och klistra in den i kodmallen någonstans mellan <div id="side"> </div>
Spara och se hur det blev, funka inte första koden prova den andra.
Fler tips på sidor:
- timeanddate.com
- worldtimeserver.com
- respectsoft.com
- mlsisland.com
Ta bort texten i headern
1. Gå in i din kodmall och ta bort denna koden som är markerat:
2. Gör nu samma sak på de andra sidorna:
inläggssida
kategorisida
arkivsida
2. Gör nu samma sak på de andra sidorna:
inläggssida
kategorisida
arkivsida
Tjäna pengar med Double.net
På sidan double.net hittar du massor av reklam du kan välja bland och lägga in på din blogg, på så sätt tjäna pengar. Du kan anpassa reklam efter just din sida, vad den handlar om tex mode då lägger du in reklam om mode. Allt detta är mycket lätt och jag ska förklara hur man gör.
För att bli medlem på sidan måste du vara 18år.
1. Gå först in på sidan double.net klicka på bilden nedan
2. Bli medlem på sidan genom att klicka på Publisher
3. Fyll i samtliga uppgifter
4. När du är klar klicka på skicka ansökan, du kommer få besked till din mail, detta kan ta några dagar.
5. När du blivit godkänd loggar du in på sidan
6. Klicka på välj program
7. Nu kan du välja att bläddra mellan alla eller välj den kategori som passar dej, klicka sedan på visa annonser.
8.
1 Ansök först till det program du vill ha, det går igenom direkt eller några dagar.
Det kommer upp en liten info höhst upp.
2 När det har gått igenom klickar du på förhandsvisa annonser
3 Klicka på banner
4 kolla så höjd och bred passar i tex din meny, detta kan du gå in i din stilmall och se hur bred den är i width.
5 Nu klickar du på skapa annonskod
9. Kopiera koden du fick och gå in i din kodmall och klistra in den, exemplet jag hade över passar i inläggs spalten eller över headern...
Ändra inget i koden du fick för då funkar det inte!
Nu är det bara att spara och se hur det blev, hoppas att detta inlägget har hjälpt er något.
För att bli medlem på sidan måste du vara 18år.
1. Gå först in på sidan double.net klicka på bilden nedan
2. Bli medlem på sidan genom att klicka på Publisher
3. Fyll i samtliga uppgifter
4. När du är klar klicka på skicka ansökan, du kommer få besked till din mail, detta kan ta några dagar.
5. När du blivit godkänd loggar du in på sidan
6. Klicka på välj program
7. Nu kan du välja att bläddra mellan alla eller välj den kategori som passar dej, klicka sedan på visa annonser.
8.
1 Ansök först till det program du vill ha, det går igenom direkt eller några dagar.
Det kommer upp en liten info höhst upp.
2 När det har gått igenom klickar du på förhandsvisa annonser
3 Klicka på banner
4 kolla så höjd och bred passar i tex din meny, detta kan du gå in i din stilmall och se hur bred den är i width.
5 Nu klickar du på skapa annonskod
9. Kopiera koden du fick och gå in i din kodmall och klistra in den, exemplet jag hade över passar i inläggs spalten eller över headern...
Ändra inget i koden du fick för då funkar det inte!
Nu är det bara att spara och se hur det blev, hoppas att detta inlägget har hjälpt er något.
Ställ en fråga
Behöver ni hjälp med eran blogg, ställ en fråga här så ska jag försöka svara på dem.
Få bilderna att synas på Bloglovin
När man har skrivit ett inlägg i sin blogg med en bild till så vill man att den ska synas på bloglovin.
För vissa gör inte detta och då ska jag förklara lätt hur ni gör :)
Klicka på inställningar och blogg, där ser ni att ni ska kryssa i "Lämna ut hela inlägg i RSS-flödet"
Spara sedan så ska det funka :)
För vissa gör inte detta och då ska jag förklara lätt hur ni gör :)
Klicka på inställningar och blogg, där ser ni att ni ska kryssa i "Lämna ut hela inlägg i RSS-flödet"
Spara sedan så ska det funka :)
Röstformulär på din blogg
Om du vill snabbt skapa en undersökning på din blogg, kan du gå in på denna [Länken]
Jag har kollat runt och denna är nog den bästa och lättaste funktionen!
Man behöver inte bli medlem på sidan, man ställer in de färger man vill ha på text, bakgrund och teckensnitt.
När du fyllt i allt så klickar du på Get poll code
Då kommer din kod upp, du kan också ändra om du vill ha den som dropdown, eller som vanligt...
Kopiera koden och klistra in den någonstans mellan <div id="side"> </div> i Kodmallen
Jag har kollat runt och denna är nog den bästa och lättaste funktionen!
Man behöver inte bli medlem på sidan, man ställer in de färger man vill ha på text, bakgrund och teckensnitt.
När du fyllt i allt så klickar du på Get poll code
Då kommer din kod upp, du kan också ändra om du vill ha den som dropdown, eller som vanligt...
Kopiera koden och klistra in den någonstans mellan <div id="side"> </div> i Kodmallen
Ta bort "om" i menyn
Vill du ta bort länken Om i menyn ska du ta bort koden:
<h4> Om </h4> i din kodmall.
Är någonstans under koden <div id="side">
För att ta bort profilbilden och namn ta bort denna koden:
<div id="profile">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<h4>Om</h4>
<a href="${AppUrl}index.bd?fa=pf.view&pf_id=${ProfileID}"><img
class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
<p><a href="${AppUrl}index.bd?
fa=pf.view&pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}
</span></a></p>
</tag:if>
</tag:profile>
<h4> Om </h4> i din kodmall.
Är någonstans under koden <div id="side">
För att ta bort profilbilden och namn ta bort denna koden:
<div id="profile">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<h4>Om</h4>
<a href="${AppUrl}index.bd?fa=pf.view&pf_id=${ProfileID}"><img
class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
<p><a href="${AppUrl}index.bd?
fa=pf.view&pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}
</span></a></p>
</tag:if>
</tag:profile>
När du ändrar i kodmallen ska du ändra på alla sidor. Detta är viktigt annars ändras det bara på den sidan du sparat. Även viktigt att spara innan du byter till nästa del.
Tävling Vinn bloggdesign!
Nu ska jag ha en till Tävling!
En helt unik design skapat av mej med lite vårig inspiration och modern design.
Vinnaren väljer antingen denna design eller någon av mina andra 1, 2 och 3.
För att vinna denna design:
- Skriv lite kort varför just du ska vinna
- Skriv namn och bloggadress
- Lägg till mej på bloglovin
Du kan också skriva upp dej via denna [Länken]
Denna tävlingen gäller er som har en blogg hos blogg.se
Lycka till!
Vinnare blev Albas och Johannas blogg och Matilda
En helt unik design skapat av mej med lite vårig inspiration och modern design.
Vinnaren väljer antingen denna design eller någon av mina andra 1, 2 och 3.
För att vinna denna design:
- Skriv lite kort varför just du ska vinna
- Skriv namn och bloggadress
- Lägg till mej på bloglovin
Du kan också skriva upp dej via denna [Länken]
Denna tävlingen gäller er som har en blogg hos blogg.se
Lycka till!
Vinnare blev Albas och Johannas blogg och Matilda
Klar med Lottas design
Vinnare i bloggdesign tävlingen blev Lotta och här är hennes nya design jag gjorde klar idag :)
[Länk]
[Länk]
Få en ikon i din browser
Först hittar du en bild du gillar i rätt format 16x16px tex
Du hittar fler på min sida [Länk]
1. Ladda upp bilden på din blogg, klicka på bilden och kopiera länken till bilden
Klistra in länken i denna koden:
<link rel="shortcut icon" href=" din länk ">
2. Gå nu in i din kodmall och klistra in koden under <head>
Gör nu detta på alla sidor och spara så ska det vara klart, nu vet jag att detta funkar i firefox men inte i internet explorer för vissa.
Twitter fåglar till din blogg
Lägg in en animation på din blogg
Det är mycket lätt att lägga in en animation, samma sak som att lägga in en egen bild på sin blogg.
Nu ska jag visa hur man gör om man vill ha i ett inlägg eller i sin meny, såklart kan man lägga den på andra ställen med på bloggen, skriv isåfall så ska jag förklara.
Hur man lägger in i menyn:
1. Kopiera först den bild du vill ha och ladda upp på din blogg, klicka sedan på bilden och kopiera länken till bilden som kommer upp.
2. Kopiera denna koden:
<img src=" länken till din bild ">
Lägg in länken från din bild där det står länken till din bild
3. Gå nu in i din kodmall och bläddra ner till <div id="side">
Lägg in koden någonstans mellan <div id="side"> och </div>
Och spara och se hur det blev.
Animations bild i ett inlägg:
Klicka först på skapa och sedan på det "lilla trädet" det står infoga bild, där skickar du upp din bild du har på din dator, mycket lätt :)
Nu ska jag visa hur man gör om man vill ha i ett inlägg eller i sin meny, såklart kan man lägga den på andra ställen med på bloggen, skriv isåfall så ska jag förklara.
Hur man lägger in i menyn:
1. Kopiera först den bild du vill ha och ladda upp på din blogg, klicka sedan på bilden och kopiera länken till bilden som kommer upp.
2. Kopiera denna koden:
<img src=" länken till din bild ">
Lägg in länken från din bild där det står länken till din bild
3. Gå nu in i din kodmall och bläddra ner till <div id="side">
Lägg in koden någonstans mellan <div id="side"> och </div>
Och spara och se hur det blev.
Animations bild i ett inlägg:
Klicka först på skapa och sedan på det "lilla trädet" det står infoga bild, där skickar du upp din bild du har på din dator, mycket lätt :)
Söta animationer till bloggen
Lägger upp lite blandat med animationer ni kan ta del av och lägga på eran blogg, med tiden kommer det fyllas på mer.
Ni som undrar hur man lägger in en animation i eran blogg kan ni klicka här.
Den här söta kissen var jag bara tvungen att ta med :)
Ni som undrar hur man lägger in en animation i eran blogg kan ni klicka här.
Den här söta kissen var jag bara tvungen att ta med :)
Pusha knapp i varje inlägg
Info om Pusha.se
Pusha är en samlingsplats där medlemmarna själva bestämmer innehållet genom att dela med sig av, rösta på och diskutera roliga och intressanta länkar.
När en medlem postar en länk hamnar den i "kö" under Nytt. Andra medlemmar kan sedan pusha den (rösta på den). Om länken får tillräckligt många röster hamnar den automatiskt under Hett, på Pushas förstasida.
1. Börja med att bli medlem på sidan och klicka sedan in på denna länken där ser ni lite hur man kan göra men tänkte skriva lite änklare hur man gör för att lägga in koden om man har blogg.se
Längre ner hittar ni också vilken ikon, pusha knapp ni vill ha.
2. Kopiera denna koden:
<a rel="nofollow" target="_blank" href="http://www.pusha.se/posta?url=http://bloggstyle.se/${EntryPermaLink}"><img src="http://static.pusha.se/badge-black.gif" alt="Pusha" /></a>
Byt ut URL och egen ikon bild, det fetstilta.
3. Klistra in koden här i din kodmall:
<div id="content">
<tag:entrylist limit="15">
<a name="a${EntryNum}"></a>
<h3>${EntryTitle}</h3>
<div>${EntryBody}</div>
<div>
${EntryDate} @ ${EntryTime}
<a href="${EntryPermaLink}">Permalink</a>
<a href="${EntryCategoryLink}">${EntryCategoryName}</a>
<a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>
<a href="${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a>
<a rel="nofollow" target="_blank" href="http://www.pusha.se/posta?url=http://bloggstyle.se/${EntryPermaLink}"><img src="http://static.pusha.se/badge-black.gif" alt="Pusha" /></a>
<br /><br />
<tag:taglist title="Nyckelord: ">
<a href="${TagURL}" rel="tag">${TagName}</a>
</tag:taglist>
</div>
<hr />
</tag:entrylist>
</div>
Pusha är en samlingsplats där medlemmarna själva bestämmer innehållet genom att dela med sig av, rösta på och diskutera roliga och intressanta länkar.
När en medlem postar en länk hamnar den i "kö" under Nytt. Andra medlemmar kan sedan pusha den (rösta på den). Om länken får tillräckligt många röster hamnar den automatiskt under Hett, på Pushas förstasida.
1. Börja med att bli medlem på sidan och klicka sedan in på denna länken där ser ni lite hur man kan göra men tänkte skriva lite änklare hur man gör för att lägga in koden om man har blogg.se
Längre ner hittar ni också vilken ikon, pusha knapp ni vill ha.
2. Kopiera denna koden:
<a rel="nofollow" target="_blank" href="http://www.pusha.se/posta?url=http://bloggstyle.se/${EntryPermaLink}"><img src="http://static.pusha.se/badge-black.gif" alt="Pusha" /></a>
Byt ut URL och egen ikon bild, det fetstilta.
3. Klistra in koden här i din kodmall:
<div id="content">
<tag:entrylist limit="15">
<a name="a${EntryNum}"></a>
<h3>${EntryTitle}</h3>
<div>${EntryBody}</div>
<div>
${EntryDate} @ ${EntryTime}
<a href="${EntryPermaLink}">Permalink</a>
<a href="${EntryCategoryLink}">${EntryCategoryName}</a>
<a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>
<a href="${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a>
<a rel="nofollow" target="_blank" href="http://www.pusha.se/posta?url=http://bloggstyle.se/${EntryPermaLink}"><img src="http://static.pusha.se/badge-black.gif" alt="Pusha" /></a>
<br /><br />
<tag:taglist title="Nyckelord: ">
<a href="${TagURL}" rel="tag">${TagName}</a>
</tag:taglist>
</div>
<hr />
</tag:entrylist>
</div>
Vinn en bloggdesign!
Nu tycker jag det är dax för en tävling!
Ni har en chans att vinna en valfri design, en av min färdiga jag har på denna sidan, detta gäller ni som har en blogg hos blogg.se
För att vara med i tävlingen:
- Skriv upp dej, med namn, mail och blogg.
- Lägg även till mej på bloglovin
- Skriv lite kort om varför just du ska vinna
Vinnaren utses den 12 Mars och kommer även synas bland mina länkar om ni vill detta.
Lycka till!
Avlsutat Vinnare blev Lotta
Ni har en chans att vinna en valfri design, en av min färdiga jag har på denna sidan, detta gäller ni som har en blogg hos blogg.se
För att vara med i tävlingen:
- Skriv upp dej, med namn, mail och blogg.
- Lägg även till mej på bloglovin
- Skriv lite kort om varför just du ska vinna
Vinnaren utses den 12 Mars och kommer även synas bland mina länkar om ni vill detta.
Lycka till!
Avlsutat Vinnare blev Lotta
Fallande snö, hjärtan...på din blogg
Har ett färdiga script, fallande snö, men som man kan byta ut till hjärtan etc.
Ska förklara hur ni klistrar in koden men även hur ni ändrar hastighet, antal symboler som syns och färg.
1. Kopiera denna koden:
<script type="text/javascript">
Width =1000; // 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>
2. Klistra in koden i din kodmall mellan <head> och </head> och spara.
För att ändra till annan symbol och färg gör du det här:
För att ändra antal symboler, hur stora dom ska vara, gör du det här:
Några symboler du kan kopiera och klistra in:
♥ ❤ ❤ ❦
★ ☆ ✰ ✭ ✰ ✳ ❅ ☃
♩ ♪ ♫ ♬
Ska förklara hur ni klistrar in koden men även hur ni ändrar hastighet, antal symboler som syns och färg.
1. Kopiera denna koden:
<script type="text/javascript">
Width =1000; // 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>
2. Klistra in koden i din kodmall mellan <head> och </head> och spara.
För att ändra till annan symbol och färg gör du det här:
För att ändra antal symboler, hur stora dom ska vara, gör du det här:
Några symboler du kan kopiera och klistra in:
♥ ❤ ❤ ❦
★ ☆ ✰ ✭ ✰ ✳ ❅ ☃
♩ ♪ ♫ ♬
Ta bort ikon innan länk
För att ta bort den svarta pricken som är innan varje länk i menyn, klistrar in denna kod i stilmallen:
ul
{
list-style: none;
}
ul
{
list-style: none;
}
