KREATiV -- Text I Foto I Design

Gratis bloggdesign - Dimma (kod+grafik)

Tänkte jag skulle erbjuda några färdiga gratislayouter här på bloggen. Såna som ni kan kopiera och lägga in direkt utan någon som helst programmering. Denna blogglayout funkar på blogg.se och ett provexemplar finns på testbloggv

Känns passande med dimma nu på hösten så det får bli namnet på min första gratislayout. Det här är en design i gråblå toner som matchar den lågmälda poeten, författaren eller konstnären i dig.

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

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

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

body {
margin: 0px;
padding:0px;
background: #999 url(http://farm3.static.flickr.com/2687/4049923993_41a9d6a40b_o.jpg);
}

img{
border:none;
}

img a{
border:none;
}

a { color: #57596e; text-decoration:none;}
a:hover { color: #333; text-decoration:underline;}

#wrapper {
clear:none;
margin: 30px auto;
padding: 0px;
width: 759px;
background-color: #b7bac6;
border: 10px solid #515C58;

}

#wrapper:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#header {
background: #666 url(http://farm3.static.flickr.com/2527/4049923979_27929cb44a_o.jpg) no-repeat top center;
width: 760px;
height: 500px;
}

#side {
float: right;
width: 140px;
margin: 0px;
padding: 235px 15px 15px 15px;
background: #fff url(http://farm3.static.flickr.com/2637/4049923995_ab177c52b7_o.jpg) top center no-repeat;
left:-30px;
border: 4px dotted #b7bac6;
}

#content {
overflow: hidden;
width: 540px;
position:relative;
left:0px;
voice-family:"\"}\"";
voice-family:inherit;
float: left;
background-color:white;
border: 4px dotted #b7bac6;
padding:10px;
}

#header a {
color: #6c7177;
background-color:transparent;
text-decoration: none;
padding:0px;
margin:0px;
text-decoration:underline;
}

#header a:hover {
background-color:#e3e1e4;
padding: 0px;
text-decoration: none;
}

/* bloggtitel */ h1 {
font-family: georgia, times, serif;
font-size: 40px;
font-weight:200;
color: #6c7177;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
padding: 0px;
float:right;
width:400px;
}

/*bloggbeskrivning */
h2 {
font-family: georgia, times, serif;
font-size: 14px;
font-weight:200;
font-style:italic;
color: #6c7177;
margin-right: 20px;
margin-top: 0px;
padding: 0px;
float:right;
clear:right;
width:400px;
}

/** Entry headers **/
h3 {
background-color: transparent;
font-family: arial, verdana, sans-serif;
font-size: 24px;
font-weight: bold;
color: #515c58;
background-color: #c8cadf;
margin:5px 5px 15px 5px;
padding:5px;
}

.navheader {
font-family:  Arial, Helvetica, Sans-serif;
font-size: 12px;
font-weight: bold;
color: #515c58;
background-color: #c8cadf;
padding:5px;
margin-bottom:0px;
text-transform: uppercase;
}

.nav {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size: 10px;
font-weight: bold;
color: #333;
margin: 0px;
}

.nav ul {
margin: 5px 0px 5px 0px;
padding: 0px;
font-weight: normal;
background-color: transparent;
}

.nav li {
list-style: none;
padding: 0px 0px 5px 0px;
font-weight: normal;	
}

