KREATiV - Gratis bloggdesign - Julenatt/Vinter (kod+grafik)

Gratis bloggdesign - Julenatt/Vinter (kod+grafik)

Edit (jan, 2012): Ny version uppe, version 2.0 Kod nedan.

Egentligen var det layouten inspirerad av Gossip Girl jag skulle lägga upp. Sen insåg jag att det är (natten till) Första Advent. Klart du kanske är lite småsugen på en jullayout till din blogg. Alltså blev det en juldesign istället. Röda stugor, snö och stjärnklara nätter - vad kan vara mer jul och svensk vinter än det?

PS. Det är ju inget speciellt kristet med layouten så om du bara vill ha en mysig vinterdesign funkar den ändå.

Ett fungerande exempel på designen hittar du på testbloggviii.

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:

@charset "utf-8";
/* CSS Document */

body {
    background: url("http://farm3.static.flickr.com/2580/4141179453_fcbd69b665_o.jpg") repeat-x scroll 0 0 #000116;
    margin: 0;
    padding: 0;
}
img {
    border: medium none;
}
#profile img {
    background: none repeat scroll 0 0 white;
    border: 1px solid #CCCCCC !important;
    margin-left: -16px;
    padding: 5px;
}
img a {
    border: medium none;
}
a {
    color: #003333;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #003333;
    font-weight: bold;
    text-decoration: underline;
}
#wrapper {
    clear: none;
    margin: 30px auto;
    padding: 0;
    width: 960px;
}
#wrapper:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
p {
    margin: 0;
    padding: 0;
}
#header {
    background: url("http://farm3.static.flickr.com/2710/4141179459_fc25a78ed5_o.jpg") no-repeat scroll center top #F1F1F1;
    height: 503px;
    text-align: center;
    width: 760px;
}
.mattblacktabs {
    border-bottom: 0 none;
    margin-top: -28px;
    overflow: hidden;
    width: 100%;
}
.mattblacktabs ul {
    font: bold 12px Verdana;
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 15px;
}
.mattblacktabs li {
    display: inline;
    margin: 0;
}
.mattblacktabs li a {
    background: none repeat scroll 0 0 #121B2C;
    border-left: 2px solid silver;
    color: #F1F1F1;
    display: block;
    float: left;
    margin: 0;
    padding: 7px 8px;
    text-decoration: none;
    border-right: 1px solid #ccc;
}
.mattblacktabs li a:visited {
    color: #F1F1F1;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a {
    background: none repeat scroll 0 0 #f1f1f1;
    color: #121B2C;
}
#side {
    background: url("http://farm8.staticflickr.com/7155/6772332985_a951c8c030.jpg") no-repeat scroll center top #FFFFFF;
    border-bottom: 1px solid silver;
    float: right;
    margin-top: -350px;
    padding: 120px 10px 10px;
    width: 170px;
}
#content {
    background: none repeat scroll 0 0 #F1F1F1;
    float: left;
    left: 0;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 740px;
}
#header a {
    background-color: transparent;
    color: #CCCCCC;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
