Designhjelp

Hei!
Her er det noen designhjelpe-koder som jeg har fått av storesøstern min, Henriette, håpoer du får bruk for dem! ^^



TIPS

CTRL + A = Merk alt
CTRL + C = Kopier
CTRL + V = Lim inn
CTRL + F = Søk

Rammetyper:
dotted - (prikkete)
dashed - (stipplet)
solid - (heltrukken linje)
double - (dobbel linje)



RAMME RUNDT BLOGGEN


Koden du skal legge inn er:
border: 2px dotted #000000;

Slik legger du den inn:
Du går inn på stilsettet ditt, også legger du den under  #wrapper og #footer. Ca. sånn her skal det se ut:
(Du kan også legge koden inn under #header, hvis du vil ha en ramme rundt headeren også).

#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;

Hvis du ikke vil ha en 'prikkete' ramme, så skriver du solid istedenfor dotted. For å endre tykkelsen på rammen, så kan du for eks. skrive 3px eller hvis rammen skal være mindre så skrive du bare 1px.



MENY FRA HØYRE TIL VENSTRE

Koden er:
}
#main {
float: right;
}
#side {
float: left;

Slik legger du din inn:
Du legger den inn under #wrapper.
Slik skal det se ut:

#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;



MIDTSTILLE BLOGGEN DIN

Koden du skal bruker er:
margin-left: auto;
margin-right: auto;

Slik legger du den inn:

Den skal du legge inn under #header, #wrapper og #footer.
Slik skal det se ut:

#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;

}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;

}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;




SMAL BLOGG

Koden er:
width: 700px;

Slik legger du den inn:
Du legger den under #header, #wrapper og #footer.

Slik skal det se ut da:
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;
width: 700px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;
width: 700px;
}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 700px;
}



BAKGRUNNSBILDE SOM "STÅR FAST"


Koden:
BODY {
background-image: url("her skal URL'en til bildet stå");
background-attachment: fixed;
background-position: right bottom;
background-repeat: repeat;
}

Denne koden legger du bare øverst i stilsettet!



ENDRE "X ANTALL KOMMENTARER"

Vil du at for eksempel at det skal stå "x søtiser" istedenfor "x kommentarer", så gjør du dette:

Design -> Rediger -> Maler

- Trykk på CTRL + F tasten på tastaturet.
- Søk på "comment".
- Der skal det stå: " <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a> "
- Det du skal gjøre er å endre litt på koden slik:
<a href="${EntryPermaLink}#comment">${EntryCommentCount} søte små</a>



ENDRE HVA DET STÅR PÅ KOMMENTAR KNAPPEN

Slik gjør du det:
Gå inn på Design -> Rediger -> Maler.

Når du er på Maler, så ser du at det står "Innlegg. Trykk der.
Deretter trykker du CTRL + F på tastaturet ditt og så søker du på " Send kommentar ". Istedet for at det står 'Send kommentar', så kan du jo skrive hva du enn vil. Kanskje "Tusen takk ^^" eller noe sånt ;P




RAMME RUNDT HELE SIDEN

Koden:
border: 8px solid #000000;

Koden legges inn:
Helt øverst i stilsettet.

Slik skal det se ut:

body {
background-color: #FFFFFF;
font-family: times new roman;
border: 8px solid #000000;
}



GOOGLE OVERSETTER PÅ DIN BLOGG

Først går du inn på; http://translate.google.com/translate_tools?hl=no
Der henter du koden.

Hvor skal jeg legge den inn?
Design -> Rediger -> Maler

Når du er inne på Maler, så trykker du på CTRL + F tastene. Der skal du søke på "sidebar". Under der, skal du lime inn koden du hentet på nettsiden. Og så er det bare å lagre malen.



SLIK SER DU HVOR MANGE SOM LESER BLOGGEN DIN AKKURAT NÅ

Koden:

<!-- Start FastOnlineUsers.com --> <a href="http://www.fastonlineusers.com"> <script type="text/javascript" src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!! mce_src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!!></script> </a> leser denne bloggen NÅ</a> <!-- End FastOnlineUsers.com --></div>

Btw, ikke ta med hele adressen, (ikke http..) for da blir det helt feil, da kommer det til å stå sånn: "467 leser bloggen min akkurat nå" og det kan like gjerne være 4 på natta liksom, så skriv: "www.______.blogg.no"

Du legger den inn:
Endre profil - > Beskrivelse
(Den kan også legges inn i Widgets, på "Design")