.nav a { color: #333; border-bottom: 0.5px dotted #333; text-decoration:none;}
.nav a:hover { border-bottom: 0.5px solid #57596e; text-decoration:none;}

/** Post's body text **/
.entrybody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #333;
line-height: 150%;
margin:5px;
padding:0px 0px 60px 0px;
background:url(http://farm3.static.flickr.com/2497/4049923985_7238c475c5_o.jpg) bottom right no-repeat;
}

.entrybody a { color: #57596e; text-decoration:none; font-weight:bold;}
.entrybody a:hover { color: #333; text-decoration:underline; font-weight:bold;}

/** 'Posted by' txt **/
.entrymeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #333;
text-align:right;
clear: both;
margin: 14px 0px 14px 12px
border: none;
padding-bottom:10px;
}

.entrymeta a { color: #333; border-bottom: 0.5px dotted #333; text-decoration:none;}
.entrymeta a:hover { border-bottom: 0.5px solid #57596e; text-decoration:none;}

.commentheader {
font-family:  arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color:#c8cadf;
padding:5px;
color: #333;
margin-bottom:5px;
}

.commenttext {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000;
line-height: 130%;
}

.commentmeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #999999;
margin: 10px 0px 20px 0px
}

.commentmeta a { color: #999; }
.commentmeta a:hover { color: #57596e; }

.commentform {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
margin: 0px 0px 20px 0px
}

.separator {
border: 2px dotted #F9F8F7;
margin:20px 0 20px 0;
}

.default {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333;
font-weight: bold;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
}

.subside {
font-family: "Trebuchet MS" Verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: normal;
padding: 0px 0px 0px 0px;
}

.xmlButton {
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px Verdana, Arial, Helvetica, Sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:0;
}

.image {
border:none;
}

.thumbnail {
border: 2px solid #CCCCCC;

background-color:#FFFFFF;
padding:2px;
margin: 0px 6px 6px 0px;
}

.video{
padding: 0px 0px 0px 0px;
border:0 none;
}

.fieldName{
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin: 0px 0px 12px 0px
}

select{
font-family: verdana, arial, sans-serif;
font-size: 11px;
}

#calendar {
color: #333333;
font-family: 'Trebuchet MS', Verdana, sans-serif;
padding: 0px;
text-align: left;
background-color: #FFFFFF;
margin: 12px 0px 12px 0px;
padding: 10px;
}

#calendar table {
padding: 1px;
/*border-collapse: collapse;*/
border: 0px;
}

#calendar table caption {
color: #666666;
font-family : Arial, Helvetica, Sans-serif;
font-size : 0.7em;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;
text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}

#calendar table th {
text-align: center;
font-weight: bold;
font-size: xx-small;
}

#calendar table tr td {
border: 1px solid #666666;
text-align: center;
font-size: xx-small;
}

#calendar table tr ul  {
color: #666666;
list-style: dot;
margin: 0px 0px 0px 20px;
padding: 4 0 5 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.7em;	
}

#calendar table tr td.cssDayMouseOver {
border: 1px dotted red;
cursor: hand;
}

#calendar table tr td.cssDayMouseOut {
border: 1px solid #666666;
}

#calendar table tr td.cssEntryBox {
border: 1px solid gray;
padding: 6px;
text-align: left;
background: #FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
color: #666666;
}

#calendar table tr td ul li {
color: #666666;
}

#calendar table tr td div.cssDayEntryHeader {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
text-align: left;
font-weight: bold;
padding: 4;
}

#calendar table tr td div.cssDayAvailable {
text-decoration: underline;
text-weight: bold;
}

form {
padding: 10px;
background-color: transparent;
margin: 0px 0px 10px;
}

#profile {
font-family:  Verdana, Helvetica, Sans-serif;
font-size: 11px;
font-weight: normal;
margin: 0px 0px 10px 0px;
padding-left: 0px;
text-align:center;
}

#profile h4 {
font-family:  Arial, Helvetica, Sans-serif;
font-size: 12px;
font-weight: bold;
color: #515c58;
background-color: #c8cadf;
padding:5px;
margin-bottom:10px;
text-transform: uppercase;
text-align:left;
}

#profile p{
}

Hur gör jag så att min bloggtitel och beskrivning syns på headern?

Den här blogglayouten har som defult att inte visa bloggtitel och beskrivning eftersom det redan är text på headern. Om du vill visa dem ändå, som jag gör på exempellayouten går du in i stilmallen och ändrar på följande vis:

