Legge til fullscreen instagrambilder på bloggen

    08.08.2016 - 21:58

Mange av dere har lurt på hvordan jeg fikk til en fullscreen kollasj av mine instagrambilder helt nederst på bloggen, så nå skal jeg vise hvordan de blir til som denne her:

Jeg lagde min inne på LightWidget. En fordel med å bruke denne widgeten er at bildene tilpasser seg alle skjermstørrelser (responsivt). Jeg valgte størrelsen 10x3. Det er bare å sette opp etter eget ønske, du kan også forhåndsvise for å se hvilke valg du har gjort. Når du er ferdig, trykk på "Get code!", så vil du få opp en kode.

Lim inn koden på bloggen din ved å gå inn på "Avansert design" > "Forsiden" eller noen av de andre malene. Jeg limte inn koden helt nederst etter </div>, da fikk jeg den nederst. Håper dere skjønte det. Følg meg gjerne på Instagram: @cindydesign. Jeg kommer til å legge ut instastories fremover.

#bloggdesign #instagram #bloggkode #blogg #design

Underskriftsdesign

    29.09.2015 - 19:12

Jeg lagde nettopp en personlig underskriftsdesign med mitt navn på MyPaint. Synes det var litt tøft. Man kan gjerne ha en slik under hvert blogginnlegg for å gjøre innleggene mer personlig. Du kan bestille en underskriftsdesign til din blogg ved å sende en e-post til zhuoblogg@hotmail.no.

PS: Lager gratis til de 3 første!

#underskrift #logo #navn #design

Snø som daler ned på bloggen

    09.01.2015 - 21:28



Denne koden har jeg brukt for å få snø øverst på bloggen.

Lag en ny modul under "Avansert design" > "Moduler". Emnet kan f.eks merkes med "sno". Lim inn i "innhold" og trykk "lagre":

 

<script type="text/javascript">

Width =1050; // Bredden på bloggen som det skal snø på.

Height =5000; // Høyden på bloggen som det skal snø på.

Count =25; // Antall snøflak. Ikke angi for stort tall.

MaxStep=2; // Maks steg i rørelsen.

MinStep=1; // Min. steg i rørelsen.

MaxFlake=12; // Maks størrelse på snøflakene.

MinFlake=4; // Min. størrelse på snøflakene.

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'>&#10052;</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) { // Starte om igjen fra toppen når midten nåes.

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>

 

Etter å ha gjort det, har du fått en html kode som denne. Den limer du inn i forsiden, innlegg, kategori og arkiv under </head>. Da har du fått snø på bloggen.

#html #bloggkoder #bloggdesign #snø

LinkWithin - "relevante innlegg"

    26.12.2014 - 14:28

LinkWithin er en blogg widget som vises under hvert innlegg som liker til relaterte "historier" fra din bloggs arkiv. Widgeten linker til relevante innlegg og som kan være interessant for leserne av en bestemt kategori, holde dem engasjert med bloggen din, og økende trafikken. Det er ikke nødvendig å registrere seg, og det er enkelt og gratis å bruke. Jeg har en slik widget hvis dere trykker inn og kommenterer dette innlegget, så ser dere den. Vil du også ha en på bloggen din?

Bruker du blogg.no velger du "Other" på Platform. På Width bestemmer du hvor mange innleggforslag det skal vises (jeg har valgt 5). Trykk på "Get Widget!" og lim inn koden du får på avansert design > forside/innlegg/kategori/arkiv > før </body>.

#bloggdesign #html #innlegg #linkwithin  

Irriterende reklame over bloggen?

    06.09.2014 - 11:14

Jeg fant ut hvordan man kunne skille reklamen over headeren. Legg til <hr/> over <div id="doc2"> i maler (gjerne alle i forsiden, innlegg, kategorier og arkiv), så kommer det opp en linje som skiller reklamen fra bloggen. 

Kan dessverre ikke fjerne reklamen helt, men det er blogg.no som har lagt den til på alle bloggene (som de fleste har sett) og størrelsen kommer an på hvor stor reklamen er. Info om dette HER.

Lage ikon til nettsiden din

    28.07.2014 - 21:03

  

På min blogg har jeg et bilde av en blomst som ikon. Det går an å lage et slikt ikon på favikon.com, men jeg gjør det enkelt: Først finner jeg et bilde som jeg vil ha på Google eller på PC-en. Kopierer bildeadressen og limer inn den her:

Gå inn på design > maler > forsiden, innlegg, kategorier og arkiv. Søk etter shortcut icon og bytt ut det som er merket med rødt. Om du har bilde fra PC-en, kan du laste bildet opp på bloggopplasteren, tinypic.com eller på bildr.no.

