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

Cactus bloggdesign

Headeren.

Bloggdesignet med header.

Har jobbet litt med header og bloggdesignet i dag på en annen designtest-blogg. Bloggdesignet har en meny over headeren! Hva synes dere om designet?

#blogg #header #design #bloggdesign

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

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

// <![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>

// ]]>

#html #bloggkoder #bloggdesign #snø

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  

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å imgur.com.

Nytt gratisdesign “Pink Rose”

Nå har jeg endelig lagt ut kodene på bloggen. Som sagt er dette det første gratisdesignet jeg har laget, om jeg skulle lage flere gratisdesign vet jeg ikke enda. Kom gjerne med tips til type bloggdesign dere ønsker.

Header: 950 px; i bredden og høyde bestemmes selv.
Bilder i innlegg: Max 700px; i bredden.

Annonser eller bannere kan legges under sidebaren som er 180 px; i bredden eller som på widgets. Vær snill å ikke fjern blogg.no’s reklamer (en under innlegg og en i sidebaren) da det er påbudt å ha med disse i alle blogger. Det er lov å endre på bloggdesignet om du vil ha litt mer personlig design, men det er ikke lov å fjerne linken som det står jeg har laget det.

Si gjerne ifra hvis du bruker det, så kan jeg se hvordan det ser ut på din blogg.

Kodene kan hentes her:
Stilsett | Forsiden | Innlegg | Kategorier | Arkiv

#blogg #design #bloggdesign #gratisdesign #pink

Gratisdesign 1 – Pink Rose (arkiv)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:tag=”http://blogg.no/ns/tag” xml:lang=”no” lang=”no”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>${CategoryName} (${BlogTitle})</title>

<meta name=”description” content=”${BlogDescription}” />

<script type=”text/javascript”>var domainName = “.${AppDomain}”;</script>

<script type=”text/javascript” src=”http://static.blogg.no/blogs/script.js”></script>

<link rel=”alternate” href=”http://feeds.blogg.no/${BlogId}/post.rss” title=”Siste innlegg” type=”application/rss+xml” />

<link rel=”stylesheet” href=”http://design.blogg.no/builder/screen.css” type=”text/css” />

<link rel=”stylesheet” href=”${BlogUrl}style.css” type=”text/css” />

<link rel=”shortcut icon” href=”http://bloggfiler.no/ciya.blogg.no/images/1859974-8-1400877171641.jpg” type=”image/gif” />

</head>

<body>

<div id=”doc2″>

<br>

<div id=”meny”>

<ul id=”navbar”>

<li><a href=”http://ciya.blogg.no”>FORSIDEN</a>

</li>

<li><a href=”#”>OM MEG</a>

<ul>

<li><a href=”http://link” class=”nav”>Tekst1</a></li>

</ul>

</li>

<li><a href=”#”>FØLG MEG</a>

<ul>

<li><a href=”http://”>Link til nettside</a></li>

</ul>

</li>

<li><a href=”#”>KATEGORIER</a>

<ul>

<tag:categorylist>

<li><a href=”${CategoryLink}”>${CategoryName}</a></li>

</tag:categorylist>

</ul>

</li>

<li><a href=”#”>ARKIV</a>

<ul>

<tag:archivelist>

<li><a href=”${ArchiveLink}”>${ArchiveName}</a></li>

</tag:archivelist>

</ul>

</li>

<li><a href=”#”>LENKER</a>

<ul>

<tag:linklist>

<li><a href=”${LinkURL}”>${LinkName}</a></li>

</tag:linklist>

</ul>

</div>

<div id=”header” onclick=”document.location=’${BlogUrl}’;”>

<h1>

<a href=”${BlogUrl}”>${BlogTitle}</a>

</h1>

<p>${BlogDescription}</p>

</div>

<br>

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

<div id=”main” class=”yui-u first” style=”width:700px;”>

<h1>ARKIV: ${ArchiveName}</h1>

<tag:entrylist limit=”1000″>

<div class=”entry”>

<h2>

<a href=”${EntryPermaLink}”>${EntryTitle}</a>

</h2>

<div class=”content”>${EntryBody}</div>

<div class=”meta”>

<ul>

<li>${EntryDate} kl.${EntryTime} i

<a href=”${EntryCategoryLink}”>${EntryCategoryName}</a></li>

<li>

<tag:if test=”${EntryCommentCount == 0}”>

<a href=”${EntryPermaLink}#comment”>Ingen kommentarer</a>

<tag:elseif test=”${EntryCommentCount == 1}” />

<a href=”${EntryPermaLink}#comment”>Én kommentar</a>

<tag:else />

<a href=”${EntryPermaLink}#comment”>${EntryCommentCount} kommentarer</a>

</tag:if>

</li>

<li>

<a href=”${EntryPermaLink}”>Permalenke</a>

</li>

<li class=”share”>

<a href=”http://share.blogg.no/share?url=${EntryPermaLink}&amp;title=${EntryTitle}”>Tips en venn</a>

</li>

</ul>

</div>

</div>

</tag:entrylist>

</div>