Leta reda på:
/* bloggtitel */ h1 {
en massa kod här
}

Ta bort raden display:none;

Nedanför står det:
/*bloggbeskrivning */ h2 {
också en massa kod här
}

Även här tar du bort raden display:none;

OBS! OBS! Har du lagt till saker i din kodmall? Bilder/länkar(om du fiddlat direkt i koden, inte med länkvertyget)/javascript etc? Allt sånt försvinner när du byter tema på bloggen. Om stilmallen inte fungerar utan att du först byter tema måste du kopiera dina kodsnuttar till ett dokument (i Anteckningar eller Wordpad) medan du ändrar tema på din blogg, sen kan du klistra in dem i din kodmall igen.

Edit(okt31): Har fixat profilen för de som använder sånt och länkar (för bilderna).

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

2009-10-17 @ 12:06:59 DESIGN Blogglayout Trackbacks () Permalink Tillbaka till sidans topp

(6)

Innan du kommenterar kan det vara bra att veta några saker.

Jag gör inga gratisdesigner annat än vad som läggs ut på bloggen.
Om det står exempelvis "gratis design" i ett inlägg är det bara att ta för sig. Du behöver inte fråga om lov, men jag förväntar mig cred/länk i ett inlägg på din blogg. Om det inte står någonstans att du får ta bilden, designen osv så är det "se, men inte röra" som gäller.
Jag läser bara bloggar jag är intresserad av och vill alltså inte utbyta Bloglovin-prenumerationer.
Reklam och spam raderas.

monia ♥ att leva med jävulen säger:

hej, fin blogg du har :) jag har ett tips till dig, en sida där man samlar poäng och får hem presentkort på skor direkt hem i brevlådan. Alltså GRATIS SKOR :) Låter inte helt fel va? Bli medlem på den här länken och börja samla poäng du också!

http://www.gratisskor.se/Register.asp?r=15779

2009-10-21 @ 13:55:31
URL: http://moniasundgrenjansson.blogg.se/

Alma säger:

Mina länkar försvann i bloggen när jag la till designen :S

2009-10-23 @ 12:10:04

Tessan säger:

@Alma Allt du har lagt in direkt i din kodmall förvinner när du byter tema (till Fashion). För att länkarna ska stanna måste du lägga upp dem med hjälp av länkverktyget och inte skriva dem direkt i koden. Om du använder någon av standardmallarna på blogg.se sen tidigare bör du inte behöva byta mall dock (om det inte ser konstigt ut). Då är det bara att lägga in stilmallen och strunta i att byta tema. Stilmallen i sig påverkar inte kodmallen och alltså inte heller innehållet i din blogg såsom länkar, bilder osv.

2009-10-23 @ 13:28:15
URL: http://kreativ.blogg,se

Malin säger:

När jag försökte byta headern till en egen, då blev bilden för liten, alltså den tar inte upp hela ytan där bilden som hör till den här designen. Hur gör jag då?

2009-11-02 @ 20:10:07
URL: http://cuo.blogg.se/

elle säger:

jättefin design, lånar den :D

2010-01-06 @ 20:41:44
URL: http://ellehansen.blogg.se/

Emmy säger:

Jag skulle jätte gärna vilja ha den desigen till min blogg men den vill inte funka :'( kan du hjälpa mig lägga in den snälla snälla

2010-02-25 @ 01:27:13
URL: http://bacardikid.blogg.se/

Trackback

KREATiV -- Text I Foto I Design

I min blogg finns det mycket bilder, mycket personligt och mycket kreativitet. Foto, bloggdesign, texter, poesi, grafik, kläder, smink, och annat skoj. Kom och kika in en sväng. Kanske hittar du något du kan ta med dig hem.

Gratis bloggdesign - Dimma (kod+grafik)

Innan du kommenterar kan det vara bra att veta några saker.

Kommentera inlägget här:

Senaste

Kategorier

Arkiv

Länkar

Terese Mörtvik