Gratis design 8# - Your love is deadly



KODER:

Stilsett (CSS) - Forsiden - Innlegg - Kategori - Arkiv

BILDESTØRRELSER:
600px

28.10.2012, kl. 14:40 × Gratis design × 7 Kommentarer

Gratis design 7# - Pink lana

KODER:
Stilsett (CSS) - Forsiden - Innlegg - Kategori - Arkiv

BILDESTØRRELSER:
600px

27.10.2012, kl. 16:10 × Gratis design × 3 Kommentarer

Gratis design 6# - Pugs not drugs

KODER:
Stilsett (CSS) - Forsiden - Innlegg - Kategori - Arkiv

BILDESTØRRELSER:
700px

HEADER STØRRELSE:
Width: 720
Height: 300

21.10.2012, kl. 15:39 × Gratis design × 10 Kommentarer

Gratis design 5# - Cupcake love

Image and video hosting by TinyPic

KODER HER

STILSETT (CSS) - FORSIDEN - INNLEGG - KATEGORI -  ARKIV

(Skal lage en ny varant av dette designet)

21.10.2012, kl. 13:03 × Gratis design × 20 Kommentarer

Gratis design 4# - Blahblah

Image and video hosting by TinyPic

KODER:
Stilsett (CSS) - Forsiden - Innlegg - Kategori - Arkiv

BILDESTØRRELSER:
600px

HEADER:
Width: 600px
Height: 167px

07.10.2012, kl. 14:58 × Gratis design × 12 Kommentarer

Gratisdesign #9 - This is my blog, deal with it



KODER:
Stilsett (CSS)
- Forsiden - Innlegg - Kategori - Arkiv

BILDESTØRRELSER:
600px

HEADER:
Width: 811px
Height: 346px

07.10.2012, kl. 14:57 × Gratis design × 7 Kommentarer

Gratisdesign #3 - 'DEER' licious


KODER:

Stilsett (CSS)
- Forsiden - Innlegg - Kategori - Arkiv

BILDESTØRRELSER:
600px

07.10.2012, kl. 14:56 × Gratis design × 9 Kommentarer

Gratisdesign #2 - Wonderland

Image and video hosting by TinyPic
KODER:

Stilsett (CSS)
- Forsiden - Innlegg - Kategori - Arkiv

BILDESTØRRELSER:
600px

HEADER:
Width: 850px
Height: 371px

07.10.2012, kl. 14:55 × Gratis design × 5 Kommentarer

Gratisdesign #1 - Galaxy

Image and video hosting by TinyPic

KODER:
Stilsett (CSS)
- Forsiden - Innlegg - Kategori - Arkiv

BILDESTØRRELSER:
600px

07.10.2012, kl. 14:55 × Gratis design × 19 Kommentarer

Image fade effect

Vil du at bildene din skal "falme" når du holder musen over? Det du gjør da er å legge koden under nederst i stilsettet ditt. Du bare endre på tallet 75 til hvor mye du vil at bildene skal falme.

KODEN:
img, a img { border: 0px;  opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; } 
img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity .1s linear; -webkit-transition: opacity .1s linear; -moz-transition: opacity 1.5s linear; }

07.10.2012, kl. 14:25 × Design hjelp og koder × 1 Kommentar

Endre størrelsen på kommentarfeltet

Forsvinner feltet ditt? ↓ Her har du koden:

Gå inn på DESIGN > REDIGER > MALER > INNLEGG
Så trykker du på CTRL+F  og søk på textarea.

Du vil da finne dette;
<textarea id="comment_text" name="comment" onchange="doChange(this);" cols="40" rows="10"></textarea> 

Men du må redigere den slik at den ser sånn ut;
<textarea id="comment_text" name="comment" style="width:290px;onchange="doChange(this);" cols="40" rows="10"></textarea>

Bare sånn at det her er sagt du kan endre på tallet "290" slik at den passer din blogg!

Kilde

07.10.2012, kl. 14:22 × Design hjelp og koder × 0 Kommentarer

To sidemenyer

Siden denne koden er litt komplisert har jeg en link til en tutorial om hvordan man får det: HER. Den er svensk, men den er mye bedre forklart enn det jeg noen gang kommer til å forklare det.

07.10.2012, kl. 14:18 × Design hjelp og koder × 0 Kommentarer

