hits

CINDY Z.

Design, creativity, photography, interior ... zhuoblogg@hotmail.no

Scrollbox i menyen p bloggen

  • 16.11.2017 - 22:08
  • Hvis du har en meny p toppen av bloggen som str fast, er det ikke sikkert at alle dine kategorier og arkiv vil vises nr man trykker p knappen. En scrollbox gjr det mye enklere som viser hele listen. Koden er samme som jeg bruker p min blogg og den legges inn fr <tag:categorylist>:

    <div style="width:auto;height:300px;line-height:em;overflow:auto;padding:5px;">

    Og her legger du koden:

    <li><span class="menu-toggler">Kategorier</span>
    <ul>
    <div style="width:auto;height:300px;line-height:em;overflow:auto;padding:5px;">
    <tag:categorylist limit="100">
    <li><a href="${CategoryLink}">${CategoryName}</a></li>
    </tag:categorylist>
    </ul>
    </li>
    <li><span class="menu-toggler">Arkiv</span>
    <ul>
    <div style="width:auto;height:300px;line-height:em;overflow:auto;padding:5px;">
    <tag:archivelist limit="100">
    <li><a href="${ArchiveLink}">${ArchiveName}</a></li>
    </tag:archivelist>
    </ul>
    </li>
    <li><span class="menu-toggler">Lenker</span>
    <ul>
    <tag:linklist>
    <li><a href="${LinkUrl}">${LinkName}</a></li>
    </tag:linklist>
    </ul>
    </div>

    #scrollbox #bloggdesign #design #html

    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 skjermstrrelser (responsivt). Jeg valgte strrelsen 10x3. Det er bare sette opp etter eget nske, du kan ogs forhndsvise for se hvilke valg du har gjort. Nr 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. Hper dere skjnte det. Flg 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 tft. Man kangjerne ha en slik under hvert blogginnlegg for gjre 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 frste!

    #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; // Hyden p bloggen som det skal sn p.

    Count =25; // Antall snflak. Ikke angi for stort tall.

    MaxStep=2; // Maks steg i rrelsen.

    MinStep=1; // Min. steg i rrelsen.

    MaxFlake=12; // Maks strrelse p snflakene.

    MinFlake=4; // Min. strrelse p snflakene.

    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 nr midten nes.

    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 ftt en html kode som denne. Den limer du inn i forsiden, innlegg, kategori og arkiv under </head>. Da har du ftt 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 vre interessant for leserne av en bestemt kategori, holde dem engasjert med bloggen din, og kende trafikken. Det er ikke ndvendig 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 fr p avansert design > forside/innlegg/kategori/arkiv > fr </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 strrelsen kommer an p hvor stor reklamen er. Info om detteHER.

    Lage ikon til nettsiden din

  • 28.07.2014 - 21:03
  • P min blogg har jeg et bilde av en blomst som ikon. Det gr an lage et slikt ikon p favikon.com, men jeg gjr det enkelt: Frst 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. Sk etter shortcut icon og bytt ut det som er merket med rdt. Om du har bilde fra PC-en, kan du laste bildet opp p bloggopplasteren, tinypic.com eller p bildr.no.

    Lager mitt frste gratisdesign

  • 10.05.2014 - 22:31

  • Kommer snart!

    "Scroll til toppen" knapp

  • 05.04.2014 - 21:23
  • Snn ser denne knappen ut til hyre 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) fr </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 gjr 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 ftt meg instagram! Og med instagram kan man vise frem p bloggen!

    P 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 gjenstr det finne nye flgere, hihi. 

    Text fade effect

  • 03.03.2013 - 22:41
  • Jeg har dette p bloggen min akkurat n. Nr 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. Nr 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 str 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; }

    Nr du holder musepilen over bildet, ser du det "lyser".

    Forkort lange linker til korte

  • 25.11.2012 - 16:24
  • Gjr 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 fr 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 hyere tall (f.eks: 600) hvis du vil ha sidemenyen hyere opp.
    Du m endre 300til noe mindre tall (f.eks: 100) hvis du skal ha sidemenyen lengre ned.
    Husk ogs lage headeren mindre, hvis bloggen blir litt rar nr du bruker denne koden.

    Farge bak overskrift

  • 26.03.2011 - 16:11
  • Koden her:


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

    h3 {

    background-color:#478aff; < Mrk 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; <- Mrk 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 nr 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 endrop-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.

    Sk p (Ctrl+F) <head> Du trenger egentlig ikke ske, du ser det med en gang atden 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 flgende 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 nr du legger musepilen over linken

  • 07.12.2010 - 22:19
  • Det du m gjre er legge inn denne koden:
    a:hover {letter-spacing:2px}

    Snn at det ser ca snn her ut:
    a:link {color: #000000;}
    a:visited {color: #000000;}
    a:hover {letter-spacing:2px}
    a:active {color: #000000;}

    Der det str 2px kan du endre til f.eks 1px eller 5px. Dette bestemmer hvor stort mellomrommet mellom hver bokstav da skal vre.

    Bloggdesignkoder hjelperen

  • 15.11.2010 - 22:07
  • SKRIVE INNLEGG:
    ♥ Bilde ved siden av teksten HER
    ♥ Legge inn Youtube videoer p bloggen HER
    ♥ Legge inn koder i en boks HER

    EFFEKTER:
    ♥ Dalende sn p bloggen HER (NY)
    ♥ Forandre linker nr man tar musen over HER
    ♥ Hvordan f bloggen/bildet gjennomsiktig? HER
    ♥ Mellomrom mellom bokstavene nr du legger musepilen over HER 
    ♥ Usynlig ingen hyreklikk 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 hyreklikk (kopiering) HER
    ♥ Skerute p din blogg HER

    ENDRE/FJERNE/FLYTTE:
    ♥ Alle bilder blir til lik breddestrrelse 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 nr 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 "str fast" HER
    ♥ Farge bak overskrift HER
    ♥ Menyen fra hyre til venstre HER
    ♥ Mellomrom mellom header og innhold HER
    ♥ Midtstille overskriften HER
    ♥ Mindre/strre skrift p innleggene dine HER
    ♥ Smal og midtstille bloggen HER
    ♥ Strre 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 str 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 sprre!

    Midtstille overskriften

  • 15.11.2010 - 21:06
  • Trykk p "Design" - "Rediger" - "Maler".

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

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

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

    Da skal det se snn 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 beskende!!!) og klikke deg dit du vil linke knappen til. Da ser du url-adressen i skelinja. La oss si at du vil ha en knapp som str "Konkurranser" p, der ALLE konkurransene du har, ligger inne p. Alts FLERE INNLEGG P KNAPPEN. Da M du ha en KATEGORI som heter Konkurranser. Nr du har laget kategorien, gr du p framsiden av bloggen din og trykker p kategorien "konkurranser". Nr siden er ferdig opplastet der, kan du trygt og godt kopiere URL-linken oppe i skefeltet, og lime den inn i koden. P denne mten fr du da alle innleggene du lager i kategorien "konkurranser", inn p menyknappen. Hvis du BARE vil ha 1 INNLEGG P KNAPPEN, gr du rett inn p innlegget og kopierer linken til bare innlegget, og legger inn i koden.

    Nr 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 gjre 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 strrelsen 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 nr 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 snt har jeg funnet p selv)
    Legg inn p: Stilsett/CSS
    Ogs lagrer du. Ingenting vil skje.


    Etterp gr 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="#">Lnk 1</a></li>
    <li><a href="#">Lnk 2</a></li>
    <li><a href="#">Lnk 3</a></li>
    </ul>
    </li>
    <li><a href="#">Kategori 2</a>
    <ul>
    <li><a href="#">Lnk 4</a></li>
    </ul>
    </li>
    <li><a href="#">Lnk 5</a></li>
    <li><a href="#">Kategori 3</a>
    <ul>
    <li><a href="#">Lnk 6</a></li>
    <li><a href="#">Lnk 7</a></li>
    <li><a href="#">Lnk 8</a></li>
    <li><a href="#">Lnk 9</a></li>
    </ul>
    </li>
    </ul>

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

    For endre p strrelse, farger og slikt, m du g til koden i Stilsettet og endre p den.

    Meny under header

  • 15.11.2010 - 21:00
  • Framgangsmte:

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

    Gjr 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: 958px;
    }
    .meny ul{
    list-style-type:none;
    }
    .meny li{
    display:inline;
    }
    .meny a{
    float:left;
    width:137px;
    text-decoration:none;
    background-color: #FFBEF0;
    font-weight:bold;
    font-size:11px;
    padding:10px;
    border-right:1px 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 27.07.2017

    Hvordan vise hele innlegg p kategori og arkiv?

  • 15.11.2010 - 20:58
  • Du m g inn p "design" - "Rediger" - "maler" og ske opp denne linja; CTRL+F:

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

    Fjern maxchars="200", men husk at > fortsatt m vre der. Gjr dette p kategori, innleggog arkiv malene hvis du vil ha hele innlegg der.

    Enkel knappemeny

  • 15.11.2010 - 20:52
  • Frst 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 forhndsvisningen, ikke vr redd). For at disse skal vises m du n g inn i "maler". Finn s denne linja:

    Trykk CTRL+F, og sk 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 str "Valgfritt". for eksempel slik:

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

    G inn som beskende p din egen blogg og kopier skelinjen til det innlegget du vil ha og lim det inn der det str 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 sker 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 ste sm" istedenfor "2 kommentarer", s gjr du dette:
    Trykk p Design -> Rediger -> Maler

    - Trykk p CTRL + F tasten p tastaturet eller rull ned til du finner det.
    - Sk p: <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
    - Det du skal gjre er endre litt p koden, snn at den blir ca slik:
    <a href="${EntryPermaLink}#comment">${EntryCommentCount} ste sm</a>

    Mellomrom mellom header og innhold

  • 15.11.2010 - 20:44
  • Har du lyst p mellomrom mellom header og innhold? Da gr 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 strre eller mindre mellomrom, bare endrer du der det str 10px, til f.eks 5px eller 20px.

    Menyen fra hyre 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 snn ca:

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

    Forhndsvis frst, s ser du om du har gjort det riktig. Husk lagre!

    Ramme rundt bloggen

  • 15.11.2010 - 20:40
  • Hvordan gjr 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. snn her skal det se ut:
    (Du kan ogs leggekoden 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 hyre


    For f tykkere ramme, s kan du bare endre ved skrive3px og hvis rammen skal vre 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 mtte 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 "str fast"

  • 14.11.2010 - 15:58
  • Hvor legger jeg den inn?
    Denne kodenskal 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 kodenskal 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 hyre side av bloggen. Det gr 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.

    Strre profilbilde

  • 14.11.2010 - 15:56
  • Koden du skal bruke er:
    <img src="PICTURE URL" height="100">

    Forklaring:
    Picture url skjnner 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 gjr du det:
    Design -> Rediger -> Maler.
    Her skal du finne

    <img src="${ProfileImageUrl}" alt="${ProfileName}" />.


    S kan du for eksempel ske (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 linkensom du skal legge inn i koden. Og du kan endre strrelsen for bildet ditt ogs hvis du vil.
    N trykker du p Lagre Malen og da skal bildet ditt vre strre.

    Mindre/strre 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 gjre n er endre tall, vil du ha strre 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 mte 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 hyre side.

    - Hper dere skjnte dette!

    Legge inn Youtube videoer p 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 frste du m gjre er g inn p Youtube. Velg en sang/video. Trykk p "Del" > "Innbygg" som str under videoen. Da kommer det opp ca. snn 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 strrelsen 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 fr 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 sk (ctrl + f) etter <tag:entrylist limit="1000" maxchars="200">
    3. Fjern maxchars="200", men ikke fjern denne>
    4.Lagre, og gjr det samme p kategori og arkiv.

    S n har du hele innlegg p kategori og arkiv!

    Skerute p din blogg

  • 24.02.2010 - 20:44
  • Trykk pCtrl+F og sk opp<div id="side" class="yui-u">

    Underdenne linjen legger du inn denne koden:
    .<div class="sokerute">
    <h3>Sk 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="Sk" />
    </form>
    </div>

    S har du en egen skekode!

    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 str <tag:entrylist limit="30">. Du kan enten skrive et hyere eller lavere tall, alt etter hva du nsker.

    Lavere: Mindre innlegg
    Hyere: 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 =Sk

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

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

    Forandre linker nr man tar musen over

  • 09.02.2010 - 22:35
  • G inn p DESIGN - REDIGER - STILSETT og sk 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 hyreklikk (kopiering)

  • 09.02.2010 - 22:33
  • Om du ikke vil at noen skal kopiere tekster/bilder hos deg, alts ingen hyreklikk, legger du denne koden nederst i stilsettet ditt:

    <BODY ONCONTEXTMENU="return false"></BODY><script language=JavaScript> <!--var message="Ingen kopiering. P forhnd 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 (hyreklikke) 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 = hyrestilt
    center = midtstilt

    F bort linken (blogg.no) under headeren din

  • 31.01.2010 - 11:50
  • Slik gjr du det:
    Design -> Rediger -> Maler.
    Ctrl + f. Sk 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 vre borte. Du kan gjernegjre det p kategorier, akriv osv ... ogs.

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

  • 10.01.2010 - 19:03
  • G frst til maler (design -> Rediger -> Maler).
    Nr du har gjort det s sker 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 gjr du med 'Arkiv', 'Kategorier' osv. Du fjerner de du vil.

    Etter det s trykker du p Lagre Malen, og da skal de "boksene" vre borte.




    facebook, media, social, social media, socmed iconinstagram, media, social, social media, socmed iconmedia, social, social media, socmed, tube, you, youtube iconmedia, snapchat, social, social media icon