Lager mitt første gratisdesign

    10.05.2014 - 22:31


Kommer snart!

"Scroll til toppen" knapp

    05.04.2014 - 21:23

Sånn ser denne knappen ut til høyre på bloggen min. Inne på Scrolltotop kan dere velge mellom mange forskjellige "til topp" piler. Velg en du liker, kopier koden og lim inn på design - maler (forsiden, innlegg, kategorier og arkiv) før </body>. Da er det lettere å gå til topps igjen :)

Skygge bak overskrift

    23.11.2013 - 17:23

color: #000;
background: #fff;
text-shadow: 2px 2px 3px #000;

I'm a text with a smooth shadow

image

 

 

color: #000;
background: #fff;
text-shadow: 2px 2px #000;

I'm a text with no smooth shadow

image

 

 

color: #000;
background: #fff;
text-shadow: 2px -2px 3px #000;

I'm a text with a smooth shadow

image

Kodene limes inn på stilsett under overskriftene h1, h2 eller h3.

Legge inn koder - i en boks

    22.11.2013 - 21:22

Her kommer en kode som gjør at hvis du for eksempel skal skrive et langt innlegg, og er lei av å scrolle ned på siden, kan du bruke denne koden:

KODEN:
<TEXTAREA rows="7" cols="30"> (FJERN) HTML KODE HER < /TEXTAREA >

Få en oversikt - nedteller til blogg

    11.06.2013 - 18:53

Animated Countdown that counts down in seconds, minutes, hours and days to any date. Takes Time Zone & DST into account, and it can also count up! Choose a design (Birthday, Sports, Baby Due Date, Wedding, and more), select your colors and add your own personalized message. More designs available soon. Share the Countdown with anyone anywhere - just copy the web address (URL).

Snart sommerferie, se en oversikt her!


Du kan lage deg en oversikt her: Countdown Timer to Any Date
Jeg synes at den var veldig praktisk å bruke.

Instagram

    13.04.2013 - 13:04

Jeg har fått meg instagram! Og med instagram kan man vise frem på bloggen!

SnapWidget kan du lage en slideshow der du viser bildene du har tatt på blogger og andre sider.


Koden legges inn i: Design - rediger - maler. Du kan legge den inn hvor du vil, kommer an på bloggen din :) PS: Kan også lages i www.intagme.com.

Jeg har en i sidebaren.

Instagramen min er cindydesign om noen lurte på. Da gjenstår det å finne nye følgere, hihi. 

Text fade effect

    03.03.2013 - 22:41

Jeg har dette på bloggen min akkurat nå. Når du holder musepilen over tekst, falmer den. Vil du også ha det på din blogg? Limes inn i stilsett.

KODEN:
a:visited:hover, a:hover {color:#798c51;text-shadow:1px 1px 3px #798c51;
color: #e4ffac;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
color: #d6d6d6;}

 

Endre bredde på bilder i innlegg

    26.02.2013 - 22:22

Design > rediger > stilsett.

Lim inn:

.entry { 
width: 600px; 
}

Du kan endre på 600px. Når du bruker denne koden så hopper kanskje sidebaren ned, og da må du endre på #wrapper. Der legger du til:

#wrapper {
width: 1000px;
}

Ulike teksteffekter

    31.01.2013 - 20:02

Skyggetekst
Koden: <span style="text-shadow: 1px 3px 9px black;">Sett inn din tekst her</span>

Blinketekst (funker i noen nettlesere)
Koden: <span style="text-decoration: blink;">Sett inn din tekst her<span>

Dette kan limes inn i innlegg du skriver på, trykk på HTML av/på-knappen, lim inn og trykk på den knappen igjen - og du er klar til å sette inn teksten!

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

    31.12.2012 - 12:16

<div style="position:fixed; bottom:5px; right:5px;"> Tekst, eller legge inn et bilde eller en pixel </div>

Legg inn koden i maler.

Image fade effect

    31.12.2012 - 12:14

Legg koden under nederst i stilsettet ditt. Du bare endre på tallet 60 til hvor mye du vil at bildene skal falme.

KODEN:
img, a img { border: 0px;  opacity: .60; 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; }

Når du holder musepilen over bildet, ser du det "lyser".

Forkort lange linker til korte

    25.11.2012 - 16:24

Gjør det lettere med å forkorte lange linker til kortere linker! Jeg har funnet 3 gode nettsider.

Gå til tiny.cc.

Kopier en link du vil forkorte.