<div id=”side” class=”yui-u”>

<tag:profile>

<tag:if test=”${ProfileExists == ‘true’}”>

<div id=”profile” class=”clearfix”>

<div>

<br>

<br>

<br>

<p><img style=”border: 0px none; display: block; margin-left: auto; margin-right: auto;” src=”http://oi57.tinypic.com/1xxphj.jpg” alt=”” width=”180″ height=”145″ /></p>

</a>

</div>

<h3>

<a href=”${ProfileUrl}”>${ProfileName}</a>

</h3>

<p>${ProfileAge}, ${ProfileFrom}</p>

<p>${ProfileDescription}</p>

</div>

</tag:if>

</tag:profile>

<tag:include module=”sidebar”></tag:include>

<div>

<h3>Kategorier</h3>

<ul>

<tag:categorylist>

<li>

<a href=”${CategoryLink}”>${CategoryName}</a>

</li>

</tag:categorylist>

</ul>

</div>

<div>

<h3>Arkiv</h3>

<ul>

<tag:archivelist>

<li>

<a href=”${ArchiveLink}”>${ArchiveName}</a>

</li>

</tag:archivelist>

</ul>

</div>

<a href=”http://zhuo.blogg.no” target=”_blank”><img class=”decoded” src=”http://oi57.tinypic.com/ibeydu.jpg” alt=”http://oi57.tinypic.com/ibeydu.jpg” />

</div>

</div>

<div id=”footer” class=”yui-gb”>

<div class=”yui-u first”>

<tag:profile><a href=”http://blogg.no/”>blogg.no</a> leverer teknologien bak <a href=”${BlogUrl}”>${BlogTitle}</a>. Bloggen

<tag:if test=”${ProfileExists == ‘true’}”>skrives av ©

<a href=”${ProfileUrl}”>${ProfileName}</a> og </tag:if> er underlagt

<a href=”http://www.lovdata.no/all/nl-19610512-002.html”>Lov om opphavsrett til åndsverk</a>. Det betyr at du ikke kan kopiere tekst, bilder eller annet innhold uten tillatelse. Forfatter

er selv ansvarlig for innhold. Henvendelser kan rettes til

<a href=”mailto:[email protected]”>[email protected]</a>.</tag:profile>

</div>

<div class=”yui-u”>

<h4>Arkiv</h4>

<ul>

<tag:archivelist limit=”5″>

<li>

<a href=”${ArchiveLink}”>${ArchiveName}</a>

</li>

</tag:archivelist>

</ul>

</div>

<div class=”yui-u”>

<p>Denne tjenesten er levert av blogg.no. Hos oss finner du:</p>

<ul>

<li><a href=”http://blogg.no”>blogg.no</a> – Få din egen blogg, helt gratis.</li>

<li><a href=”http://bloggrevyen.no”>bloggrevyen</a> – Oversikt over nye norske blogginnlegg.</li>

<li><a href=”http://miniblogg.no”>miniblogg</a> – Kjapp blogging i miniformat.</li>

<li><a href=”http://bloggblogg.no”>bloggblogg</a> – Her blogger vi selv om stort og smått.</li>

<li><a href=”http://forum.blogg.no/”>forum</a> – Tips, råd og hjelp om blogging og design.</li>

</ul>

</div>

</div>

</div>

</body>

</html>

Gratisdesign 1 – Pink Rose (kategorier)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:tag=”http://blogg.no/ns/tag” xml:lang=”no” lang=”no”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>${CategoryName} (${BlogTitle})</title>

<meta name=”description” content=”${BlogDescription}” />

<script type=”text/javascript”>var domainName = “.${AppDomain}”;</script>

<script type=”text/javascript” src=”http://static.blogg.no/blogs/script.js”></script>

<link rel=”alternate” href=”http://feeds.blogg.no/${BlogId}/post.rss” title=”Siste innlegg” type=”application/rss+xml” />

<link rel=”stylesheet” href=”http://design.blogg.no/builder/screen.css” type=”text/css” />

<link rel=”stylesheet” href=”${BlogUrl}style.css” type=”text/css” />

<link rel=”shortcut icon” href=”http://bloggfiler.no/ciya.blogg.no/images/1859974-8-1400877171641.jpg” type=”image/gif” />

</head>

<body>

<div id=”doc2″>

<br>

<div id=”meny”>

<ul id=”navbar”>

<li><a href=”http://ciya.blogg.no”>FORSIDEN</a>

</li>

<li><a href=”#”>OM MEG</a>

<ul>

<li><a href=”http://link” class=”nav”>Tekst1</a></li>

</ul>

</li>

<li><a href=”#”>FØLG MEG</a>

<ul>

<li><a href=”http://”>Link til nettside</a></li>

</ul>

</li>

<li><a href=”#”>KATEGORIER</a>

<ul>

<tag:categorylist>

<li><a href=”${CategoryLink}”>${CategoryName}</a></li>

</tag:categorylist>

</ul>

</li>

<li><a href=”#”>ARKIV</a>

<ul>

<tag:archivelist>

<li><a href=”${ArchiveLink}”>${ArchiveName}</a></li>

