En gratismall med inramade inlägg i bubblor, man får ändra hur man vill, bakgrund, header och övrigt.

1. Kopiera koden nedan:

body { background:#ffffff url(http://styleblogg.blogg.se/bloggstylee/images/2011/background_128610022.jpg); background-attachment:fixed; margin:0px; text-align:center; padding-left: 0px; padding-bottom: 14px; } a {color: #999999;text-decoration:none;} a:hover {color: #cccccc; background: none; border-bottom:1px dotted #cccccc; text-decoration:none;} #wrapper { margin:0px auto; width: 1050px; 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:#ffffff url('') no-repeat center top; margin-left: 28px; margin-right: 40px; margin-top:50px; padding-top:10px; padding-bottom:0px; height: 125px; } #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; } #side { margin-right: 40px; padding: px; float: right; width: 230px; margin-top:-5px; background: #ffffff; border-top: 1px dotted #efedee; padding: 5px 5px 5px 15px; } #content { overflow: hidden; width:700px; float: left; background: url('')top; padding: 40px 5px 5px; voice-family:"\"}\""; voice-family:inherit; text-align: left; vertical-align: top; padding-left: 25px; margin-left: 28px; margin-top: -5px; background: #ffffff; border-top: 1px dotted #efedee; border-right: 2px solid #efedee; } #header a { color: #cccccc; text-decoration: none;cursor: crosshair;} h1 { font-family: Trajan Pro, Sylfaen, sans-serif; font-size: 56px; font-weight: normal; color: #cccccc; margin-bottom:0px; padding:0px; text-align: center; text-shadow: #cccccc 1px 4px 3px; } 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: arial; font-size: 19px; font-weight: bold; color: #555555; text-transform: none; background: #FFFFFF url(http://styleblogg.blogg.se/eeeeeeeee/images/2011/top_126938240.jpg) no-repeat; padding:24px 10px 0px 32px; margin-top: 0px; margin-bottom: 0px; margin-left: 20px; height: 37px; vertical-align: top; } .navheader { font-family: Georgia, verdana, sans-serif; font-size: 15px; font-weight: normal; color: #8a8a8a; text-align:left; padding: 0px; padding-left:0px; padding-right:5px; background:none; text-transform: absolute; margin-right: 10px; border-bottom:1px solid #cccccc; } .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: #cccccc;text-decoration:none;padding-left:7px; cursor: crosshair; } /** Post's body text **/ .entrybody { font-family: Century Gothic, sans serif; font-size: 13px; font-weight: normal; color: #333; line-height: 140%; text-align:justify; padding-top:20px; padding-left:35px; padding-right:165px; padding-bottom:20px; margin-left: 20px; background: #FFFFFF url(http://styleblogg.blogg.se/eeeeeeeee/images/2011/mid_126939360.jpg) repeat-y; } /** 'Posted by' txt **/ .entrymeta { font-family: arial; font-size: 10px; font-weight: normal; color: #666; background: #FFFFFF url(http://styleblogg.blogg.se/eeeeeeeee/images/2011/bott_126941046.jpg) no-repeat; padding-left:40px; padding-right:0px; padding-top:20px; padding-bottom:20px; text-align:left; margin-left: 20px; margin-right:25px; } .entrymeta a { color: #000; text-decoration:none;font-style: italic;} .entrymeta a:hover {color: #cccccc;text-decoration:none; cursor: crosshair;} .commentheader { font-family: tahoma , arial, helvetica, sans-serif; font-size: 14px; font-weight: normal; background: #f46797; url('') center; text-align:left; border: 0px solid #ccc; color: #ffffff; 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: 14px; 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:12px; font-weight: normal; color: #000000; height:30px; 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:#f46797; url('') center; font-family: tahoma , arial, sans-serif; font-size: 12px; font-weight: normal; color: #ffffff; margin: 50px 100px 0px 100px; padding: 0px 0px 30px 60px; border: 1px solid #ffffff; } .default { display:none; } .separator { border-top: 0px solid #cccccc; border-bottom: 0px solid #cccccc; margin: 10px 10px 10px 10px } .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*/

2. Ta bort allt i stilmallen och klistra in koden.

3. Om det inte skulle se bra ut, återställa kodmallarna (alla sidor) spara viktigt material, som egna bilder.

Så ska det se bra ut sedan.