Lim inn linken du kopierte på linja.

Skriv tiny.cc/ (noe her) og trykk deretter på tiny!

Nå får du opp den kortere adressen til siden din.

TinyURL.com

TinyURL

Hvordan flytte sidemenyen opp til headeren

    11.04.2011 - 17:38

Den limer du inn på Design > Rediger > Stilsett.

}
#side {
margin-top: -300px;
background-color: #ffffff;
}

Du må endre 300 til noe høyere tall (f.eks: 600) hvis du vil ha sidemenyen høyere opp.
Du må endre 300 til noe mindre tall (f.eks: 100) hvis du skal ha sidemenyen lengre ned.
Husk også å lage headeren mindre, hvis bloggen blir litt rar når du bruker denne koden.

Farge bak overskrift

    26.03.2011 - 16:11

Koden her:


**************************************************
h2 {
background-color:#85caff;     < Lys blå
 }

h3 {

background-color:#478aff;     < Mørk blå
}
**************************************************


Sett inn denne koden på > Design > Rediger > Stilsett. Se etter h1, h2, h3, h4, h5. Du limer inn bare kodene inn under h2 eller h3.

a { color: #336699}
a:link { color: #336699}
a:visited { color: #336699}
a:active { color: #336699}
h1, h2,
h2 {
background-color:#85caff;                          <- Lys blå
 }
h3,
h3 {
background-color:#478aff;                           <- Mørk blå
}
h4, h5 { font-family: Tahoma, Geneva, sans-serif; }
#header h1, #header p { display:none }
#header { color: #000000; }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #000000; }

Du kan velge om du vil ha h2 eller h3!

Endre farge på når du kommenterer innlegget

    02.03.2011 - 13:42

Lim koden inn på stilsett under #footer.

}
textarea {
background-image: url('');
background-repeat: no-repeat;
background-position: right bottom;
}
#newcomment
#comment_author {
width: 300px;
background-color: #BBDCFF;
background-position: right bottom;
}
#newcomment
#comment_authoremail {
width: 300px;
background-color: #BBDCFF;
background-position: right bottom;
}
#newcomment
#comment_authorurl {
background-color: #BBDCFF;
background-position: right bottom;
}

background-color: #BBDCFF;
skifter du bare fargen du har lyst på.

Fikset litt på drop-down menyen igjen

    28.02.2011 - 17:06

Fikset nettopp på drop-down menyen igjen. Hva synes dere om fargene og hvordan den ser ut nå? Har brukt en del tid på det i dag. Skal forresten snart legge ut en kode om drop-down meny, så dere kan også ha en drop-down meny ♥

Link: http://zhuo.blogg.no/1289851356_dropdown_meny.html.

Få bloggen gjennomsiktig?

    27.02.2011 - 14:08

For å få deler av bloggen gjennomsiktig, skal du kopiere det under: Jo lavere tall = mer gjennomsiktig.

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

Denne skal inn i stilsettet under f.eks #side eller der du vil ha det.

Ingen kopiering

    11.12.2010 - 15:07

Trykk på design - rediger - maler (HTML) - forsiden.

Søk på (Ctrl+F) <head> Du trenger egentlig ikke søke, du ser det med en gang at den ligger på den femte linja fra toppen.

Under <head> limer du inn dette:

<script language=JavaScript>
<!--
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>

Husk å lagre!
Husk at du nå bare har gjort følgende en gang, og man kan kopiere inne i selve innleggene, i kategori-lista og i arkiv-lista. Dette endrer du med å legge inn koden på samme plass i de andre malene.

PS: Selv om du har denne koden på bloggen, kan det fortsatt kopieres fra bloggen din.

Lykke til!

Rammer

    11.12.2010 - 14:53

dotted

dashed

solid

double

groove

ridge

inset

outset

Hvordan endre farge på teksten i overskrift

    11.12.2010 - 14:44

Trykk på design - rediger - stilsett (CSS).

