1. Kopiera någon av koderna nedan:

---

-moz-box-shadow:0px 0px 15px #888;
box-shadow: 0px 0px 15px #888;
padding: 0px 0px 0px 0px;

---

-moz-box-shadow:0px 0px 30px #888;
box-shadow: 0px 0px 30px #888;
padding: 0px 0px 0px 0px;

---

2. Klicka på stilmallen, bläddra ner till wrapper och lägg in koden.

Exempel:

#wrapper {
clear:none;
margin: 30px auto;
padding: 20px;
width: 830px;
background-color: #FFFFFF;
-moz-box-shadow:10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 0px 0px 0px 0px;
}


Ändra färg på #888

Förhandsgranska och spara!

På de flesta bloggar brukar det ju vara en meny, ska förklara hur man skapar en till så man har två stycken menyer!

1. Klicka på stilmallen

2. Kopiera in texten nedan mellan #side och #content .

#side2 {
position: absolute;
left: 700px;
top: 100px;
width: 200px;
height: 400px;
background: #ffffff;
padding: 10px 10px 10px;
text-align:left;
}

3. Spara och gå sedan in på "kodmallar"

4. Klistra in koden som står nedan, precis över </body> Gör sedan samma sak på de andra sidorna inläggssida, arkivsida och kategorisida.

<div id="side2">
</div>


5. Spara, och gå sedan in på stillmallar igen.

6. Nu kan du ändra så att du får menyn som du vill ha den.

#side2 {
position: absolute;                    <- Positionen.
left: 700px;                                  <- Hur långt från vänsterkanten menyn ska vara.
top: 100px;                                  <- Hur långt ned på sidan menyn ska vara.
width: 200px;                           <- Hur bred menyn ska vara.
height: 400px;                          <- Hur lång menyn ska vara.
background: #ffffff;                <- Vilken bakgrundsfärg menyn ska ha.
padding: 10px 10px 10px;     <- Hur stor mellanrum ska vara mellan kanten på menyn och innehållet i menyn.
text-align:left;                            <- På vilken sida texten ska vara på. left/right/center
}

7. När du är klar, lägger du in det du vill ha i din meny i kodmallen, mellan <div id="side2">  </div>

Hoppas detta var till någon hjälp.

Skugga på rubrikerna i inläggsrutan, detta funkar inte alltid i Explorer, men i Firefox...


1. Kopiera denna koden:
text-shadow: #666666 1px 2px 2px;

2. Klistra in den i stilmallen, i denna koden, se nedan hur det ska se ut:

h1,h3,h4,h5,h6, div.navheader, div.default {
font-family:Mongolian Baiti ;
color: #ffffff;
text-shadow: #666666 1px 2px 2px;
}

3. Förhandsgranska och spara!

Skapa en länk som går till toppen av sidan, mycket bekvämt för dem som har många inlägg !
Ska förklara hur man gör, det är mycket lätt!



1. Kopiera denna koden och klistra in längst ner i stilmallen.

h3 a { position: absolute; right: 7px; margin: 2px 0px 0px 0px; }

2. Kopiera denna koden och klistra in i kodmallen, innan <div="content">
<a name="top"></a> se förklaring nedan:


3. Kopiera denna koden och klistra in koden där du vill ha den, tex efter kommentarer eller klocka och tid.
Se förklaring på bilderna nedan:

<a href="#top" mce_href="#top"> Till toppen </a>

Om länken ska vara efter datum och tid, ska den plaseras här, se nedan:


Efter kommentarer, plasera koden här, se nedan:

Om man vill ha ett hjärta skriv till denna koden innan: &hearts;
Ni kan såklart ändra texten "Till toppen" till vad ni vill.

För fler tips för länk till toppen klicka här!

1. Klicka på design, kodmall och bläddra ner till <div id="content">

2. Kopiera denna koden: &hearts; klistra in efter <h3>

3. Spara och gör samma sak på de andra sidorna: inläggsida, arkivsida, kategorisida.

Mer tips:
Om man vill ändra färg på hjärtat klistra in denna koden efter <h3>
<font face="arial" color="#6c6c6c" size="5" height="4000"> &hearts; </font>

Om man vill ha något annat änn hjärta, kan man välja något annat tecken.

