Bloggstyle.se - bloggtips
en mycket bra sida om du vill göra din blogg mer personlig! :)
Länkbyte
denniskorv? ja tack!
ett till länkbyte, denna gången med min fina barndomsvän lollo som jag kallar henne
hon heter louise waldemar och bloggar på http://denniskorv.blogg.se
hon skriver om lite olika som musik, inköp, bak/mat, fotto osv.
kolla in!
Lindasplacee - Linda Karlsson
hannosh.blogg.se
Sanna Elofsson :)
sanna elofsson - en hur go och snäll tjej som helst!
hon går i min klass. har nämnt henne på bligen innan
hon är riktigt trevlig och har verkligen sinne för humor
hon bloggar på http://elofssons.webblogg.se/
hon skriver om sin vardag och tipsar om produkter hon testar och fyller sin blogg med massa fina bilder på henne och andra ting :)
kolla bloggen! :)
Jag vet varifrån jag kommer. Mina släktingar odlar mat.De är inte rika, men de är lyckliga! - Laakinoiise
laakinoisse - louise konga en söt tjej som bloggar på http://laakinoiise.blogg.se/
på hennes blogg hittar man allt möjligt, bilder, dagens blogg, dans/tips, inspiration, musik, shopping, hiss/diss m.m
har faktiskt hjälpt denna tjejen att fixa till sin design också :)
kolla in hennes blogg! :)
YESTERDAY IS HISTORY - robert ahlström
robert ahlström en väldigt trevlig kille med jävligt vettiga åsikter
bloggar på http://www.nattstad.se/robertahlstrom
där han skriver om sin vardag, känslor, videos och sina åsikter om intressanta ämnen
hans texter är långa med förbannat läsvärda!
så kolla in hans blogg verkligen! :)
buttsekz - ingen kommer undan, inte ens i sverige!
- en fin tjej vid namn isabella (bella) som bloggar på http://buttsekz.blogg.se
- faktiskt en gammal klass kompis man haft många roliga minnen med!
- en humor-rik tjej som skriver vad hon tycker! fyller sin blogg med fest, musik, känslo snack, dagens/veckans, outfits, videos osv
- och så pluggar hon på kungsmad på programmet skönhet och hälsa. sminka och styla kan hon!
Smilies till din blogg :)
- sen bläddrar du ner tills du kommer ner till inställningar
- där väljer du om du har blogg/webblogg.se eller blogger/blogspot.se. var du vill ha dina smiliesar i bloggen, samt vilket paket av smiliesar du vill ha.
- sen bläddrar du ner till denna rutan kommer upp (kopiera koden)
- gå in i dina kodmallar och klistra in koden strax efter <head> ( den måste vara innanför <head> och </head>) och gör det på alla kodmallarna ( framsida, inläggssida, kategorisida och arkivsida.
fallande snö i bloggen
- kopiera den snön du vill ha eller om du vill ha hjärtan
- gå in på design - kodmallar och leta upp </head>
- klistra in scriptet innan </head>
- och gör det på de sidorna du vill ha det på (framsida, inläggsida, kategorisida & arkivsida)
Stilmallens vanligaste/viktigaste koder
MARGIN, FLOAT, A:HOVER?
dessa koder är väl dem som syns och återkommer mest i en stilmall och har också störst betydelse. när man ändrar dessa så märks det tydligt, kan man säga. tänkte då beskriva dem och visa med bilder.
MARGIN & PADDING
en blogg sida är uppbyggd med massa olika boxar/element ex. wrapper, header, content, side osv.
margin (rosa) bestämmer avståndet mellan boxarna
padding (grön) bestämmer avståndet mellan själva boxen och innehållet/texten
margin-top: 20px; (hur långt i från toppen boxen ska vara till nästa box
margin-right: 30px; (hur långt i från höger boxen ska vara till nästa box
margin-bottom: 40px; (hur långt i från botten boxen ska vara till nästa box
margin-left: 10px; (hur långt i från vänster boxen ska vara till nästa box
kan också skrivas på samma rad för att minska på koden:
margin: 20px 30px 40px 10px;
om man vill ha samma avstånd från alla sidor skriver man bara:
margin: 10px;
padding-top: 20px; (hur långt in från toppen innehållet i boxen ska vara från kanten
padding-right: 30px; (hur långt in från höger innehållet i boxen ska vara från kanten
padding-bottom: 40px; (hur långt in från botten innehållet i boxen ska vara från kanten
padding-left: 10px; (hur långt in från vänster innehållet i boxen ska vara från kanten
kan också skrivas på samma rad för att minska på koden:
padding: 20px 30px 40px 10px;
om man vill ha samma avstånd från alla sidor skriver man bara:
padding: 10px;
BOX & BAKGRUND
koderna här under ändrar själva utseendet på en box. allt bakom bilder/text osv.
width: 1000px; (bredd på en box
height: 500px; (höjd på en box
float: left/right; (om en box ska vara på höger eller vänster sidan (går ej med center)
background-color: #000000; (färg på bakgrunden. en färgkod skrivs alltid med # följt av sex olika bokstäver/siffror
background-imgage: url(http://kod till bild.jpg); (om bakgrunden ska vara en bild
background-repeat: no-repeat/repeat/repeat-x/repeat-y; (om bakgrunden är en bild kan man ändra om bilden ska repeteras eller inte eller om den ska repeteras åt x - vågrätt eller åt y - lodrätt
background-attachment: fixed/none; (om bakgrunden är en bild som täcker hela bakgrunden så kan man ändra om bilden ska vara fast, när du scrolla ner så följer bakgrunden med
background-position: center/right/left; (om bakgrunden är en bild kan man ändra var man vill att bilden ska vara
RAM
man kan ha ramar runt sina boxar/elements och då använder man sig av dessa koderna.
border-width: 3px; (ramens tjocklek
border-style: solid/dotted; (ramens utseende
border-color: #CCCCCC; (ramens färg
såhär ser ramen ut för koden här under:
side
border-width: 5px;
border-style: solid;
border-color: #7FFF00;
content
border-width: 2px;
border-style: dotted;
border-color: #FF0000;
TEXT
detta är koder man kan lägga till i olika boxar för hur texten ska se ut i just den boxen. dessa koderna kan man också lägga till när man ändrar hur länkarna ska se ut.
font-family: Arial, Helvetica, sans-serif; (typsnittet
font-size: 24px; (textens storlek - inläggs storlek är normalt 12-14px
font-weight: normal/bold; (typsnittet
text-transform:uppercase; (texten är med stora bokstäver
text-align:right/left/center; (om texten ska höger, vänsterjusteras eller centreras
text-decoration: underline; (texten är understruken
LÄNKAR
när man ändrar färg,understruken osv. på en länk är det alltid "a" och hur länken ska se ut när man håller musen över är alltid "a:hover". sen om man bara vill ändra länkarna i en speciell box lägger man till den koden för vad boxen heter framför "a" & "a:hover".
såhär ser koden ut för länken här under (länken går till detta inlägg):
a {
font-size: 13px;
color: #666666;
text-decoration:none;
}
a:hover {
color: #666666;
text-decoration: underline;
}
Kodguide - Stilmallen
VAD ÄR VAD I STILMALLEN?
ja det är inte alltid lätt att veta, och lägger man in fel koder/kommandon på fel ställen kan det lätt se konstigt ut. så tänkte beskriva lite grundligt vad de olika styckena hör till. jag utgår från blogg.se gratis tema Fashion.
/**BAKGRUND**/
body {
margin: 0px;
padding:0px;
background: #FFFFFF url(http://static.blogg.se/shared/img/css/fashion_bg.jpg);
}
/**ALLA LÄNKARNA**/
a {
color: #999999;
}
a:hover {color: #80FF9F;}
/**SJÄLVA BLOGGENS BAKGRUND**/
#wrapper {
clear:none;
margin: 30px auto;
padding: 20px;
width: 830px;
background-color: #FFFFFF;
}
/**GÖR ATT BAKGRUNDEN BLIR EN HEL RUTA OCH INTE DELAS**/
#wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/**TEXT - OM DU ANGER <P>text</p> I KODMALL**/
p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
/**BILDEN HÖGT UPP - brukar vara personlig**/
#header {
background: #FFFFFF url(http://static.blogg.se/shared/img/css/fashion_top.jpg) no-repeat right center;
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px 0px 20px;
width: 800px;
height: 55px;
}
/**MENYN**/
#side {
float: left;
width: 180px;
margin: 0px;
padding: 24px 18px 0px 12px;
left:-30px;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
/**INLÄGGENS BAKGRUND**/
#content {
overflow: hidden;
width: 538px;
position:relative;
left:0px;
padding: 20px 0px;
voice-family:"\"}\"";
voice-family:inherit;
width:538px;
float: right;
margin: 0px 10px 0px 0px;
}html>body #content { width: 538px }
/**TEXTEN I HEADERN - där ditt blogg namn står**/
#header a {
color: #000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
}
/**TEXT - OM DU ANGER <h1>text</h1> I KODMALL**/
h1 {
font-family: arial, verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000;
text-transform:uppercase;
margin: 0px;
padding: 0px;
height: 30px;
}
/**TEXT - OM DU ANGER <h2>text</h2> I KODMALL**/
h2 {
font-family: arial, verdana, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
margin: 0px;
padding: 0px;
width: 170px;
}
/**RUBRIK PÅ INLÄGGEN **/
h3 {
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding:10px 10px 10px 0px;
color: #ED6EA3;
margin: 0px 0px 10px;
text-transform: uppercase;
}
/** RUBRIKERNA I MENYN**/
.navheader {
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
padding:5px 5px 0px;
margin-bottom:0px;
background-color:#FFFFFF;
text-transform: uppercase;
}
/**BAKGRUND FÖR RUBRIK, LÄNKAR OSV I MENYN**/
.nav {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
margin: 0px;
}
/**LÄNKLISTA**/
.nav ul {
margin: 0px 0px 12px;
padding: 5px 10px 10px;
font-weight: normal;
background-color: #FFFFFF;
}
/** LÄNKARNA I MENYN**/
.nav li {
list-style: none;
padding: 0px 0px 6px 0px;
font-weight: normal;
}
/**LÄNKARNA I MENYN**/
.nav a { color: #000000; }
.nav a:hover { color: #ED6EA3; }
/** INLÄGGEN **/
.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;
}
/**TID, PERMALIN, KATEGORILÄNK OSV UNDER INLÄGGEN **/
.entrymeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #666;
text-align:right;
}
/**LÄNKARNA UNDER INLÄGGEN**/
.entrymeta a { color: #E04201; }
.entrymeta a:hover { color: #80FF9F; }
/**RUBRIK FÖR KOMMENTAR - postat av:**/
.commentheader {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color:#809FFF;
padding:5px;
color: #FFFFFF;
}
/**TEXT FÖR KOMMENTARENA**/
.commenttext {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000;
line-height: 130%;
}
/**KOMMENTARS TID, BLOGGADRESS OSV UNDER KOMMENTAREN**/
.commentmeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #999999;
margin: 10px 0px 20px 0px
}
/**LÄNKARNA UNDER KOMMENTAREN**/
.commentmeta a { color: #809FFF; }
.commentmeta a:hover { color: #80FF9F; }
/**KOMMENTARS RUTAN - där man skriver en kommentar**/
.commentform {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
margin: 0px 0px 20px 0px
}
/**LINJEN MELLAN INLÄGGEN**/
.separator {
border-top: 2px solid #CCCCCC;
border-bottom: 0px solid #CCCCCC;
margin: 14px 0px 14px 0px
}
/**RUBRIK TILL KOMMENTARER OCH TRACKBACKS**/
.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;
}
/**BILDERNA I INLÄGGEN**/
.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;
}
/**BLOGG.SE HAR TAGIT BORT KALENDER FUNKTIONEN**/
#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;
}
/**SÖK FÖRMULÄRET OCH KOMMENTARSFORMULÄRET**/
form {
padding: 10px;
background-color: #FFFFFF;
margin: 0px 0px 10px;
}
/**TEXT - NAMNET UNDER PROFILBILDEN**/
#profile {
font-family: Verdana, Helvetica, Sans-serif;
font-size: 11px;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding-left: 16px;
}
/**TEXT - RUBRIKEN ÖVER PROFILBILDEN - om**/
#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;
}
/**TEXT - PROFIL**/
#profile p{
}