Helt neders legger man inn dette:
h2, h2 a, h2 a:link, h2 a:visited, h2 a:active { color: #B6D1FF;}
(Fargen er lysblå, men du kan selv finne andre farger).

Mellomrom mellom bokstavene når du legger musepilen over linken

    07.12.2010 - 22:19

Det du må gjøre er å legge inn denne koden:
a:hover {letter-spacing:2px}

Sånn at det ser ca sånn her ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {letter-spacing:2px}
a:active {color: #000000;}

Der det står 2px kan du endre til f.eks 1px eller 5px. Dette bestemmer hvor stort mellomrommet mellom hver bokstav da skal være.

Bloggdesignkoder hjelperen

    15.11.2010 - 22:07

SKRIVE INNLEGG:
♥ Bilde ved siden av teksten HER
♥ Legge inn Youtube videoer til bloggen HER
♥ Legge inn koder i en boks HER

EFFEKTER:
♥ Dalende snø på bloggen HER (NY)
♥ Forandre linker når man tar musen over HER
♥ Hvordan få bloggen/bildet gjennomsiktig? HER
♥ Mellomrom mellom bokstavene når du legger musepilen over HER 
♥ Usynlig ingen høyreklikk HER
♥ Ulike teksteffekter HER
♥ Image fade effect HER
♥ Text fade effect HER

MENY:
♥ Drop-Down meny HER
♥ Enkel knappemeny HER
♥ Meny under header HER
♥ Hvordan linker jeg til et eller flere innlegg på bloggen min, til en av menyknappene? HER

HEADER:
♥ Få bort linken (blogg.no) under headeren din HER
♥ Få bort navnet over headeren HER
♥ Hvordan få headeren (bilde) på plass der oppe HER

RAMMER:
♥ Rammer du kan velge mellom HER
♥ Ramme rundt bloggen HER
♥ Ramme rundt hvert innlegg HER

OVERSIKT:
♥ Anbefale blogginnlegg "relevante innlegg" HER (NY)
♥ Hvor mange leser bloggen din akkurat nå? HER
♥ Ingen høyreklikk (kopiering) HER
♥ Søkerute på din blogg HER

ENDRE/FJERNE/FLYTTE:
♥ Alle bilder blir til lik breddestørrelse HER - passer bra for bloggen din.
♥ Dele opp blogg.no reklamen øverst på bloggen HER (NY)
♥ Endre antall poster som vises på forsiden HER
♥ Endre bakgrunn for overskrifter HER
♥ Endre farge på når du kommenterer innlegget HER
♥ Endre farge på teksten i overskrift HER
♥ Endre "Send kommentar" HER
♥ Endre "X ANTALL KOMMENTARER" HER
♥ Flytte sidemenyen opp til headeren HER
♥ Fjerne "siste kommentarer", "arkiv" ... HER
♥ Gjennomsiktig blogg HER

BLOGG-ANNET:
♥ Skifte/lage spesielt ikon på bloggen HER (NY)
♥ Scroll til toppen - knapp HER (NY)
♥ Bakgrunnsbilde som "står fast" HER
♥ Farge bak overskrift HER
♥ Menyen fra høyre til venstre HER
♥ Mellomrom mellom header og innhold HER
♥ Midtstille overskriften HER
♥ Mindre/større skrift på innleggene dine HER
♥ Smal og midtstille bloggen HER
♥ Større profilbilde HER
♥ Vis hele innlegg i kategori og arkiv HER

♥ Lage bilder i PNG (transparent) i Pixlr HER
♥ Skygge bak overskrift HER
♥ Tekst/bilde som står fast ved siden av bloggen HER

NYTTIGE SIDER:

♥ Forkort lange linker til korte HER
♥ Nedtelling til ... HER
♥ Instagram bilder til bloggen HER
♥ aBowban HER 
♥ HTML - koder til blogg HER
♥ Google Fonts HER (skrifttyper)

DESIGN:
♥ Gratisdesign HER
♥ Jeg lager headere på bestilling HER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Er det noe dere lurer på, så er det bare å spørre!

Midtstille overskriften

    15.11.2010 - 21:06

Trykk på "Design" - "Rediger" - "Maler".

Søk opp denne koden:  <a href="${EntryPermaLink}">${EntryTitle}</a>

Så skal du se på denne biten:
<h2>
<a href="${EntryPermaLink}">${EntryTitle}</a>
</h2>

Det du skal gjøre, er å sette denne koden <div align="center"> foran <h2> og denne koden </div> etter </h2>

Da skal det se sånn ut:
<div align="center">
<h2>
<a href="${EntryPermaLink}">${EntryTitle}</a>
</h2>
</div>

Hvordan linker jeg til et eller flere innlegg på bloggen min, til en av menyknappene?

    15.11.2010 - 21:04

Url-adressen finner du ved å gå inn på din blogg (OBS: som besøkende!!!) og klikke deg dit du vil linke knappen til. Da ser du url-adressen i søkelinja. La oss si at du vil ha en knapp som står "Konkurranser" på, der ALLE konkurransene du har, ligger inne på. Altså FLERE INNLEGG PÅ KNAPPEN. Da MÅ du ha en KATEGORI som heter Konkurranser. Når du har laget kategorien, går du på framsiden av bloggen din og trykker på kategorien "konkurranser". Når siden er ferdig opplastet der, kan du trygt og godt kopiere URL-linken oppe i søkefeltet, og lime den inn i koden. På denne måten får du da alle innleggene du lager i kategorien "konkurranser", inn på menyknappen. Hvis du BARE vil ha 1 INNLEGG PÅ KNAPPEN, går du rett inn på innlegget og kopierer linken til bare innlegget, og legger inn i koden.

Når det er gjort er det bare å lagre. Så må du sette inn alt dette i alle malene. "Forsiden" er den du har satt det inn i nå, men du må gjøre det i Innlegg, Kategori og Arkiv også. Du kommer inn på disse malene ved å gå til "Maler" og velge rett over koderuten. Da er det bare å lagre alt.

Drop-Down meny

    15.11.2010 - 21:02

En nokså vanskelig kode, det kan hende at du må finne ut av enkelte ting selv!

}
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 5px 10px;
background-color: #transparent;
color: #123456; /*Endre fargen på teksten her*/
text-decoration: bold;
font-family: Lucida Handwriting; /*Endre skrifttypen her*/
font-size: 15px; } /*Endre størrelsen på skriften her*/
#navbar li ul {
display: none;
width: 8,5em; /* Endre bredden på undermenyen her */
background-color: #FFFFFF;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 1;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #F9BAAA; /*Endre fargen på undermenyen*/
border-bottom: 1px solid #F9BAAA;
color: #000000; } /*Endre tekstfargen på undermenyen her*/
#navbar li li a:hover {
background-color: #; } /*Endre fargen når man holder musen over undermenyen*/
#navbar li{ float: left; }
#navbar{
margin-left: 0px;
}
#navbar {
padding: 5px;
height: 2em;
width: left;
margin: 0px;
text-align: left;
}
#navbar li {
float: left;
list-style: none;
width: 157px;
background-color: #FFFFFF;
}
#navbar li a {
padding: 5px;
display: block;
border-bottom: 2px solid #C4E0FF;
color: #000000;
text-decoration: none;
font-family: arial;
font-size: 15px;
line-height: 15px;
}
#navbar li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
text-align: left;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
border-bottom: 1px dotted #D1D1C6;
color: #727272;
}
#navbar li li a:hover {
background-color: #D1D1C6;
}
#meny {
width: 950px;
margin-left: auto;
margin-right: auto;
}