</tag:archivelist>

</ul>

</li>

<li><a href=”#”>LENKER</a>

<ul>

<tag:linklist>

<li><a href=”${LinkURL}”>${LinkName}</a></li>

</tag:linklist>

</ul>

</div>

<div id=”header” onclick=”document.location=’${BlogUrl}’;”>

<h1>

<a href=”${BlogUrl}”>${BlogTitle}</a>

</h1>

<p>${BlogDescription}</p>

</div>

<br>

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

<div id=”main” class=”yui-u first” style=”width:700px;”>

<h1>KATEGORI: ${CategoryName}</h1>

<tag:entrylist limit=”1000″>

<div class=”entry”>

<h2>

<a href=”${EntryPermaLink}”>${EntryTitle}</a>

</h2>

<div class=”content”>${EntryBody}</div>

<div class=”meta”>

<ul>

<li>${EntryDate} kl.${EntryTime} i

<a href=”${EntryCategoryLink}”>${EntryCategoryName}</a></li>

<li>

<tag:if test=”${EntryCommentCount == 0}”>

<a href=”${EntryPermaLink}#comment”>Ingen kommentarer</a>

<tag:elseif test=”${EntryCommentCount == 1}” />

<a href=”${EntryPermaLink}#comment”>Én kommentar</a>

<tag:else />

<a href=”${EntryPermaLink}#comment”>${EntryCommentCount} kommentarer</a>

</tag:if>

</li>

<li>

<a href=”${EntryPermaLink}”>Permalenke</a>

</li>

<li class=”share”>

<a href=”http://share.blogg.no/share?url=${EntryPermaLink}&amp;title=${EntryTitle}”>Tips en venn</a>

</li>

</ul>

</div>

</div>

</tag:entrylist>

</div>

<div id=”side” class=”yui-u”>

<tag:profile>

<tag:if test=”${ProfileExists == ‘true’}”>

<div id=”profile” class=”clearfix”>

<div>

<br>

<br>

<br>

<p><img style=”border: 0px none; display: block; margin-left: auto; margin-right: auto;” src=”http://oi57.tinypic.com/1xxphj.jpg” alt=”” width=”180″ height=”145″ /></p>

</a>

</div>

<h3>

<a href=”${ProfileUrl}”>${ProfileName}</a>

</h3>

<p>${ProfileAge}, ${ProfileFrom}</p>

<p>${ProfileDescription}</p>

</div>

</tag:if>

</tag:profile>

<tag:include module=”sidebar”></tag:include>

<div>

<h3>Kategorier</h3>

<ul>

<tag:categorylist>

<li>

<a href=”${CategoryLink}”>${CategoryName}</a>

</li>

</tag:categorylist>

</ul>

</div>

<div>

<h3>Arkiv</h3>

<ul>

<tag:archivelist>

<li>

<a href=”${ArchiveLink}”>${ArchiveName}</a>

</li>

</tag:archivelist>

</ul>

</div>

<a href=”http://zhuo.blogg.no” target=”_blank”><img class=”decoded” src=”http://oi57.tinypic.com/ibeydu.jpg” alt=”http://oi57.tinypic.com/ibeydu.jpg” />

</div>

</div>

<div id=”footer” class=”yui-gb”>

<div class=”yui-u first”>

<tag:profile><a href=”http://blogg.no/”>blogg.no</a> leverer teknologien bak <a href=”${BlogUrl}”>${BlogTitle}</a>. Bloggen

<tag:if test=”${ProfileExists == ‘true’}”>skrives av ©

<a href=”${ProfileUrl}”>${ProfileName}</a> og </tag:if> er underlagt

<a href=”http://www.lovdata.no/all/nl-19610512-002.html”>Lov om opphavsrett til åndsverk</a>. Det betyr at du ikke kan kopiere tekst, bilder eller annet innhold uten tillatelse. Forfatter

er selv ansvarlig for innhold. Henvendelser kan rettes til

<a href=”mailto:[email protected]”>[email protected]</a>.</tag:profile>

</div>

<div class=”yui-u”>

<h4>Arkiv</h4>

<ul>

<tag:archivelist limit=”5″>

<li>

<a href=”${ArchiveLink}”>${ArchiveName}</a>

</li>

</tag:archivelist>

</ul>

</div>

<div class=”yui-u”>

<p>Denne tjenesten er levert av blogg.no. Hos oss finner du:</p>

<ul>

<li><a href=”http://blogg.no”>blogg.no</a> – Få din egen blogg, helt gratis.</li>

<li><a href=”http://bloggrevyen.no”>bloggrevyen</a> – Oversikt over nye norske blogginnlegg.</li>

<li><a href=”http://miniblogg.no”>miniblogg</a> – Kjapp blogging i miniformat.</li>

<li><a href=”http://bloggblogg.no”>bloggblogg</a> – Her blogger vi selv om stort og smått.</li>

<li><a href=”http://forum.blogg.no/”>forum</a> – Tips, råd og hjelp om blogging og design.</li>

</ul>

</div>

</div>

</div>

</body>

</html>