Jag fick en fråga om hur man gör en bild till en url kod.
Detta gäller även om man ska ladda upp en animations bild, det är super enkelt.
För vissa är det ganska självklart men inte för alla.

1. Gå in på din blogg, klicka på skapa, bild och ladda upp det du vill.

2. När bilden kommer upp till vänster, klicka på den, då syns bara den på skärmen.

3. Kopiera sedan länken som kommer upp i sökfältet högst upp, se förklaring nedan:

4. Nu var det klart, klistra in länken (koden) i kodmallen eller stilmallen, beror på var du vill ha den.

Man kan välja vilken ikonbild man vill från bloglovin och lägga in, man kan även göra en egen, detta ska jag visa i ett annat inlägg, nedan visar jag några exempel på var man kan lägga ikonen.

1. Kopiera koden nedan och klistra in din egna kod där det står DIN KOD HÄR:

<div align="right">
DIN KOD HÄR
</div>

2. Klicka sedan på kodmallen och bläddra ner till <div id="content">

Se alternativen nedan:


3. När du är nöjd spara och gör samma sak på de andra sidorna om du vill, arkiv, kategori och inläggsidan

Ljus fin design i gråa toner, som jag har gjort själv som ni får låna.
Designen gäller ni som har blogg.se eller webblogg.se

Regler:
- Man får ej kopiera vidare designen i eget syfte, alltså skriva man gjort den.
- Man får inte ändra något på designen, fråga isåfall först.

Kopiera koden i rutan och klistra in i stilmallen och spara!