(fargen og alt sånt har jeg funnet på selv)
Legg inn på: Stilsett/CSS
Også lagrer du. Ingenting vil skje. 


Etterpå går du til Maler/HTML og limer inn denne koden:

<ul id="navbar">
  <li><a href="link til sida">Kategori 1</a>
    <ul>
      <li><a href="#">Länk 1</a></li>
      <li><a href="#">Länk 2</a></li>
      <li><a href="#">Länk 3</a></li>
    </ul>
</li>
<li><a href="#">Kategori 2</a>
   <ul>
      <li><a href="#">Länk 4</a></li>
   </ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
   <ul>
      <li><a href="#">Länk 6</a></li>
      <li><a href="#">Länk 7</a></li>
      <li><a href="#">Länk 8</a></li>
      <li><a href="#">Länk 9</a></li>
   </ul>   
</li>
</ul>

Så bytter du det ut med det du vil.
 # = URL
Länk = Navnet/Teksten i drop-down
Kategori = "hovedskriften"

For å endre på størrelse, farger og slikt, må du gå til koden i Stilsettet og endre på den.

Meny under header

    15.11.2010 - 21:00

Framgangsmåte:

1. Gå inn på Avansert design > Forsiden. Gå ned til der div-tagen til headeren slutter (</div>)  og lim inn denne koden:

<div id="menyboks" class="meny">
<ul>
 <li><a href="http://www.dinblogg.no">&nbsp;Forsiden</a></li>
 <li><a href="http://www.dinblogg.no">Om meg</a></li>
 <li><a href="http://www.dinblogg.no">Videoer</a></li>
 <li><a href="http://www.dinblogg.no">Kontakt</a></li>
 <li><a href="http://www.dinblogg.no">Hvorfor Meg</a></li>
 <li><a href="http://www.dinblogg.no">Outfits</a></li>
</ul>
</div>

(PS! Bytt ut "http://www.dinblogg.no/" med lenkene til dine sider).

Gjør dette med innlegg, kategorier og arkiv hvis du vil ha det i alle sider på bloggen.