I ruten for beskrivelse skal du lime inn koden, og du må huske på å legge inn linken til bloggen din :)



STØRRE PROFILBILDE

Koden du skal bruke er:
<img src="PICTURE URL" height="100">

Forklaring:
Picture url skjønner du sikkert. Der du skal legge inn linken til bildet ditt.
100, der kan du sette inn et tall, og det bestemmer hvor stort bildet ditt blir.

Slik gjør du det:
Design -> Rediger -> Maler.

Her skal du finne <img src="${ProfileImageUrl}" alt="${ProfileName}" />.
Så du kan for eksempel søke (CTRL + F) på 'profilename'. Du skal deretter bytte ut (<img src="${ProfileImageUrl}" alt="${ProfileName}" />) med koden; <img src="PICTURE URL" height="100">.
For å legge inn linken til bildet, så må du laste opp bildet ditt på www.tinypic.com, under "Direct Link for Layouts" henter du linken som du skal legge inn i koden. Og du kan endre størrelsen for bildet ditt også hvis du vil.
Nå trykker du på Lagre Malen og da skal bildet ditt være større.



STØRRE OVERSKRIFT (ARKIV, KATEGORIER osv.)

Slik gjør du det:
Design -> Rediger -> Maler.

Søk (CTRL + F) på 'arkiv'. Når du finner denne; <h3>Arkiv</h3>. så kan du istedenfor h3, skrive h1.
Det samme gjør du med Kategorier, Arkiv, Siste innlegg, Siste kommentarer og Lenker.
Nå trykker du på Lagre Malen og da skal overskriftene være større.



MINDRE/STØRRE SKRIFT PÅ NAVNET I INNLEGGENE

Koden du skal bruke:
font-size: 10pt;

Koden skal legges inn:
Under #wrapper. 

Sånn skal det se ut da:
#wrapper{
background-color: #FFFFFF;
font-size: 10pt;
}

Det eneste du trenger å gjøre nå er å endre tall, vil du ha større skrift skriver du for eksempel 12, eller kanskje du vil ha mindre skrift, så skriver du 8 ;)



FÅ BORT NAVNET OVER HEADEREN

Koden:
#header h1, #header p { display:none }

Du legger den inn:
Nesten helt nederst i stilsettet ditt. 

Slik skal det ca se ut:

#header { color: #FFFFFF; }
#header h1, #header p { display:none }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #FFFFFF; }



FÅ BORT LINKEN (BLOGG.NO) UNDER HEADEREN DIN

Slik gjør du det:

Design -> Rediger -> Maler.

Ctrl + f. Søk på blogg.no, så skal du lete etter linjen;
<div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> » ${BlogTitle}</div>
Denne skal du fjerne altså.
Etter du har tatt bort den, så skal du lagre malen, og da skal linken under headeren være borte.



MELLOMROM MELLOM HEADER OG SELVE BLOGGEN


Koden du skal bruke:
margin: 0px 0px 10px 0px;

Slik legger du den inn:
Design -> Rediger
Koden skal du legge inn under header.

Det skal ca. se slik ut:
#header {
background-color: #FFFFFF;
background-image: url(url-adressen til bildet);
background-repeat: no-repeat;
height: 420px;
width: 800px;
margin: 0px 0px 10px 0px;

Hvis du vil ha større eller mindre mellomrom, så endrer du tallet der hvor det står 10 ;P



FÅ BORT RAMMEN RUNDT PROFILBILDET DITT

Koden du skal bruke:
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">

Forklaring:
200 = der kan du velge hvor stort bildet skal være.
URL = Der skal du sette inn adressen for profilbildet ditt.

Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Søk (ctrl + f) på "profile".

Slik skal det ca. se ut:
<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">
</a>
</div>

Trykk lagre malen, og da skal den blå rammen være borte rundt profilbildet!



FJERN "SISTE KOMMENTARER", "AKIV"...

Du må først gå til maler (design -> Rediger -> Maler.)
 Når du har gjort det så søker du på f.eks. 'siste kommentarer'. Da skal du finne dette fram i maler:

<h3>Siste kommentarer</h>
<tag:commentlist global="true" limit="10" sort="desc">
<li>${CommentAuthorLinkIf} om ${CommentArticleLink}</li>
</tag:commentlist>
</ul>
</div>
---
Dette skal du fjerne rett og slett. Det samme gjør du med 'Arkiv', 'Kategorier' osv. Du fjerner de du vil.

