Hur man bygger sin blogg - Lägg in header
3 kommentarer /
Kommentera här!
Nu var det en tjej som undrade hur man lägger in sin header när man bygger sin blogg på detta sättet jag har förklarat i detta inlägget: "Hur man bygger sin blogg"
För att göra detta behöver du koderna i det första inlägget "Hur man bygger sin blogg" prova på en testblogg (underblogg)
För att lägga in en egen header är inte alls svårt.
(headern är den bild som är högst upp på bloggen som visar det första intrycket av vad din blogg innehåller, med exempel bild och text.)
1. När man skapat sin header laddar man upp den på sin blogg, och kopierar länken till bilden.
2. Klicka på kodmallen, kopiera denna koden: (OBS LÄGG IN KODEN PÅ ALLA SIDOR, INLÄGGSSIDAN ETC)
<div id="side1">
<img src="LÄNK FRÅN BILD HÄR">
</div>
3. Lägg in koden under </head>
Nu skrev jag in "side1" det är siffran på varje "side" som visar vilken som är vilken när man ska exempel flytta headern, allt detta gör man i stilmallen.
4. Klicka på stilmallen, kopiera denna koden:
#side1 {
position: absolute;
left: 100px;
top: 10px;
width: 538px;
display: inline;
background:#ffffff;
border: 1px solid #cccccc;
}
5. Lägg in under denna koden:
#side {
position: absolute;
left: 40px;
top: 40px;
width: 180px;
display: inline;
background:#ffffff;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
border: 1px solid #cccccc;
}
(Lägg in koden här)
6. För att flytta headern mer åt höger eller vänster gör man det på left:40px;
Öka 40 med exempel 100px; så flyttas den mer åt höger.
Minska 40 med exempel 20px; så flyttas den mer åt höger.
Samma sak för att flytta upp eller ner gör man på top:40px;
Nu var detta bara exempel men det är bara att prova sej fram tills man är nöjd.
Vill man inte ha en kant runt om, tar bort denna koden: border: 1px solid #cccccc;
7. Spara så ska det vara klart!
Category:
Hur man bygger sin blogg
3 kommentarer /
Kommentera här!
Om du är nybörjare är det lättast att du testar detta på en underblogg eller ny blogg och därefter testa dej fram, men som jag alltid gör när jag bygger en ny design eller vill ändra gör jag detta på en underblogg och kopierar över koderna på min riktiga blogg när jag är nöjd.
1. Välj tex temat "fashion"
2. Börja med att ändra koderna i stilmallen, ta bort allt i stilmallen och klistra in dessa koder:
html,body,h1,h2,h3,h4,h5,h6,p,dl,dd,dt,ul,li,img,table,caption,tr,th,td,tt,span,fieldset,legend, form { margin:
0; padding: 0; border: 0; }
input, select, textarea { margin: 0; padding: 0; }
/*
* play around with these to change settings on your blog!
*/
/* link colors */
a {
color: #cccccc; text-decoration: none;
font-family: verdana,arial;
font-size: 11px;
}
a:hover {
color:#ffffff;
font-family: verdana,arial;
}
#wrapper}
position: absolute;
}
#wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
body {
background: #FFFFFF url(http://styleblogg.blogg.se/bakgrunder/images/2010/bg_90197815.jpg);
}
#side {
position: absolute;
left: 40px;
top: 40px;
width: 180px;
display: inline;
background:#ffffff;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
border: 1px solid #cccccc;
}
div#content {
position: absolute;
top:120px;
left:240px;
float: right;
clear: right;
display: inline;
padding: 0 5px 5px 5px;
width: 538px;
background: #ffffff;
border: 1px solid #cccccc;
}
#header a {
color: #000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
}
h1 {
font-family: arial, verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000;
text-transform:uppercase;
margin: 0px;
padding: 0px;
height: 30px;
}
h2 {
font-family: arial, verdana, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
margin: 0px;
padding: 0px;
width: 170px;
}
/** Entry headers **/
h3 {
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding:10px 10px 10px 0px;
color: #333333;
margin: 0px 0px 10px;
text-transform: uppercase;
}
.navheader {
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #cccccc;
padding:5px 5px 0px;
margin-bottom:0px;
background-color:#FFFFFF;
text-transform: uppercase;
}
.nav {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
margin: 0px;
}
.nav ul {
margin: 0px 0px 12px;
padding: 5px 10px 10px;
font-weight: normal;
background-color: #FFFFFF;
}
.nav li {
list-style: none;
padding: 0px 0px 6px 0px;
font-weight: normal;
}
.nav a { color: #000000; }
.nav a:hover { color: #cccccc; }
/** Post's body text **/
.entrybody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
line-height: 150%;
margin: 0px 0px 10px;
background-color: #FFFFFF;
padding: 10px;
}
/** 'Posted by' txt **/
.entrymeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #666;
text-align:right;
}
.entrymeta a { color: #333333; }
.entrymeta a:hover { color: #cccccc; }
.commentheader {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color:#809FFF;
padding:5px;
color: #FFFFFF;
}
.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: #809FFF; }
.commentmeta a:hover { color: #80FF9F; }
.commentform {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
margin: 0px 0px 20px 0px
}
.separator {
border-top: 2px solid #CCCCCC;
border-bottom: 0px solid #CCCCCC;
margin: 14px 0px 14px 0px
}
.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: 2px solid #CCCCCC;
background-color:#FFFFFF;
padding:2px;
margin: 0px 6px 6px 0px;
}
.thumbnail {
border: 2px solid #CCCCCC;
background-color:#FFFFFF;
padding:2px;
margin: 0px 6px 6px 0px;
}
.video{
padding: 0px 0px 0px 0px;
}
.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: #FFFFFF;
margin: 0px 0px 10px;
}
#profile {
font-family: Verdana, Helvetica, Sans-serif;
font-size: 11px;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding-left: 16px;
}
#profile h4{
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
margin: 0px 0px 6px 0px;
}
#profile p{
}
3. Klicka nu upp bloggen och se om det ser ut som på "bild 4" i detta inlägget. Prova även att updatera med F5 om det ser likadant ut.
Nu står det ORGINAL högst upp till vänster för att ta bort det gå in i kodmallen och ta bort denna koden, det markerade och spara:
4. Nu är koderna inlaggda och det är bara fritt fram och börja bygga på designen som du vill ha den ska förklara lite kort hur vissa saker funkar:
I stilmallen finns denna koden:
På content och de andra side är det samma sak hur det funkar.
5. För att lägga in en header:
Ladda upp den som vanligt och kopiera koden
Gå sedan in i kodmallen och lägg koden under <div side >
Lägg även till detta, så här ska det hela se ut:
<div side1>
<img src=""Länk från bild här">
</div>
Spara och klicka sedan på stilmallen, bläddra ner till koden #side{
Lättast är att man kopierar hela koden #side{ och lägger under och sedan ändrar width, left etc
Exempel hur de ska se ut:
#side {
position: absolute;
left: 40px;
top: 40px;
width: 180px;
display: inline;
padding: 0 0px 0px 0px;
background: #ffffff;
border: 1px solid #cccccc;
}
#side1 {
position: absolute;
left: 200px;
top: 10px;
width: 600px;
display: inline;
background: #none;
}
Ändra nu top och left för att lägga headern där du vill ha den.
För varje gång du vill lägga in något skapa en ny #side men med en annan siffra, samma sak i kodmallen.
Nu är det bara att prova sej fram, om ni inte förstår mina förklaringar är det bara att skriva.