#header a:hover {
    background-color: transparent;
    padding: 0;
    text-decoration: none;
}
h1 {
    color: #CCCCCC;
    float: right;
    font-family: "century gothic",arial,sans-serif;
    font-size: 36px;
    font-weight: normal;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 20px;
    padding: 0;
    text-align: right;
    width: 250px;
}
h2 {
    clear: right;
    color: #999999;
    float: right;
    font-family: georgia serif;
    font-size: 16px;
    font-style: italic;
    font-weight: normal;
    margin-right: 30px;
    margin-top: 0;
    padding: 0;
    text-align: right;
    width: 400px;
}
h3 {
    border-bottom: 1px dotted silver;
    color: #333333;
    font-family: georgia,serif;
    font-size: 30px;
    font-weight: normal;
    margin: 5px 5px 15px;
    padding: 5px;
}
.navheader {
    background-color: #F7F7F7;
    border-bottom: 1px dotted #CCCCCC;
    color: #333333;
    font-family: "georgia",serif;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0;
    padding: 5px;
    text-transform: uppercase;
}
.nav {
    color: #333333;
    font-family: verdana,Arial,Helvetica,Sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin: 0;
}
.nav ul {
    background-color: transparent;
    font-weight: normal;
    margin: 5px 0;
    padding: 0;
}
.nav li {
    font-weight: normal;
    list-style: none outside none;
    padding: 0 0 7px;
}
.nav a {
    color: #003333;
    text-decoration: none;
}
.nav a:hover {
    color: #121B2C;
    text-decoration: underline;
}
.entrybody {
    border-bottom: 1px groove #CCCCCC;
    color: #333333;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 150%;
    margin: 5px;
    padding: 0 0 100px;
}
.entrybody a {
    color: #003333;
    text-decoration: none;
}
.entrybody a:hover {
    background-color: #F1F1F1;
    color: #121B2C;
    text-decoration: none;
}
.entrymeta {
    clear: both;
    color: #333333;
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    font-weight: normal;
    padding-bottom: 10px;
    text-align: right;
}
.entrymeta a {
    color: #003333;
    text-decoration: none;
}
.entrymeta a:hover {
    background-color: #F1F1F1;
    color: #121B2C;
    text-decoration: none;
}
.commentheader {
    background-color: #003333;
    color: #F1F1F1;
    font-family: arial,helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 5px;
}
.commenttext {
    background-color: #F1F1F1;
    border: 1px solid silver;
    color: #000000;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 130%;
    padding: 5px;
}
.commenttext a {
    color: #121B2C;
    text-decoration: none;
}
.commenttext a:hover {
    color: #121B2C;
    text-decoration: underline;
}
.commentmeta {
    color: #999999;
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    font-weight: normal;
    margin: 5px 0 20px;
}
.commentmeta a {
    color: #003333;
    text-decoration: none;
}
.commentmeta a:hover {
    background-color: #F1F1F1;
    color: #121B2C;
    text-decoration: none;
}
.commentform {
    color: #333333;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    font-weight: normal;
    margin: 0 0 20px;
}
.separator {
    display: none;
}
.default {
    color: #333333;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 0 0 10px;
    text-transform: uppercase;
}
.subside {
    font-size: 11px;
    font-weight: normal;
    padding: 10px;
    text-align: right;
}
.xmlButton {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FF6600;
    border-color: #FFCC99 #663300 #333300 #FF9966;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    font: bold 10px Verdana,Arial,Helvetica,Sans-serif;
    margin: 0;
    padding: 0 3px;
    text-decoration: none;
}
.image {
    border: medium none;
}
.thumbnail {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    margin: 0 6px 6px 0;
    padding: 2px;
}
.video {
    border: 0 none;
    padding: 0;
}
.fieldName {
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    margin: 0 0 12px;
}
select {
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
}
#calendar {
    background-color: #FFFFFF;
    color: #333333;
    font-family: 'Trebuchet MS',Verdana,sans-serif;
    margin: 12px 0;
    padding: 10px;
    text-align: left;
}
#calendar table {
    border: 0 none;
    padding: 1px;
}
#calendar table caption {
    border-bottom: 1px solid #999999;
    color: #666666;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.3em;
    padding: 3px;
    text-align: left;
    text-transform: uppercase;
}
#calendar table th {
    font-size: xx-small;
    font-weight: bold;
    text-align: center;
}
#calendar table tr td {
    border: 1px solid #666666;
    font-size: xx-small;
    text-align: center;
}
#calendar table tr ul {
    color: #666666;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 0.7em;
    margin: 0 0 0 20px;
}
#calendar table tr td.cssDayMouseOver {
    border: 1px dotted red;
}
#calendar table tr td.cssDayMouseOut {
    border: 1px solid #666666;
}
#calendar table tr td.cssEntryBox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid gray;
    color: #666666;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 0.8em;
    padding: 6px;
    text-align: left;
}
#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;
    font-weight: bold;
    text-align: left;
}
#calendar table tr td div.cssDayAvailable {
    text-decoration: underline;
}
form {
    background-color: transparent;
    margin: 0 0 10px;
    padding: 10px;
}
#profile {
    background: url("http://farm8.staticflickr.com/7027/6772174895_dd2f32ed93_m.jpg") no-repeat scroll center top transparent;
    font-family: Verdana,Helvetica,Sans-serif;
    font-size: 11px;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 0;
    text-align: center;
}
#profile h4 {
    color: #CCCCCC;
    font-family: georgia,serif;
    font-size: 24px;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 30px;
    padding: 5px;
    text-align: left;
}
#profile p {
    margin-top: 10px;
}

Hur gör jag för att få in en sån där horisontell meny då?

Tab-menyn är en ganska basic meny från DynamicDrive. Jag har anpassat den till min design färdigt i stilmallen, så det behöver du inte bekymra dig om. Det enda du behöver göra är att lägga in själva kodsnutten för menyn i din kodmall (alltså inte stilmall). Den del av den horisontella menyn du ska klistra in i kodmallen består i princip bara av en enkel lista och du bör kunna lägga in den och dina egna länkar utan problem.

När du har lagt in stilmallen sparar du alltså och går sedan in i kodmallen istället.

Leta rätt på följande kodrader:

<div id="header">
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

Direkt efter detta klistrar du in:

<div>
<ul>
<li><a href="http://kreativ.blogg.se">Länk 1</a></li>
<li><a href="http://kreativ.blogg.se">Länk 2</a></li>
<li><a href="http://kreativ.blogg.se">Länk 3</a></li>
<li><a href="http://kreativ.blogg.se">Länk 4</a></li>
<li><a href="http://kreativ.blogg.se">Länk 5</a></li>
</ul>
</div>

Ersätt adresserna med dina egna adresser och 'Länk 1', 'Länk 2' osv med dina egna namn. När du är färdig markerar du koden och kopierar. Spara kodmallen och bläddra sedan vidare i rullistan för att komma till nästa kodmall (det finns fyra stycken). Klistra in koden i nästa kodmall, spara, upprepa.

Och hur gör jag den där fallande snön?

Det är javascript, kopiera koden nedan och klistra in den innan </body>

<script type="text/javascript">
Width =1200; // 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>

Presto! Färdigt ska det vara nu.
Hoppas du blir nöjd med din nya vinterlayout!

OBS! OBS! OBS!

Detta är en stilmalldesign endast, därför har jag inte lagt in någon länk till mig färdigt. Du SKA länka till mig i sidomenyn om du använder denna design.

OBS! OBS! OBS!