Meny: På høyre side av bloggen

ALCHEMIST.BLOGG.NO ER KILDEN TIL DENNE KODEN (LINK HER)

 CSS / STILSETT 
kan redigeres hvordan man vil. utseende på menyen!

a.yes:link, a.yes:visited, a.yes:active
{display:block; font-family:helvetica; background:#0c0c0c; text-transform:uppercase; font-size:8px; padding:7px 0px 7px 2px; margin-bottom:3px; border-right:5px solid #e2e2e2; color:#a4a4a4; background:#000; letter-spacing:1px;}

a.yes:hover {background:#000; border-right:5px solid #eb4e9c; color:#a4a4a4;}

HTML / MALER
plasseres etter </head> 

<div style="position:fixed; margin-left:841px; top:450px; width:180px; height:100%;">
<a href="http://www.blogg.no" class="yes">blogg.no</a>
<a href="http://www.blogg.no" class="yes">blogg.no</a> 
<a href="http://www.blogg.no" class="yes">blogg.no</a> 
<a href="http://www.blogg.no" class="yes">blogg.no</a> 
<a href="http://www.blogg.no" class="yes">blogg.no</a> 
<a href="http://www.blogg.no" class="yes">blogg.no</a>
</div>

  •  Understreket: hvor du plasserer menyen! margin-left = hvor langt inn på skjermen den er. top = hvor langt ned på skjermen den er.
  • Hvis du ikke vil at den "sitter fast" når du scroller ned, så redigerer du position:fixed; til position:absolute;
  • IKKE fjern class="yes" fordi det er den som kobler til utseende-koden i CSS / STILARK.
  • Hvis du ikke trenger så mange lenker kan du bare fjerne " <a href="http://www.blogg.no" class="yes">blogg.no</a> " som du vil.
  • Får du det ikke til første gangen, slett alt fra disse kodene du har lagt inn på stilark og maler, og start på nytt. :) Bruk gjerne FORHÅNDSVISNING så mye du kan.

07.10.2012, kl. 14:12 × Menyer × 0 Kommentarer

Meny: Sirkler

Kilde for koden her & kilden for bildet @ bloggen under her.


KODEN (LIMES NEDERST I STILSETTET):

<style type="text/css">
.circlemenu{
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23; //FARGE//
margin: 0;
margin-right:5px; /*right spacing between each link */
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #a71b15; //FARGE//
}
</style>



SÅ GÅR DU TIL MALER (FORSIDEN, INNLEGG, KATEGORI, ARKIV) OG LIMER INN DENNE KODEN (PASSER BEST UNDER </HEAD>)

KODEN:
<div class="circlemenu">
<ul>
<li><a href="DIN URL"><span>Navn på link</span></a></li>
<li><a href="DIN URL"><span>Navn på link</span></a></li>
<li><a href=" DIN URL"><span>Navn på link</span></a></li>
<li><a href="DIN URL"><span>Navn på link</span></a></li>
<li><a href="DIN URL"><span>Navn på link</span></a></li>
</ul>
</div>

07.10.2012, kl. 14:09 × Menyer × 0 Kommentarer

Navigasjon: Hjerter

Dette legges nederst i stilsettet:

.heart {display : block; font-size: 8pt; font-family: verdana, Lucida Sans Unicode; line-height: 15px; border-bottom : 1px solid #f4f4f3; text-indent : 5px; vertical-align : middle; background:
url('http://www.hellostar.org/wp-admin/images/q1.gif') no-repeat left; padding-left : 10px;
padding-bottom : 2px;}

.heart:hover {display : block; font-size: 8pt; font-family: verdana, Lucida Sans Unicode; line-height: 15px; border-bottom : 1px dashed #E0DCD6; text-indent : 5px; vertical-align : middle; background : url('http://www.hellostar.org/wp-admin/images/q2.gif') no-repeat left; padding-left : 10px; padding-bottom : 2px;}


Og dette legger du i HTML kategoriene (Forsiden, Innlegg, Kategori, Arkiv) der du vil ha den:

<div class="heart">
<a href="LINK">NAVN</a>
<a href="LINK">NAVN</a>
<a href="LINK">NAVN</a>
<a href="LINK">NAVN</a>
</div>

07.10.2012, kl. 14:07 × Design hjelp og koder × 2 Kommentarer

Meny: Block

1. Kopier denne koden og legg den nederst i stilsettet
2. Så, kopier denne koden der du vil ha selve knappene i HTML'en

Utseende på knappene:

07.10.2012, kl. 14:06 × Menyer × 0 Kommentarer

Fet tekst, kursic etc til en farge

Fet tekst: strong {COLOR: #0096ff; } b {COLOR: #0096ff; }

Kursiv tekst: i, em {COLOR:#ff0066; }

Streket tekst, og fjerne streken: s, strike {COLOR: #ffb400; text-decoration:none; }

Understreket tekst: u {color:#00b466; text-decoration:none; }

03.10.2012, kl. 18:11 × Design hjelp og koder × 0 Kommentarer

Drop down meny

Denne koden legger du der du vil ha den i malene (forsiden, innlegg, kategori, arkiv)

KODEN:
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100px;'>
<option>HEADER HER</option>
<option value="LINK HER">LINK TITTEL HER</option>
<option value="LINK HER">LINK TITTEL HER</option>
</select>

03.10.2012, kl. 18:10 × Menyer × 0 Kommentarer

Drop down meny med tekst eller bilde

Aller først...

DENNE KODEN skal være imellom </head> og <head>.

DENNE KODEN skal være nederst i stilsettet ditt.


 

Bilde klikk:


DENNE KODEN, der du vil ha den i menyen.


 

Tekst klikk:


 DENNE KODEN, der du vil ha den i menyen.

03.10.2012, kl. 18:10 × Menyer × 0 Kommentarer

Energy saving mode


Dette vil bidra til å spare energi mens folk er på bloggen din, men er ikke surfer.

KODEN:
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

Legg denne under <head> i HTML/MALENE (Forsiden, innlegg, kategori, arkiv).

03.10.2012, kl. 18:10 × Design hjelp og koder × 0 Kommentarer

Image fade effect

Hvis du vil at bildene dine skal famla når man holder musen over den så bare kopierer du denne koden under. Dette legger du da nederst i stilsettet:

img, a img { border: 0px;  opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; } 

img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity .1s linear; -webkit-transition: opacity .1s linear; -moz-transition: opacity 1.5s linear; }

03.10.2012, kl. 18:09 × Design hjelp og koder × 0 Kommentarer

Tekst/bilde som står fast i siden av bloggen

<div style="position:fixed; bottom:5px; right:5px;"> Her kan du skrive en tekst, eller legge inn et bilde eller en pixel </div>

03.10.2012, kl. 18:09 × Design hjelp og koder × 0 Kommentarer

Gjennomsiktige innlegg

Denne kan du legge under #main, #wrapper, #entry, #side, #header eller hva du vil ha gjennomsiktig (Alt blir gjennomsiktig, bilder, tekst osv).

KODEN:
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;


Denne kan du legge under #main, #wrapper, #entry, #side, #header eller hva du vil ha gjennomsiktig (Kun bakgrunnen blir gjennomsiktig).

KODEN:
Background: url(http://i42.tinypic.com/2wdqct3.jpg);

03.10.2012, kl. 18:08 × Design hjelp og koder × 0 Kommentarer

Alle bilder i bloggen din i f.eks 600px;

Denne koden har jeg lett lenge etter, så jeg tenkte å dele den. Hvis du har skifta design og hadde mye mindre/større bilder enn du har nå kan du bare bruke den koden og alle bildene på bloggen din blir helt samme størrelse. Så hvis du vil ha større eller mindre enn 600 på bildene, så bare endrer du 600 til et annet tall du ønsker størrelsen på bildene skal være i.

KODEN (LEGGES NEDERST I STILSETTET/CSS)
.content img {
width: 600px;
}

03.10.2012, kl. 18:07 × Design hjelp og koder × 0 Kommentarer

Meny: Rund



1. Gå til DENNE siden, kopier koden og legg den nederst i stilsettet
2. Gå til DENNE siden og kopier koden og legg den der du vil ha den i under HTML (Forsiden, innlegg, kategori og arkiv)

Du endrer farge, størrelse selv i Stilsettet (CSS).

03.10.2012, kl. 16:36 × Menyer × 0 Kommentarer
hits