2. Lim inn koden nedenfor øverst eller nederst i stilsettet ditt.

#menyboks{
height="40px";
background:#ffe3e9;
background-color: #FFBEF0;
width: 951px
}
.meny ul{
list-style-type:none;
}
.meny li{
display:inline;
}
.meny a{
float:left;
width:100px;
text-decoration:none;
background-color: #FFBEF0;
font-weight:bold;
font-size=14px;
padding:10px;
border-right:2px solid #000000;
font-family:"Verdana";
}
.meny a:hover{
background:#FFBEF0;

Fargene color kan endres, font-family (skrifttype) og annet kan endres som eget behov.

Oppdatert 02.05.2015

Hvordan vise hele innlegg på kategori og arkiv?

    15.11.2010 - 20:58

Du må gå inn på "design" - "Rediger" - "maler" og søke opp denne linja; CTRL+F:

<tag:entrylist limit="1000" maxchars="200">

Fjern maxchars="200", men husk at > fortsatt må være der. Gjør dette på kategori, innlegg og arkiv malene hvis du vil ha hele innlegg der.

Enkel knappemeny

    15.11.2010 - 20:52

Først må du gå inn på "design". Trykk på "rediger" og så "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, ikke vær redd). For at disse skal vises må du nå gå inn i "maler". Finn så denne linja:

Trykk CTRL+F, og søk på denne linjen.

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

 

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>

Så må du redigere litt i koden. La oss si at 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://din.blogg.no/">FORSIDEN</a></li>

GÅ inn som besøkende på din egen blogg og kopier søkelinjen til det innlegget du vil ha og lim det inn der det står URL-ADRESSE.

Endre "Send kommentar"

    15.11.2010 - 20:49

Gå til Design -> Rediger -> Maler -> Innlegg

Bla ned til du finner "Send kommentar" og bytt ut med det du vil skal stå der.

Tips: Trykk på Ctrl nederst på venstre side av tastaturet. Hold den inne og trykk på F. Så søker du på "Send kommentar", så finner du det! 

Endre "X ANTALL KOMMENTARER"

    15.11.2010 - 20:46

Vil du at for eksempel at det skal stå "2 søte små" istedenfor "2 kommentarer", så gjør du dette:
Trykk på Design -> Rediger -> Maler

- Trykk på CTRL + F tasten på tastaturet eller rull ned til du finner det.
- Søk på: <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
- Det du skal gjøre er å endre litt på koden, sånn at den blir ca slik:
<a href="${EntryPermaLink}#comment">${EntryCommentCount} søte små</a>

Mellomrom mellom header og innhold

    15.11.2010 - 20:44

Har du lyst på mellomrom mellom header og innhold? Da går du inn på "design", "rediger" også "stilsett". Det skal ca. se ut som dette:


#header {
background-color: #FFFFFF;
background-image: url(''HER ER URL'EN TIL DIN HEADER);
height: 480px;
background-repeat: repeat;
margin: 0px 0px 10px 0px;                         << HER!

Sett inn denne koden margin: 0px 0px 10px 0px; slik som jeg har gjort over. Vil du ha større eller mindre mellomrom, bare endrer du der det står 10px, til f.eks 5px eller 20px.

Menyen fra høyre til venstre

    15.11.2010 - 20:42

Koden du skal legge inn er:
}
#main {
float: right;
}
#side {
float: left;


Hvor legger jeg den inn?
Du legger den inn under #wrapper.
Slik skal det se ut sånn ca:

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

Forhåndsvis først, så ser du om du har gjort det riktig. Husk å lagre!

Ramme rundt bloggen

    15.11.2010 - 20:40

Hvordan gjør jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:

border: 2px solid #000000;

Hvor legger jeg den inn?
Du legger den inn 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 solid #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px solid #000000;
 
Istedet for solid, som betyr helstrukken linje rundt bloggen, kan du putte inn disse:
dotted
dashed
solid
double
groove
ridge
inset
outset

border-bottom = ramme eller strek kun på bunnen

bordet-top = ramme eller strek kun på toppen

border-left / border-right = ramme eller strek kun til venstre eller høyre


For å få tykkere ramme, så kan du bare endre ved å skrive 3px og hvis rammen skal være mindre, så skriver du bare 1px. Farger endrer du også fra #000000; (svart) til en annen type farge.

Smal og midtstille bloggen

    14.11.2010 - 15:59

Smal blogg

Koden:
width: 610px;

Hvor legger jeg den inn?
Du legger den under #header, #wrapper og #footer.

Slik skal det se ut da:

#header {
background-color: #FFFFFF;
height: 236px;
margin-left: left;
margin-right: left;
width: 700px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: left;
margin-right: left;
width: 700px;
}
#footer {
background-color: #FFFFFF;
margin-left: left;
margin-right: left;
width: 700px;
}

Nå er det bare å endre tallet til hva du måtte ønske. 600px eller kanskje 800px. Du bestemmer.


Midtstille bloggen

Koden du skal bruke:
margin-left: auto;
margin-right: auto;

Hvor legger jeg 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;

Bakgrunnsbilde som "står fast"

    14.11.2010 - 15:58

Hvor legger jeg den inn?
Denne koden skal du lime inn øverst i stilsettet.

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

Endre bakgrunn for overskrifter

    14.11.2010 - 15:58

Hvor legger jeg den inn?
Denne koden skal du lime inn nederst i stilsettet ditt.

h2 {
cursor:default;
background-color: #000000; <- Her endrer du bakgrunnsfarge..
color: #16CC16;
font-size:9pt;
font-family:tahoma;
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;

Hvor mange leser bloggen din akkurat nå?

    14.11.2010 - 15:57

Hvor legger jeg den inn?
Endre profil - > Beskrivelse
I ruten for beskrivelse skal du lime inn koden, og du må huske på å legge inn linken til bloggen din.

Så limer du inn dette:
<!-- 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>

Jeg har den koden på høyre side av bloggen. Det går også ann å legge inn koden på Widgets.
Gå inn på Design - Rediger - Widgets.

Hvordan få headeren (bilde) på plass der oppe

    14.11.2010 - 15:57

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
Du limer bare inn koden i stilsettet ditt.

Større profilbilde

    14.11.2010 - 15:56

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å kan du 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.

Mindre/større skrift på innleggene dine

    14.11.2010 - 15:56

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

Hvor skal jeg legge den inn?
Den skal du legge inn under wrapper.

Slik for eks. skal det se ut;
#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

    14.11.2010 - 15:55

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

Hvor skal jeg legge den inn?
Den skal du legge nesten helt nederst i stilsettet ditt.

Slik skal det noenlunde 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; }

Bilde ved siden av teksten

    14.11.2010 - 15:11

Legg inn et bilde på vanlig måte i innlegget du skriver i og trykk på "Html"-knappen eller "HTML av/på".

Da finner du koden:
<img src="adressetilbildet.jpg"/img>

Legg inn align="left" eller align="right" etter adressen så det ser slik ut:

<img src="adressetilbildet.jpg" align="left" /img>

Skift "left" til "right" hvis du vil ha bildet på venstre eller høyre side.

- Håper dere skjønte dette!

Legge inn Youtube videoer til bloggen

    20.10.2010 - 21:11

Mange har lurt på hvordan man legger inn Youtube videoer på bloggen. Her skal jeg vise dere (og dette er mine forklaringer):
Det første du må gjøre er å gå inn på Youtube. Velg en sang/video. Trykk på "Del" > "Innbygg" som står under videoen. Da kommer det opp ca. sånn her:

 

<iframe width="800" height="450" src="https://www.youtube.com/embed/-ncIVUXZla8" frameborder="0" allowfullscreen></iframe>

 

Tips:
Trykker du på "Vis mer" kan du velge størrelsen på videoen som passer bloggen din. Er bloggen din 800px i bredden, kan du skrive det i feltet for bredden. Kopier koden.

Blogginnlegg:
Skriv et nytt innlegg. Trykk på HTML av/på som ligger under antall ord. Lim inn koden du kopierte. Trykk på  HTML av/på igjen, og du får opp en video.

#youtube #bloggdesign #koder

Vis hele innlegg i kategori og arkiv

    24.02.2010 - 20:49

1. Gå inn på Design > rediger > maler > kategori
2. Trykk og søk (ctrl + f) etter <tag:entrylist limit="1000" maxchars="200">
3. Fjern maxchars="200", men ikke fjern denne >
4. Lagre, og gjør det samme på kategori og arkiv.

Så nå har du hele innlegg på kategori og arkiv!

Søkerute på din blogg

    24.02.2010 - 20:44

Trykk på Ctrl+F og søk opp <div id="side" class="yui-u"> 

Under denne linjen legger du inn denne koden:
.<div class="sokerute">
<h3>Søk i bloggen</h3>
<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post">
<input type="hidden" name="bl_id" value="${BlogID}" />
<input type="text" name="criteria" value="" size="12" maxlength="64" />
<input type="submit" value="Søk" />
</form>
</div>

Så har du en egen søkekode!