body { background:#ffffff url('http://styleblogg.blogg.se/gratismall/images/2010/123_121593880.jpg'); background-attachment:fixed; margin:0px; text-align:center; padding-left: 0px; padding-bottom: 14px; } a {color: #999999;text-decoration:none;} a:hover {color: #e6d1d0; background: none; border-bottom:1px dotted #e6d1d0; text-decoration:none;} #wrapper { margin:0px auto; width: 1020px; position:relative; padding: 0px; vertical-align: top; text-align: left; background-image: url(''); color:#ffffff; } #wrapper:after { content: url('botten bild'); display: block; height: 0; clear: both; } p { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #header { background: url('http://styleblogg.blogg.se/gratismall/images/2010/header1_121593826.png') no-repeat center top; margin-left: -1px; padding: 0px 0px 0px 0px; height: 270px; border: 0px none; } #datum { background: ; color: #000; font-family: tahoma; font-size: 20px; padding-left: 18px; padding-bottom: 5px; padding-top: -22px; padding-right: 5px; margin: -29px 5px 0px 0px; font-weight: normal; text-align:right; letter-spacing: 0px; font-style: none; background: transparent; height:7px; } #dropdown { background: url('http://jennielenita.blogg.se/myblogdesign/images/2010/menyasf_113125596.png') no-repeat; height: 30px; width: 600px; margin-left: 20px; } #side { margin-right: 40px; padding: px; float: right; width: 200px; margin-top: -13px; background: #ffffff; border:5px solid; margin-top: 0px; -moz-box-shadow:0px 0px 15px #888; box-shadow: 0px 0px 15px #888; padding: 0px 0px 0px 0px; } #content { -moz-box-shadow:0px 0px 15px #888; box-shadow: 0px 0px 15px #888; padding: 0px 0px 0px 0px; overflow: hidden; width:714px; float: left; background: url('')top; padding: 40px 5px 5px; voice-family:"\"}\""; voice-family:inherit; text-align: left; vertical-align: top; padding-left: 5px; margin-left: 28px; margin-top: 0px; background: #ffffff; } #header a { color: #e8e8e8; text-decoration: none;cursor: crosshair;} h1 { font-family: Trajan Pro, Sylfaen, sans-serif; font-size: 56px; font-weight: normal; color: #cccccc; margin-top:10px; margin-bottom:0px; padding:170px; text-align: center; text-shadow: #666666 1px 2px 2px; } h2 { font-family: Trajan Pro, Trajan Pro, sans-serif; font-size: 12px; font-weight: normal; color: #FFF; margin-top:0px; margin-bottom:0px; margin-left: 0px; padding:0px; text-align: left; } /** Entry headers **/ h3 { font-family: Georgia, verdana, sans-serif; font-size: 22px; font-weight: normal; color: #000; background:#eeeeee; padding: 0px 0px 0px 0px; margin: 0px 0px 0px; vertical-align: top; text-align:center; } .navheader { font-family: tahoma, verdana, sans-serif; font-size: 13px; font-weight: normal; color: #000; text-align:left; padding: 0px; padding-left:10px; background:#eeeeee; text-transform: absolute; margin-left: 0px; } .nav { font-family: tahoma, arial, sans-serif; font-size: 10px; font-weight: normal; text-align: left; } .nav ul { padding: 0px 0px 0px; background: none; font-weight: normal; margin-left: 0px; } .nav li { list-style: none; padding: 0px 0px 0px; background: none; font-weight: normal; margin: 0px; } .nav a { color: #000;text-decoration:none; } .nav a:hover {color: #e6d1d0;text-decoration:none;padding-left:7px; cursor: crosshair; } /** Post's body text **/ .entrybody { background:none; font-family: tahoma, arial, sans-serif; font-size: 12px; font-weight: normal; color: #333; line-height: 140%; text-align:justify; padding:10px; margin: 5px 0px 0px 0px; border: 0px solid #ccc; } /** 'Posted by' txt **/ .entrymeta { background:none; font-family: tahoma, arial, sans-serif; font-size: 10px; font-weight: normal; color: #000; padding:15px 5px 0px 0px; margin: 0px 0px 0px 0px; text-align:none; border: 0px solid #ccc; } .entrymeta a { color: #000; text-decoration:none;font-style: italic;} .entrymeta a:hover {color: #e6d1d0;text-decoration:none; cursor: crosshair;} .commentheader { font-family: tahoma , arial, helvetica, sans-serif; font-size: 15px; font-weight: normal; background: #eeeeee; url('') center; text-align:left; border: 0px solid #ccc; color: #000; margin: 30px 30px 0px 30px; padding: 0px 0px 0px 5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; } .commenttext { font-family: tahoma , verdana, arial, sans-serif; font-size: .80em; background:#ffffff; font-weight: normal; color: #000000; padding: 0px 0px 10px 5px; line-height: 130%; margin: 0px 30px 0px 30px; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } .commentmeta { font-family: tahoma , arial, sans-serif; font-size: .55em; font-weight: normal; color: #000000; height:25px; background:#ffffff; padding: 0px 0px 0px 5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 0px 30px 0px 30px; } #datum2 { background: ; color: #999; font-family: tahoma; font-size: 15px; padding-left: 100px; padding-bottom: 0px; padding-top: -0px; padding-right: 0px; margin: -20px 30px 0px 0px; font-weight: normal; text-align:right; letter-spacing: 0px; font-style: none; background: transparent; height:0px; } .commentform { background:#f7f5f5; url('') center; font-family: tahoma , arial, sans-serif; font-size: 15px; font-weight: normal; color: #000; margin: 50px 100px 0px 100px; padding: 0px 0px 30px 60px; border: 1px solid #eeeeee; } .separator { display: none; } .default { display:none; } .subside { font-family: "tahoma" Verdana, Arial, Helvetica, Sans-serif; font-size: .7em; font-weight: normal; padding: 0px 0px 0px 0px; } .xmlButton { border:1px solid; border-color:#FC9 #630 #330 #F96; padding:0 3px; font:bold 10px tahoma, Arial, Helvetica, Sans-serif; color:#FFF; background:#F60; text-decoration:none; margin:0; } .image { border: 0px solid #cccccc; padding: 0px 0px 0px 0px; margin: 0px 6px 6px 0px; } .thumbnail { border: 0px solid #889977; margin: 0px 6px 6px 0px; } .video{ padding: 0px 0px 30px 30px; } .fieldName{ font-family: tahoma, Arial, Helvetica, Sans-serif; font-size: 11px; margin: 0px 0px 12px 0px } select{ font-family: tahoma, Arial, Helvetica, Sans-serif; font-size: 11px; } /***************************************************************************** * Calendar * *****************************************************************************/ #calendar { color: #000000; font-family: 'Trebuchet MS', Verdana, sans-serif; padding: 0px 0px 6px 0px; text-align: left; } #calendar table { padding: 1px; /*border-collapse: collapse;*/ border: 0px; } #calendar table caption { color: #000000; font-family : Arial, Helvetica, sans-serif; font-size : 13px; border-bottom: 3px solid #000000; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; } #calendar table th { text-align: center; font-weight: bold; font-size: xx-small; } #calendar table tr td { border: 1px solid #F1F1F1; text-align: center; font-size: xx-small; } #calendar table tr ul { color: #BBB; 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 #F1F1F1; } #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; } #calendar table tr td ul li { } #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 { margin: 0px 0px 6px; padding-left: 10px; } em { margin: 0px; padding: 0px; border: 0px none; text-align: left; letter-spacing: 0.1em; } #profile { font-family: tahoma, arial, sans-serif; font-size: 11px; font-weight: normal; color: #FFF; background: #ffffff; margin: 10px 0px 10px; padding: 5px; } #profile h4{ font-family: tahoma, verdana, sans-serif; font-size: 15px; font-weight: normal; color: #343434; background: #ffffff; padding: 5px; margin: 10px 0px 0px; } #profile p{ padding: 0px 5px 5px; background: #ffffff; } #profile p a{ color: #000000; } .knapp{ border: 1px solid #999; font-size: 11px; background:#ffffff url(''); color: #000; font-weight: normal; font-family: tahoma; } .knappen{ border: 1px solid #999; font-size: 11px; background:#ffffff url(''); color: #000; font-weight: normal; font-family: tahoma; } .knappe{ border: 1px solid #999; font-size: 11px; background:#ffffff url(''); color: #000; font-weight: normal; font-family: tahoma; } #profile p a:hover{ color: #000; } .knapp{ border: 1px solid #999; font-size: 11px; background:#ffffff url('')top; color: #000; font-weight: normal; font-family: tahoma; } .knappinapp{ border: 1px solid #000; font-size: 12px; background:#ffffff; color: #000; font-weight: normal; font-family: tahoma; } img{ border: 0px; } .flikar { height:1em; /*Flytta åt vänster/höger/upp/ner */ margin-left: 60px; margin-right: 0px; margin-top: -35px; margin-bottom: -80px; padding:0px; } .flikar li { float:left; list-style: none; } .flikar li a { display:block; margin:0 15px 0 0px; padding:2px 0px 0 10px; width: 98px; height: 16px; background-color: none; /*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: Tahoma; /*Ändra typsnittet här*/ font-size: 11px; /*Ändra storleken på texten här*/ text-align: left; } .flikar li a:hover, .flikar li.selected a{ background: none; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */ /* opacitet for IE */ filter:alpha(opacity=0.6); /* opacity: 0.6; filter: alpha(opacity=0.6); */ /* opacitet CSS3 standard */ opacity: 0.6; /* opacitet for Mozilla */ opacity: 0.6; } .flikar li ul { display: none; background-color:none; width:135px; /* opacitet for IE */ filter:alpha(opacity=0.95); /* opacity: 0.95; filter: alpha(opacity=0.95); */ /* opacitet CSS3 standard */ opacity:0.95; /* opacitet for Mozilla */ -moz-opacity:0.95; } .flikar li:hover ul, .flikar li.hover ul { display:block ; position: absolute; margin: 0px; padding: 0px; z-index: 1; } .flikar li:hover li, .flikar li.hover li { border-left: solid 1px #b3b2b3; float: none; background-color: #ffffff; } .flikar li:hover li a, .flikar li.hover li a { border-right: solid 1px #b3b2b3; width: 125px; /* Ändra bredden på undermenyn här */ background-color: #b2f6f7; /*Ändra färgen på undermenyn*/ color: #333333; /*ändra textfärgen på undermenyn här*/ } .flikar li li a:hover { background-color: ; } /*Ändra färgen när man håller musen över dropdownmenyn*/

OBS! Om det inte skulle se bra ut så återställ kodmallen på alla sidor.
Skuggan runt menyn och content syns inte alltid i Explorer, men Firefox..

Nu var det på tiden jag gjorde någon gratismall som alla kan låna och ha på sin blogg.
Denna gången blev det sex and the city tema, hela designen har jag gjort själv, hoppas ni gillar den.
Designen gäller ni som har blogg.se eller webblogg.se

Regler:
- Man får ej kopiera vidare designen i eget syfte, alltså skriva man gjort den.
- Man får inte ändra något på designen, fråga isåfall först.

Kopiera koden i rutan och klistra in i stilmallen och spara!

OBS! Om det inte skulle se bra ut så återställ kodmallen på alla sidor.

Designen ses bäst ut i Firefox.

body { background:#B2C0D8 url('http://styleblogg.blogg.se/sexandthecity/images/2010/nanna_80066295_90200123_121593496.gif') ; background-attachment:fixed; margin:0px; text-align:center; padding-left: 0px; padding-bottom: 14px; } a {color: #999999;text-decoration:none;} a:hover {color: #e6d1d0; background: none; border-bottom:1px dotted #e6d1d0; text-decoration:none;} #wrapper { margin:0px auto; width: 1020px; position:relative; padding: 0px; vertical-align: top; text-align: left; background-image: url(''); color:#ffffff; } #wrapper:after { content: url('båtten bild'); display: block; height: 0; clear: both; } p { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #header { background: url('http://styleblogg.blogg.se/sexandthecity/images/2010/bakgrund-header_121593666.png') no-repeat center top; margin-left: -1px; padding: 0px 0px 0px 0px; height: 255px; border: 0px none; } #datum { background: ; color: #000; font-family: tahoma; font-size: 15px; padding-left: 18px; padding-bottom: 5px; padding-top: -22px; padding-right: 5px; margin: -29px 5px 0px 0px; font-weight: normal; text-align:right; letter-spacing: 0px; font-style: none; background: transparent; height:7px; } #dropdown { background: url('http://jennielenita.blogg.se/myblogdesign/images/2010/menyasf_113125596.png') no-repeat; height: 30px; width: 600px; margin-left: 20px; } #side { margin-right: 50px; padding: px; float: right; width: 200px; margin-top: -13px; background: #ffffff; border:5px solid; margin-top: 0px; -moz-box-shadow:0px 0px 15px #888; box-shadow: 0px 0px 15px #888; padding: 0px 0px 0px 0px; } #content { -moz-box-shadow:0px 0px 15px #888; box-shadow: 0px 0px 15px #888; padding: 0px 0px 0px 0px; overflow: hidden; width:714px; float: left; background: url('')top; padding: 40px 5px 5px; voice-family:"\"}\""; voice-family:inherit; text-align: left; vertical-align: top; padding-left: 10px; margin-left: 18px; margin-top: 0px; background: #ffffff; } #header a { color: #ffdfe1; text-decoration: none;cursor: crosshair;} h1 { font-family: Trajan Pro, Sylfaen, sans-serif; font-size: 56px; font-weight: normal; color: #cccccc; margin-top:10px; margin-bottom:0px; padding:167px; text-align: left; text-shadow: #666666 1px 2px 2px; } h2 { font-family: Trajan Pro, Trajan Pro, sans-serif; font-size: 12px; font-weight: normal; color: #FFF; margin-top:0px; margin-bottom:0px; margin-left: 0px; padding:0px; text-align: left; } /** Entry headers **/ h3 { font-family: Georgia, verdana, sans-serif; font-size: 20px; font-weight: normal; color: #000; background:#ffdfe1; padding: 0px 0px 0px 0px; margin: 0px 0px 0px; vertical-align: top; text-align:center; border-bottom: 1px solid #000; } .navheader { font-family: tahoma, verdana, sans-serif; font-size: 13px; font-weight: normal; color: #000; text-align:left; padding: 0px; padding-left:10px; background:#ffdfe1; text-transform: absolute; margin-left: 0px; border-bottom: 1px solid #000; } .nav { font-family: tahoma, arial, sans-serif; font-size: 10px; font-weight: normal; text-align: left; } .nav ul { padding: 0px 0px 0px; background: none; font-weight: normal; margin-left: 0px; } .nav li { list-style: none; padding: 0px 0px 0px; background: none; font-weight: normal; margin: 0px; } .nav a { color: #000;text-decoration:none; } .nav a:hover {color: #e6d1d0;text-decoration:none;padding-left:7px; cursor: crosshair; } /** Post's body text **/ .entrybody { background:none; font-family: tahoma, arial, sans-serif; font-size: 12px; font-weight: normal; color: #333; line-height: 140%; text-align:justify; padding:10px; margin: 5px 0px 0px 0px; border: 0px solid #ccc; } /** 'Posted by' txt **/ .entrymeta { background:none; font-family: tahoma, arial, sans-serif; font-size: 10px; font-weight: normal; color: #000; padding:15px 5px 0px 0px; margin: 0px 0px 0px 0px; text-align:none; border: 0px solid #ccc; } .entrymeta a { color: #000; text-decoration:none;font-style: italic;} .entrymeta a:hover {color: #e6d1d0;text-decoration:none; cursor: crosshair;} .commentheader { font-family: tahoma , arial, helvetica, sans-serif; font-size: 15px; font-weight: normal; background:url('http://jennielenita.blogg.se/myblogdesign/images/2010/aeryrth_112979076.png') center; text-align:left; border: 0px solid #ccc; color: #000; margin: 30px 30px 0px 30px; padding: 0px 0px 0px 5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; } .commenttext { font-family: tahoma , verdana, arial, sans-serif; font-size: .70em; background:#ffffff; font-weight: normal; color: #000000; padding: 0px 0px 10px 5px; line-height: 130%; margin: 0px 30px 0px 30px; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } .commentmeta { font-family: tahoma , arial, sans-serif; font-size: .35em; font-weight: normal; color: #000000; height:25px; background:#ffffff; padding: 0px 0px 0px 5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 0px 30px 0px 30px; } #datum2 { background: ; color: #999; font-family: tahoma; font-size: 3px; padding-left: 100px; padding-bottom: 0px; padding-top: -0px; padding-right: 0px; margin: -20px 30px 0px 0px; font-weight: normal; text-align:right; letter-spacing: 0px; font-style: none; background: transparent; height:0px; } .commentform { background:url('http://styleblogg.blogg.se/sexandthecity/images/2010/nanna_80066295_90200123_121593496.gif') center; font-family: tahoma , arial, sans-serif; font-size: 10px; font-weight: normal; color: #000; margin: 50px 100px 0px 100px; padding: 0px 0px 30px 60px; border: 1px solid #eeeeee; } .separator { display: none; } .default { display:none; } .subside { font-family: "tahoma" Verdana, Arial, Helvetica, Sans-serif; font-size: .7em; font-weight: normal; padding: 0px 0px 0px 0px; } .xmlButton { border:1px solid; border-color:#FC9 #630 #330 #F96; padding:0 3px; font:bold 10px tahoma, Arial, Helvetica, Sans-serif; color:#FFF; background:#F60; text-decoration:none; margin:0; } .image { border: 0px solid #cccccc; padding: 0px 0px 0px 0px; margin: 0px 6px 6px 0px; } .thumbnail { border: 0px solid #889977; margin: 0px 6px 6px 0px; } .video{ padding: 0px 0px 30px 30px; } .fieldName{ font-family: tahoma, Arial, Helvetica, Sans-serif; font-size: 11px; margin: 0px 0px 12px 0px } select{ font-family: tahoma, Arial, Helvetica, Sans-serif; font-size: 11px; } /***************************************************************************** * Calendar * *****************************************************************************/ #calendar { color: #000000; font-family: 'Trebuchet MS', Verdana, sans-serif; padding: 0px 0px 6px 0px; text-align: left; } #calendar table { padding: 1px; /*border-collapse: collapse;*/ border: 0px; } #calendar table caption { color: #000000; font-family : Arial, Helvetica, sans-serif; font-size : 13px; border-bottom: 3px solid #000000; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; } #calendar table th { text-align: center; font-weight: bold; font-size: xx-small; } #calendar table tr td { border: 1px solid #F1F1F1; text-align: center; font-size: xx-small; } #calendar table tr ul { color: #BBB; 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 #F1F1F1; } #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; } #calendar table tr td ul li { } #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 { margin: 0px 0px 6px; padding-left: 10px; } em { margin: 0px; padding: 0px; border: 0px none; text-align: left; letter-spacing: 0.1em; } #profile { font-family: tahoma, arial, sans-serif; font-size: 11px; font-weight: normal; color: #FFF; background: #ffffff; margin: 10px 0px 10px; padding: 5px; } #profile h4{ font-family: tahoma, verdana, sans-serif; font-size: 15px; font-weight: normal; color: #343434; background: #ffffff; padding: 5px; margin: 10px 0px 0px; } #profile p{ padding: 0px 5px 5px; background: #ffffff; } #profile p a{ color: #000000; } .knapp{ border: 1px solid #999; font-size: 11px; background:#ffffff url(''); color: #000; font-weight: normal; font-family: tahoma; } .knappen{ border: 1px solid #999; font-size: 11px; background:#ffffff url(''); color: #000; font-weight: normal; font-family: tahoma; } .knappe{ border: 1px solid #999; font-size: 11px; background:#ffffff url(''); color: #000; font-weight: normal; font-family: tahoma; } #profile p a:hover{ color: #000; } .knapp{ border: 1px solid #999; font-size: 11px; background:#ffffff url('')top; color: #000; font-weight: normal; font-family: tahoma; } .knappinapp{ border: 1px solid #000; font-size: 12px; background:#ffffff; color: #000; font-weight: normal; font-family: tahoma; } img{ border: 0px; } .flikar { height:1em; /*Flytta åt vänster/höger/upp/ner */ margin-left: 60px; margin-right: 0px; margin-top: -35px; margin-bottom: -80px; padding:0px; } .flikar li { float:left; list-style: none; } .flikar li a { display:block; margin:0 15px 0 0px; padding:2px 0px 0 10px; width: 98px; height: 16px; background-color: none; /*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: Tahoma; /*Ändra typsnittet här*/ font-size: 11px; /*Ändra storleken på texten här*/ text-align: left; } .flikar li a:hover, .flikar li.selected a{ background: none; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */ /* opacitet for IE */ filter:alpha(opacity=0.6); /* opacity: 0.6; filter: alpha(opacity=0.6); */ /* opacitet CSS3 standard */ opacity: 0.6; /* opacitet for Mozilla */ opacity: 0.6; } .flikar li ul { display: none; background-color:none; width:135px; /* opacitet for IE */ filter:alpha(opacity=0.95); /* opacity: 0.95; filter: alpha(opacity=0.95); */ /* opacitet CSS3 standard */ opacity:0.95; /* opacitet for Mozilla */ -moz-opacity:0.95; } .flikar li:hover ul, .flikar li.hover ul { display:block ; position: absolute; margin: 0px; padding: 0px; z-index: 1; } .flikar li:hover li, .flikar li.hover li { border-left: solid 1px #b3b2b3; float: none; background-color: #ffffff; } .flikar li:hover li a, .flikar li.hover li a { border-right: solid 1px #b3b2b3; width: 125px; /* Ändra bredden på undermenyn här */ background-color: #b2f6f7; /*Ändra färgen på undermenyn*/ color: #333333; /*ändra textfärgen på undermenyn här*/ } .flikar li li a:hover { background-color: ; } /*Ändra färgen när man håller musen över dropdownmenyn*/

En rolig sak med länkarna man kan göra, när man håller muspekaren över en länk i menyn, hoppar den fram en bit, för att göra detta klicka på stilmallen.


1. Kopiera denna koden:
.nav a { color: #000;text-decoration:none; }
.nav a:hover {color: #BFCFE8;text-decoration:none;padding-left:7px;
}

2. Lägg in koden så det ser ut så här i stilmallen, se nedan:


Förklaring:

Ändra färg på: color#000;
Hur långt till höger länken ska hoppa fram, ändrar man på: padding-left:7px;

.nav a { color: #000;text-decoration:none; }
.nav a:hover {color: #BFCFE8;text-decoration:none;padding-left:7px;
}

3. Förhandsgranska och Spara!

Om man vill ta bort linjen under headern gör man detta i stilmallen.

Bläddra ner till denna koden och ta bort det markerade, se nedan:


Spara så var det klart !

Nu har jag fått en fråga av en tjej som undrar hur man lägger in ett hjärta innan varje länk i menyn.


1. Klicka på kodmallen

2. Bläddra ner till denna koden:

<div> <Senaste inläggen</div>
<ul>
<tag:recentlist limit="20">
<li>
<a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>

3. Lägg till denna koden:

<font face="arial" color="#f41c1c" size="2" height="4000">
♥ </font>

4. Så här ska det se ut:

<div> <Senaste inläggen</div>
<ul>
<tag:recentlist limit="20">
<li>
<font face="arial" color="#f41c1c" size="2" height="4000">
♥ </font>
<a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>

Ändra färg på color och storlek på size

Om man nu vill ha hjärtana innan Länkar, Arkiv etc gör man samma sak, lägger koden efter <li>

Om man vill ha en egen bild så laddar man upp bilden och klistrar in där hjärtat är istället, med denna koden:
<img src="Länk från bild här">

Spara!

För att få en skugga runt menyn gör man detta i stilmallen.
Man kan ändra hur mycke skugga man vill ha och färg, detta är mycket lätt!

Se nedan var koden ska vara:

#side {
-moz-box-shadow:10px 10px 5px #888; <----Ändra färg här!
box-shadow: 10px 10px 5px #888;
padding: 0px 0px 0px 0px;
height:auto;
left:740px;
padding:7px 0 0;
position:absolute;
top:87px;
width:195px;
}

Om man vill ha skugga runt inläggsrutan (content) ska det se ut så här:

div#content {
-moz-box-shadow:0px 0px 30px #888; <----Ändra färg här!
box-shadow: 0px 0px 30px #888;
padding: 0px 0px 0px 0px;
position: absolute;
top:120px;
left:245px;
width: 730px;
}


Några av mina färdiga koder ni kan välja mellan:

---

Lite mörkare skugga, höger sida:
-moz-box-shadow:10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 0px 0px 0px 0px;

---

Lite ljusare skugga, höger sida:
-moz-box-shadow:5px 5px 10px #888;
box-shadow: 5px 10px 10px #888;
padding: 0px 0px 0px 0px;

---

Skugga på alla sidor:
-moz-box-shadow:0px 0px 15px #888;
box-shadow: 0px 0px 15px #888;
padding: 0px 0px 0px 0px;

---

Mycke skugga på alla sidor:
-moz-box-shadow:0px 0px 30px #888;
box-shadow: 0px 0px 30px #888;
padding: 0px 0px 0px 0px;

---

Förhandsgranska och spara!

För vissa så hoppar menyn ner en bit eller hamnar under content, detta kan bero på olika saker, men den vanliga orsaken är i stilmallen. När man tex ändrar bredden på content (inläggsrutan) till bredare, hoppar menyn ner.

Orsaken är att man glömmer att ändra bredden på wrapper, gör man detta så ska menyn hamna där man vill ha den.

Om detta inte skulle funka så kan felet ligga i kodmallen, skriv om det inte skulle funka.

Jag har fått många frågor om hur man skapar runda hörn i dropdown menyn som ni kan se på bilderna nedan.
Det du behöver är photoshop eller annat program för att skapa själva bilden, detta kan ni se i filmen nedan hur man gör, (film kommer snart!)

Ladda sedan upp bilden i din blogg, kopiera bildlänken och klistra in i kodmallen.
Bläddra ner till koden som hör till dropdown menyn, (hur man skapar en dropdown meny)

<img src="LÄNK FRÅN DIN BILD HÄR">

Se bild nedan var du klistrar in koden:


Om du har laggt in egna länkar i dropdown menyn, klistra du in länken här, se nedan:


Spara !

Vinnaren får denna fina unika design med:

- Egen text i headern tex sitt bloggnamn
- Profilbild och text som man kan ändra som man vill
- I Högra menyn kan man ladda upp sina egna bilder
- Egna Länkar i högra menyn
- Bloglovin ikon längst upp till höger

Se den Live

Jag kan såklart hjälpa till hur man lägger in vissa saker.
I inläggsrutan får bilder som är 700px breda plats.
Snöflingorna i bakgrunden går att ta bort längre fram så bara den ljusgråa bakgrunden syns.


Nu för att vinna denna design, det är jätte lätt! 
Du måste ha en blogg hos blogg.se
- Skriv bara upp dej med din bloggadress och
- Lägg till mej på bloglovin.

Tävlingen Avslutas den 17 Dec då jag lottar ut en vinnare 
Vinnaren kommer även synas på min sida, garanterat några fler besökare får man.

Lycka till ! :)

Avslutad

Nu är det en ny design med lite vinter tema, jag tyckte den andra var lite rörig, vet inte vad ni andra tyckte, kommentera gärna! Jag känner mej i allafall nöjd :)