Scrollbox i menyen på bloggen

Hvis du har en meny på toppen av bloggen som står fast, er det ikke sikkert at alle dine kategorier og arkiv vil vises når man trykker på knappen. En scrollbox gjør det mye enklere som viser hele listen. Koden er samme som jeg bruker på min blogg og den legges inn før <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

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 10×3. 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

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 [email protected].

PS: Lager gratis til de 3 første!

#underskrift #logo #navn #design

Snø som daler ned på bloggen

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’>❄</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ø

// <![CDATA[
Width =1050; // Angi bredden på bloggen som det skal snø på.
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’>❄</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>

// ]]>

LinkWithin – “relevante innlegg”

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?

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

  

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.

Skygge bak overskrift

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.