Endre antall poster som vises på forsiden

    10.02.2010 - 18:36

Hvis du vil endre antall poster som vises på forsiden må du finne denne koden i maler:

<div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> » ${BlogTitle}</div>
                <div id="main" class="yui-u first">
                <tag:entrylist limit="30">

Den ligger ganske langt oppe.

For å endre antallet poster som skal vises på forsiden, må du endre tallet der det står <tag:entrylist limit="30">. Du kan enten skrive et høyere eller lavere tall, alt etter hva du ønsker.

Lavere: Mindre innlegg
Høyere: Flere innlegg

Html - koder til blogg

    09.02.2010 - 22:44

Noen 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)

Fargekart;
http://www.myspacedev.com/color-codes/

Forandre linker når man tar musen over

    09.02.2010 - 22:35

Gå inn på DESIGN - REDIGER - STILSETT og søk etter:

a { color: #FF69B4}
a:link { color: #FF69B4}
a:visited { color: #FF69B4}
a:active { color: #FF69B4}
a:hover { color:#FF0099}



ENDRE FARGE PÅ LINK

a { color: #FFFFFF}
a:link { color: #FFFFFF}
a:visited { color: #FFFFFF}
a:active { color: #FFFFFF}
a:hover { color:#000000}



STREK PÅ MIDTEN AV LINK

a { color: #FFFFF}
a:link { color: #FFFFFF}
a:visited { color: #FF6FFF}
a:active { color: #FFFFFF}
a:hover {text-decoration: line-through;}



STREK UNDER LINK

a { color: #FFFFFF}
a:link { color: #FFFFFF}
a:visited { color: #FFFFFF}
a:active { color: #FFFFFF}
a:hover {text-decoration: underline;}



RAMME RUNDT LINK

a { color: #FFFFFFF}
a:link { color: #FFFFFF}
a:visited { color: #FF6FFF}
a:active { color: #FFFFFF}
a:hover {border:#000000 1px solid;}



LINJER PÅ SIDEN AV LINKEN


a { color: #FFFFFF}
a:link { color: #FFFFFF}
a:visited { color: #FFFFFF}
a:active { color: #FFFFFF}
a:hover{color: #9797B0;text-decoration:none; border-left:solid 1px; border-right:solid 1px;}



LINJE OVER OG UNDER LINK


a { color: #FFFFFF}
a:link { color: #FFFFFF}
a:visited { color: #FFFFF}
a:active { color: #FFFFFF}
a:hover {COLOR:#000000; TEXT-DECORATION:underline overline}

 

Ingen høyreklikk (kopiering)

    09.02.2010 - 22:33

Om du ikke vil at noen skal kopiere tekster/bilder hos deg, altså ingen høyreklikk, legger du denne koden nederst i stilsettet ditt:

<BODY ONCONTEXTMENU="return false"></BODY><script language=JavaScript> <!--var message="Ingen kopiering. På forhånd takk!"; 
/////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } 
function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } 
if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } 
document.oncontextmenu=new Function("alert(message);return false") 
// --> 
</script>

Da kan ingen kopiere (høyreklikke) på din hjemmeside mer!

Ramme rundt hvert innlegg

    03.02.2010 - 20:58

Hvor skal jeg legge den inn?
Denne koden skal du legge helt nederst i stilsettet ditt.

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

Endre det med "center" som du ser på koden øverst:
left = venstrestilt
right = høyrestilt
center = midtstilt

Få bort linken (blogg.no) under headeren din

    31.01.2010 - 11:50

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.
Etter du har tatt bort den, så skal du lagre malen, og da skal linken under headeren være borte. Du kan gjerne gjøre det på kategorier, akriv osv ... også.

Fjerne "siste kommentarer", "arkiv" ...

    10.01.2010 - 19:03

Gå først 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>
  <ul>
  <tag:commentlist global="true" limit="10" sort="desc">
  <li>${CommentAuthorLinkIf} om ${CommentArticleLink}</li>
  </tag:commentlist>
  </ul>
  </div>

Dette skal du fjerne. 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.

CINDY Z.

CINDY Z.

20, Kristiansand

Hei og velkommen til min blogg! Her kan du følge med på min hverdag og ting jeg liker å holde på med. Min lidenskap er å fotografere, drive med design og interiør. Ellers blogger jeg om andre kreative ting som du finner på bloggen.

Bestill design

Kontakt/samarbeid:
zhuoblogg@hotmail.no

Siste innlegg

Annonser




Lenker

Bloggdesign



Design og koding av KvDesign - www.kvdesign.no
hits