Etter det så trykker du på Lagre Malen, og da skal de "boksene" være borte ;D



FÅ MELLOMROM OVER HEADEREN

Koden du skal bruke:
<br>

Slik legger du den inn:
Design -> Rediger -> Maler

Søk etter 'doc2'. Eller bla litt ned til du ser denne linja; <div id="doc2">
Det du skal gjøre er å lime inn koden etter dette.

Slik skal det se ut:

<div id="doc2"><br>



ENDRE BAKGRUNN FOR OVERSKRIFTER

Koden:
h2 {
cursor:default;
background-color: #000000; <- Her endrer du bakgrunnsfarge..
color: #16CC16;
font-size:9pt;                                <- Her endrer du størrelsen
font-family:tahoma;                    <- Her endrer du for skrift typen
letter-spacing:1px;
line-height:13pt;
text-align: center;
padding: 1px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid #16CC16;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;

Slik legger du inn koden:
Den skal du lime inn nederst i stilsettet ditt.

Og så er det bare og lagre stilsettet.



HVORDAN FÅ HEADEREN(BILDE) PÅ PLASS DER OPPE

Koden du skal bruke er:
#header {
background-image: url(http://www.settinnlenkeher.jpg);
background-repeat: no-repeat;
height: 100px;
width: 800px;
}

Hvor skal jeg legge den inn?
Design -> Rediger
Så limer du bare inn koden i stilsettet ditt.



MENY UNDER HEADEREN

Koden du skal bruke:
<a href=LINK TIL INNLEGGET><img src=URL-ADRESSEN TIL BILDET></a>

Det første du må gjøre er å lage et bilde i f.eks. paint. Du kan lage det uansett, slik som du vil, f.eks. som et hjerte, trekant eller bare en liten firkant. Og du må huske å skrive hva det gjelder, f.eks. du kan skrive på det ene bildet; Om meg. Når du har gjort det så må du laste bildet opp på en nettside. Det kan du gjøre på www.tinypic.com. Nå er det bare å legge inn koden. Og som du ser under så er det bare lagt inn en link som blir å vises under headeren. Men hvis du vil ha flere så er det bare å lage flere bilder og legge inn flere koder under den første du la inn..

Koden legges inn
:
Design -> Rediger -> Maler.
Søk (CTRL + F) på " BlogDescription ". Og da skal du legge inn koden under </div> .

Slik skal de se ut:
<h1>${BlogTitle}</h1>
<p>${BlogDescription}</p>
</div>
<a href=www.dinblogg.blogg.no><img src=http://dittbilde.jpg></a>
<div id="wrapper" class="yui-gc">

Nå trykker du på Lagre Malen og da skal det være en meny under headeren din.



MIDTSTILLE MENYEN UNDER HEADER


Du går inn på Maler. Og så setter du inn dette; <center> </center>

Slik skal det ca. se ut:
<center>KODEN TIL MENYEN SKAL STÅ I MELLOM HER</center>


ENKEL KNAPPEMENY (For en penere knappemeny)

Først må du gå inn på Design-Rediger-Stilsett
Helt
nederst i stilsettet ditt setter du inn denne koden:


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

Nå må du lagre stilsettet (selv om det ikke vises noe på forhåndsvisningen). For at disse skal vises må du nå gå inn i Maler.

Finn så denne linjen:

<div id="wrapper" class="yui-gc">

 (Bruk CTRL+ F)

Rett under den linja setter du inn denne koden:

<div class="mattblacktabs">
<ul>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
</ul>
</div>


Pass på at dette alltid står på slutten av koden:
</ul>
</div>

Så må du redigere litt i koden. Hvis du vil ha en knapp som heter f.eks FORSIDEN og som linker til fremsiden din. Da må du skrive inn url-adressen til fremsiden din, der jeg har skrevet URL-ADRESSE, og skrive FORSIDEN der det står Valgfritt. for eksempel slik:

<li><a href="http://pinkrosa.blogg.no/">FORSIDEN</a></li>




ENDRE SKRIFTTYPE

For å endre skrifttypen, går du inn på Design -> Stilsett.
(For at skriften skal bli annerledes på kommentarene gjør du som det står under her, bare at du går på Innlegg)

Da trykker du på CTRL + F på tastaturet, og søker på den skrifttypen du har nå, som står i vanelig designbygger.
Når du har funnet skriften som du allerede har, så bare tar du det bort, og bytter det ut med den skrifttypen du vil ha!



ENDRE KOMMENTARFELTET

Hvis du er lei av et hvitt og "normalt" kommentarfelt, så prøv disse kodene!

INPUT = De smale kolonnene

TEXTERA = De stole feltene

 

background-color = Bakgrunnsfargen på kolonnene.
border: 1px solid black; = Rammen rundt kolonnene.
font-family: verdana = Skrifttypen på teksten du skriver.
color = Fargen på teksten man skriver.
font-weight: bold; = Tykkelsen på teksten man skriver. (Bold er tykk skrift)
font-size: 10px; = Størrelsen på teksten du skriver.

 

Du går altså inn i Design< Rediger< Stilsett.

 Du setter denne koden nederst i stilsettet ditt!

 

input{

background-color: #;

border: 1px solid black;
font-family: verdana;
color: black;
font-weight: ;
font-size: 10px;
}
textarea{
background-color: #;
border: 1px solid black;
font-family: verdana;
color: black;
font-weight: 
font-size: 10px;

}

 

Hvis du heller vil ha et bilde som bakrunn i stedet for en farge bare, setter du dette

background-image: url( din bildeadresse); under textarea.




HVORDAN FÅ SKRIFT INNI KOMMENTARFELTET DITT

Gå først inn på Design- Rediger- Maler- Innlegg
Så trykker du: ctrl + f og søker på textarea

Da finner du denne linjen: <textarea id="comment_text" name="comment" onchange="doChange(this);)" cols="40" rows="10"></textarea>

Så kan du f.eks skrive: "Så søt du er som kommenterer!"

Og da skal det se sånn ut:
<textarea id="comment_text" name="comment" onchange="doChange(this);)" cols="40" rows="10">Så søt du er som kommenterer!</textarea>
</div>

Så trykker du lagre og da er du ferdig! Det kan ta bittlitt tid før det kommer, men det kommer!


HVORDAN FÅ "TAKK-BILDE" VED KOMMENTARFELTET (Sånn som jeg har)

Først må du lage det bildet du vil bruke. (Det er samme hvilket redigeringsprogram du bruker)
Så laster du bilde opp på Tinypic og når bildet er laset opp kopierer du den øverste koden, altså HTML-koden.

Gå inn på Design-Rediger-Maler-Innlegg
Så trykker du på CTRL+F og søker på "newcomment"
Da kommer det en linje som ser sånn ut: <div id="newcomment" class="clearfix">
Lim koden fra Tinypic under denne linjen!

Da er det bare å trykke "lagre malen" og så kommer bildet om noe få strakser!



HØYREKLIKKFORBUD

Du limer bare inn denne koden i "Widgets"!

<script language="JavaScript">
// distributed by http://hypergurl.com
<!--
var popup="COPY CAT!";
function noway(go) {
if (document.all) {
if (event.button == 2) {
alert(popup);
return false;
}
}
if (document.layers) {
if (go.which == 3) {
alert(popup);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=noway;
// --> </script>


HVORDAN FÅ MELLOMROM MELLOM SIDEBAREN (profilbildet, arkiv og de greien) OG SELVE BLOGGEN

Du limer bare denne koden inn i stilsettet ditt!

#wrapper {
font-size: 12px;
}
#footer {
display: none;
}
#main {
float: left;
background: #FFFFFF;
border: 30px solid #FFFFFF;
}
#side {
float: right;
background: #FFFFFF;
border: 9px solid #FFFFFF;
width: 200px;
font-size: 10px;
}
h2 {
font-size: 16pt;
border-bottom: 1px solid #000000;
}

(Jeg fikk denne koden av Elisabeth!)



RAMME RUNDT HVERT INNLEGG


Koden legges under #footer

.entry {
border: 1px solid #708090;
background: #FFFFFF;
text-align: center;
}


Rammetyper:
dotted - (prikkete)
dashed - (stipplet)
solid - (heltrukken linje)
double - (dobbel linje)

2 kommentarer

Therese <3

27.jun.2010 kl.13:36

Bare komenter.

Tonje Haugen

28.jun.2010 kl.13:12

bra koder :)

Skriv en ny kommentar

Therese <3

Therese <3

11, Hurum

Hei, du har kommet til Woody.blogg.no ^^ Jeg er en jente som liker å ri, danse, synge og masse mer! En dag skal jeg bli stjerne <3 Blir kjempeglad for kommentarer, og svarer på alle. Ha en fin dag!

Norske blogger

Kategorier

Arkiv

hits