Ina Anjuta - Kunst og design
Hjem Gratis bloggdesign Portfolio malerier Flg bloggen Designhjelp

7

Farge p teksten i innleggene

G inn p design>rediger>stilsett

Lim inn denne koden under #body i stilsettet

color: #555555;

Bytt ut fargekoden for endre farge. Det vil si denne: 555555.

Fargekoder kan du finne p designbyggeren eller feks photoshop.

Slik skal det se ut:

body {

font-family: Arial, Helvetica, sans-serif;

color: #555555;

}

  • 2

    Farge og strrelse p teksten i sidemeny

    G inn p design>rediger>stilsett

    Lim disse kodene inn under #side i stilsettet:

    Kode for skriftstrrelse: font-size: 8pt; <----endres ved endre p tallet.

    Kode for farge p skrift:color: # 000000; <------bytte ut fargekode, alts 000000 til feks 555555 som er mrk gr

    Hvis du ikke har #side s limer du inn hele koden under nederst i stilsettet om du vil.

    #side {

    font-size: 8pt;

    font-family: Arial, Helvetica, sans-serif;

    color: # 000000;

    }

  • 7

    Ukens blogg ble.....

    Ja da har jeg kret den som skal vre ukens blogg med bilde og link i sidemenyen en uke!

    Jeg plukket ut de bloggene jeg likte best ogs kastet jeg terning p nett! (man har jo ikke terninger hjemme lenger s....n foregr alt p nett)

    Og det ble.........Anjas verden!!

    Hver uke kommer jeg til kre ukens blogg. Det er ulike kriterier hver uke. Denne gangen var det bra blogg+flaks. Neste uke blir det den som kommenterer mest denne uken!



    "Ut i min hage"

    Flte liksom at bildet passet s godt inn.........

  • 13

    PMELDING TIL UKENS BLOGG

    Har hatt en laaang bloggdesign-periode hvor jeg bare har lagt ut designkoder og gratis design s n er det p tide starte blogge igjen.

    S nye ting ved bloggen er at jeg n har UKENS BLOGG !

    S for bli ukens blogg gjelder det kommentere generelt s plukker jeg ut en "tilfeldig" utifra det. Og en blogg jeg liker.

    Du kan ogs melde deg p i kommentarfeltet under.

    Da vil det vre et bilde av deg p bloggen min i sidemenyen en uke med link!

  • 86

    GRATIS DESIGN 3 # LIGHT GREY

    Eneste forutsetning for at designene er gratis er at dere IKKE tar bort at jeg har laget det. Ellers er det lov endre s mye dere vil. Kult hvis folk tipser om det ogs hvis det skjer.







    (trykk p bildet for se hvordan kommentarer ser ut)

    Her kan du hente designet :

    -Stilsett

    -Maler forside/kategorier/arkiv

    -Maler innlegg

    Lurer du p hvordan du legger inn gratis design?

    -Nederst i dette innlegget str det hvordan du kan legge inn.

    Om designet

    Profilteksten skrives inn p vanlig mte.

    P dette designet bytter du header i maler

    Samme med profilbilde

    Hvis du ikke fr til legge inn design selv kan jeg hjelpe til med det

    Designet har en dropdownmeny over sidemeny

    Sette inn header:

    1.G inn p design>rediger>maler.


    (trykk p bildet for se strre)

    Slik som p bildet ser det ut. Du skal bytte ut det som str markert i bltt med url til den headeren du nsker

    Samme m gjres i alle fire malerne.

    Finne url til bilde? Last opp bilde p photobucket.com, kopier url derfra.

    Header skal vre 792x284. Men inne p malerne kan du endre p strrelsen hvis det ikke skulle passe helt perfekt.

    Bytte profilbilde:

    G inn p design>rediger>maler


    (trykk p bildet for se strre)

    P bildet er det eksempel p hvordan det skal se ut. I malene str det URL TIL PROFILBILDET der skal du lime inn url.

    Gjr det samme i alle fire malerne

    Finne url til bilde? Last opp bilde p photobucket.com, kopier url derfra.

    Strrelsen p profilbildet kan endres rett ved der profilbildeurl str.

    Linker i sidebar ( til" blogger jeg leser")

    1. G inn p design>rediger>maler

    2. Der det er markert i bltt p bildet under skal navnet til den du linker til st. Der det er markert med lilla skal url til bloggen eller nettsiden du linker til ligge.

    3.Hvis du vil ha flere linker kopierer du det som str innenfor gul markering p bildet under, og legger det rett under.



    • Tips for finne frem til de ulike tingene uten ske seg frem er sjekke hvor scrollen ligger p bildet og legg deg ca der.

    Hvordan legge inn design

    1. Kopier hele stilsettet jeg har lagt ut.

    2. Trykk p design

    3. Trykk p rediger

    Her dukker stilsettet opp.(css)

    4. Ta bort alt som str der. Det skal vre helt tomt.

    5. Lim inn stilsettet jeg har lagt ut.

    6.Kopier de fire malene jeg har lagt ut hver for seg og lim inn der den skal. F.eks der jeg har skrevet innlegg skal inn i maler>innlegg osv...

    Hvis det er noe dere lurer p spr! :)

  • 8

    Maler forside/kategorier/arkiv design #3

    <!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">

    <br>

    <br>

    <br>

    <br>

    <head>

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

    <title>${BlogTitle} - ${BlogDescription}</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://i1123.photobucket.com/albums/l560/Inaanjuta/Strawberry.gif" type="image/gif" />

    </head>

    <body class="front">

    <div id="doc2">

    <div id="header">

    <img src="http://img80.imageshack.us/img80/1039/headertest5.png" width="810" />

    <h1>${BlogTitle}</h1>

    <p>${BlogDescription}</p>

    </div>

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

    <div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> ${BlogTitle}</div>

    <div id="main" class="yui-u first">

    <tag:entrylist limit="30">

    <div class="entry">

    <h2>

    <div align="center">

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

    </h2>

    <div class="meta">

    <ul>

    <li>

    </li>

    <li>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif"width="10" />

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

    </ul>

    </div>

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

    <div class="meta">

    <ul>

    <li>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif"width="10" />

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

    </ul>

    <tag:if test="${EntryHasTags == 'true'}">

    <div class="tags">Stikkord:

    <ul><tag:taglist><li><a href="${TagURL}">${TagName}</a></li></tag:taglist></ul></div>

    </tag:if>

    </div>

    </div>

    </tag:entrylist>

    </div>

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

    <div id="meny">

    <ul id="navbar">

    <li><a href="#">Innlegg</a>

    <ul>

    <tag:recentlist limit="10">

    <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>

    </tag:recentlist>

    </ul>

    </li>

    <li><a href="#">Kategorier</a>

    <ul>

    <tag:categorylist>

    <li><a href="${CategoryLink}" class="nav">&raquo; ${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>

    </div>

    <tag:profile>

    <tag:if test="${ProfileExists == 'true'}">

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

    <div>

    <br>

    <br>

    <a href="${ProfileUrl}" title="${ProfileName}">

    <img style="float: center; border: 0;" src="URL TIL PROFILBILDE" height="290">

    </a>

    </div>

    <h3>

    <a href="${ProfileUrl}"></a>

    </h3>

    <p>${ProfileDescription}</p>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif"width="10" />

    <a href="${ProfileUrl}">Legg meg til som venn</a>

    </div>

    </tag:if>

    </tag:profile>

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

    <div>

    <br>

    <br>

    <h3>Blogger jeg leser</h3>

    <br>

    <br>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif"width="10" />

    <a href="URL HER">Navn</a>

    <br>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif"width="10" />

    <a href="URL HER">Navn</a>

    <br>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif"width="10" />

    <a href="URL HER">Navn</a>

    </li>

    </li>

    </ul>

    </div>

    <div>

    <br>

    <br>

    <h3>Widgets</h3>

    <br>

    <br>

    <ul>

    </ul>

    </div>

    <tag:if test="${HasLinks == 'true'}">

    <div>

    <br>

    <br>

    <h3>Design laget av:</h3>

    <br>

    <ul>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif"width="10" />

    <a href="http://inaanjuta.blogg.no/">Ina Anjuta</a>

    <li>

    </li>

    </ul>

    <tag:profile>

    </div>

    </tag:if>

    <tag:if test="${HasProducts == 'true'}">

    <div>

    <h3>Jeg anbefaler</h3>

    <ul>

    <tag:productlist>

    <li class="clearfix"><a href="${ProductUrl}"><img class="asin" align="left" src="http://i.blogg.no/50x50/${ProductImage}" alt="${ProductTitle}" /></a><strong><a href="${ProductUrl}">${ProductTitle}</a></strong>${ProductComment}</li>

    </tag:productlist>

    </ul>

    </div>

    </tag:if>

    </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:hjelp@blogg.no">hjelp@blogg.no</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 smtt.</li>

    <li><a href="http://forum.blogg.no/">forum</a> - Tips, rd og hjelp om blogging og design.</li>

    </ul>

    </div>

    </div>

    </div>

    </body>

    </html>

  • 7

    maler innlegg design #3

    <!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">

    <br>

    <br>

    <br>

    <head>

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

    <title>${EntryTitle} (${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="alternate" href="http://feeds.blogg.no/${BlogId}/comment/${EntryID}.rss" title="Kommentarer til dette inlegget" 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"http://i1123.photobucket.com/albums/l560/Inaanjuta/Strawberry.gif" type="image/gif" />

    </head>

    <body>

    <div id="doc2">

    <div id="header" onclick="document.location='${BlogUrl}';">

    <img src="http://img80.imageshack.us/img80/1039/headertest5.png" width="810" />

    <h1>

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

    </h1>

    <p>${BlogDescription}</p>

    </div>

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

    <div class="breadcrumbs"><ahref="http://blogg.no/">blogg.no</a> <a href="${BlogUrl}">${BlogTitle}</a>

    <a href="${EntryCategoryLink}">${EntryCategoryName}</a> ${EntryTitle}</div>

    <div id="main" class="yui-u first">

    <tag:entry>

    <div class="entry">

    <a name="a${EntryNum}" id="a${EntryNum}"></a>

    <h2><div align="center">${EntryTitle}</h2>

    <div class="meta">

    <ul>

    <li>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

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

    <li>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

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

    </ul>

    </div>

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

    <div class="meta">

    <ul>

    <li>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

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

    <li>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

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

    </ul>

    <tag:if test="${EntryHasTags == 'true'}">

    <div class="tags">Stikkord:

    <ul><tag:taglist><li><a href="${TagURL}">${TagName}</a></li></tag:taglist></ul></div>

    </tag:if>

    <tag:include module="postentry"></tag:include>

    </div>

    </div>

    </tag:entry>

    <tag:if test="${Comments == 1}">

    <a name="comment" id="comment"></a>

    <br>

    <br>

    <br>

    <br>

    <div id="comments">

    <tag:commentlist>

    <div class="comment ${CommentClass}">

    <div class="meta">

    <tag:if test="${CommentProfileUrl != ''}">

    <a href="${CommentProfileUrl}">

    </a>

    <tag:else />

    <tag:if test="${CommentAuthorUrl != ''}">

    <a rel="nofollow" href="${CommentAuthorUrl}">

    </a>

    <tag:else />

    </tag:if>

    </tag:if>

    <h4><img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="20" />${CommentAuthorLinkIf}</h4>

    <p></p>

    </div>

    <div class="content">${CommentText}</div>

    </div>

    </tag:commentlist>

    </div>

    <br>

    <br>

    <div id="newcomment" class="clearfix">

    <h1>Skriv en kommentar</h1>

    <br>

    <form action="${AppUrl}index.bd?fa=comment.insert" id="commentform" method="post" onsubmit="doSubmit(this)">

    <div id="comment_author_wrapper">

    <label for="comment_author">Navn:</label>

    <input id="comment_author" type="text" name="author" onchange="doChange(this)" value="" maxlength="100" />

    </div>

    <div id="comment_authoremail_wrapper">

    <label for="comment_authoremail">E-post:</label>

    <input id="comment_authoremail" type="text" name="authoremail"style="width:415px;"onchange="doChange(this)" value="" maxlength="100" />

    </div>

    <div id="comment_authorurl_wrapper">

    <label for="comment_authorurl">URL:</label>

    <input id="comment_authorurl" type="text" name="authorurl"style="width:710px;"onchange="doChange(this)" value="http://" maxlength="100" />

    </div>

    <div id="comment_text_wrapper">

    <label for="comment_text">Din kommentar:</label>

    <textarea id="comment_text" name="comment"style="width:710px;"onchange="doChange(this);" cols="40" rows="10"></textarea>

    </div>

    <div id="comment_submit_wrapper">

    <input type="hidden" name="commentid" value="${CommentID}" />

    <input id="comment_submit" class="submit" type="submit" name="submit" value="Takk for kommentaren" />

    </div>

    <div id="comment_remember_wrapper">

    <input id="comment_remember" name="comment_remember" onclick="doCheck(this)" type="checkbox" value="1" />

    <label for="comment_remember">Husk meg ?</label>

    Design av:

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

    <a href="http://inaanjuta.blogg.no/">Ina Anjuta</a>

    <br>

    <br>

    </div>

    </form>

    </div>

    </tag:if>

    </div>

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

    <div id="meny">

    <ul id="navbar">

    <li><a href="#">Innlegg</a>

    <ul>

    <tag:recentlist limit="10">

    <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>

    </tag:recentlist>

    </ul>

    </li>

    <li><a href="#">Kategorier</a>

    <ul>

    <tag:categorylist>

    <li><a href="${CategoryLink}" class="nav"> ${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>

    </div>

    <tag:profile>

    <tag:if test="${ProfileExists == 'true'}">

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

    <div>

    <br>

    <br>

    <a href="${ProfileUrl}" title="${ProfileName}">

    <img style="float: center; border: 0;" src="URL TIL PROFILBILDE" height="290">

    </a>

    </div>

    <h3>

    <a href="${ProfileUrl}"></a>

    </h3>

    <p>${ProfileDescription}</p>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

    <a href="${ProfileUrl}">Legg meg til som venn</a>

    </div>

    </tag:if>

    </tag:profile>

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

    <div>

    <br>

    <br>

    <h3>Blogger jeg leser</h3>

    <br>

    <br>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

    <a href="URL HER">Navn</a>

    <br>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

    <a href="URL HER">Navn</a>

    <br>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

    <a href="URL HER">Navn</a>

    </li>

    </li>

    </ul>

    </div>

    <div>

    <br>

    <br>

    <h3>Widgets</h3>

    <br>

    <br>

    <ul>

    </ul>

    </div>

    <tag:if test="${HasLinks == 'true'}">

    <div>

    <br>

    <br>

    <h3>Design laget av:</h3>

    <br>

    <ul>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gif" width="10" />

    <a href="http://inaanjuta.blogg.no/">Ina Anjuta</a>

    <li>

    </li>

    </ul>

    </div>

    </tag:if>

    <tag:if test="${HasProducts == 'true'}">

    <div>

    <h3>Jeg anbefaler</h3>

    <ul>

    <tag:productlist>

    <li class="clearfix"><a href="${ProductUrl}"><img class="asin" align="left" src="http://i.blogg.no/50x50/${ProductImage}" alt="${ProductTitle}" /></a><strong><a href="${ProductUrl}">${ProductTitle}</a></strong>${ProductComment}</li>

    </tag:productlist>

    </ul>

    </div>

    </tag:if>

    </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:hjelp@blogg.no">hjelp@blogg.no</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 smtt.</li>

    <li><a href="http://forum.blogg.no/">forum</a> - Tips, rd og hjelp om blogging og design.</li>

    </ul>

    </div>

    </div>

    </div>

    </body>

    </html>

  • 0

    Stilsett design #3

    .entry {

    background-color: #transparent;

    cursor: crosshair;

    }

    #header {

    background-color: #ffffff;

    background-repeat: no-repeat;

    margin: 0px 0px 0px 0px;

    Width: 810px;

    Height: 270px;

    margin-left: -50px;

    border-bottom: 0px solid #cccccc;

    }

    .breadcrumbs {

    display: none;

    }

    #wrapper {

    background-color: #transparent;

    cursor: crosshair;

    width: 1011px;

    }

    #main {

    background-color:#ffffff;

    float: left;

    font-family: Sathu, Arial, Helvetica, sans-serif;

    color: #555555;

    font-size: 9pt;

    padding: 20px;

    cursor: crosshair;

    Width: 810px;

    margin-left: -70px;

    }

    #side {

    background-color:#ffffff;

    width:210px;

    padding: 8px;

    margin-bottom: 10px;

    float: right;

    font-family: Sathu, Arial, Helvetica, sans-serif;

    color: #555555;

    font-size: 8pt;

    cursor: crosshair;

    margin-top: -348px;

    margin-left: -42px;

    border-left: 4px solid #cccccc;

    }

    a { color: #555555}

    a:link { color: #555555}

    a:visited { color: #555555}

    a:active { color: #555555}

    h1, h2, h3, h4, h5 { font-family: Sathu, Tahoma, Geneva, sans-serif; }

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

    #header { color: #555555; }

    h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #ffffff;

    }

    body {

    background-image: url(http://img707.imageshack.us/img707/3819/striper22.jpg);

    background-attachment: fixed;

    background-position: right bottom;

    font-family: Sathu, Arial, Helvetica, sans-serif;

    color: #555555;

    cursor: crosshair;

    }

    .entry .meta{

    padding: 0px;

    font-family: Sathu, Arial, Helvetica, sans-serif;

    color: #f5f5f5;

    font-size: 9pt;

    cursor: crosshair;

    text-align: left;

    }

    a:hover { color: #cccccc }

    }

    #comments h3{

    font-size: 20px;

    color: #cccccc;

    cursor: crosshair;

    }

    #comments h3 a{

    color: #cccccc;

    font-size: 20px;

    cursor: crosshair;

    }

    #comments .owner{

    border: 0px solid #cccccc;

    background-color: #f5f5f5;

    Width: 695px;

    float: center;

    }

    #comments .owner .meta{

    border-top: 0px solid #f5f5f5;

    border-bottom: 0px solid #f5f5f5;

    background-color:#ffffff;

    color: #ffffff;

    text-align: left;

    }

    #comments .owner .content{

    background-color:#f5f5f5;

    border: 0px solid #cccccc;

    color: #555555;

    margin-left: auto;

    margin-right: auto;

    }

    #comments .user{

    border: 0px solid #cccccc;

    background-color: #f5f5f5;

    color: #555555;

    Width: 695px;

    }

    #comments .user .meta{

    border-top: 0px solid #f5f5f5;

    border-bottom: 0px solid #f5f5f5;

    background-color:#ffffff;

    color: #555555;

    text-align: left;

    }

    #comments .user .content{

    background-color: #f5f5f5;

    border: 0px solid #cccccc;

    color: #555555;

    }

    #comments .other{

    border: 0px solid #cccccc;

    background-color: #f5f5f5;

    color: #555555;

    Width: 695px;

    }

    #comments .other .meta{

    border-top: 0px solid #f5f5f5;

    border-bottom: 0px solid #f5f5f5;

    background-color:#ffffff;

    color: #555555;

    text-align: left;

    }

    #comments .other .content{

    background-color:#f5f5f5;

    border: 0px solid #cccccc;

    color: #555555;

    }

    .meta {text-align: center;}

    }

    #navbar {

    padding: 5px;

    border: 1px dotted #f5f5f5;

    height: 1em;

    width: 40px;

    margin: 0px;

    text-align: left;

    font-family: Sathu, Arial, Helvetica, sans-serif;

    color: #555555;

    font-size: 8pt;

    cursor: crosshair;

    }

    #navbar li {

    float: left;

    list-style: none;

    width: 70px;

    background-color: #f5f5f5;

    font-family: Sathu, Arial, Helvetica, sans-serif;

    color: #555555;

    font-size: 8pt;

    cursor: crosshair;

    }

    #navbar li a {

    padding: 5px;

    display: block;

    border: 1px solid #ffffff;

    color: #000000;

    text-decoration: none;

    font-family: arial;

    font-size: 10px;

    line-height: 12px;

    font-family: Sathu, Arial, Helvetica, sans-serif;

    color: #555555;

    font-size: 8pt;

    cursor: crosshair;

    }

    #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 #f5f5f5;

    color: #727272;

    }

    #navbar li li a:hover {

    background-color: #ffffff;

    }

    #meny {

    width: 250px;

    margin-left: auto;

    margin-right: auto;

    }

    h3 {

    cursor:default;

    background-color: #ffffff;

    color: #555555;

    font-size:10px;

    font-family: Zapfino, Sathu, tahoma;

    letter-spacing:1px;

    line-height:10pt;

    padding: 1px;

    margin-bottom: -9px; margin-top: -9px; margin-right: -9px; margin-left: -9px;

    cursor: crosshair;

    border-bottom: 1px solid #cccccc;

    text-align: center;

    }

    #footer {

    display: none;

    }

    input{

    background-color: #f5f5f5;

    border: 1px solid #cccccc;

    -moz-border-radius: 8px;

    -webkit-border-radius: 8px;

    -khtml-border-radius: 8px;

    border-radius: 8px;

    font-family: tahoma, verdana;

    color: #555555;

    font-weight:center ;

    font-size: 10px;

    }

    textarea{

    background-color: #f5f5f5;

    border: 1px solid #cccccc;

    -moz-border-radius: 8px;

    -webkit-border-radius: 8px;

    -khtml-border-radius: 8px;

    border-radius: 8px;

    font-family: tahoma, verdana;

    color: #000000;

    font-weight:center;

    font-size: 10px;

    }

    h2 {

    color: #555555;

    font-family: Zapfino, tahoma, verdana;

    border-bottom: 1px solid #cccccc;

    line-height: 40px;

    letter-spacing: 0px;

    font-size: 20px;

    }

    h1 {

    color: #555555;

    font-family: Zapfino, tahoma, verdana;

    line-height: 40px;

    letter-spacing: 0px;

    font-size: 25px;

  • 5

    Stillestende bakgrunn p bloggen

    G inn p design> rediger > stilsett

    Lim inn koden under #body.

    background-image: url ('URL TIL BILDET');

    background-attachment: fixed;

    background-repeat: no-repeat;

    Slik at det ser snn ut:

    #body{

    background-image: url ('URL TIL BILDET');

    background-attachment: fixed;

    background-repeat: no-repeat;

    }

    1.For f et bakgrunnsbilde kan du laste opp et bilde p tinypic.com eller photobucket.com

    2.Kopiere url til bildet ditt.

    3.Lime inn url der der str URL TIL BILDET

    4. Husk ta bort linjen med background-color: #ffffff;

  • 1

    Hvordan vise siste kommentar verst

    G inn p design > rediger> maler> innlegg.

    Erstatt denne linjen : <tag:commentlist>.

    med denne : <tag:commentlist sort="desc"> i malene p innlegg.

  • 3

    Linkliste i sidebar

    1.G inn p design >rediger > maler

    2. Kopier koden under:

    <h3>NAVN P LINKLISTEN</h3>

    <p><a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN P LINK</a>

    <p><a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN P LINK</a>

    <p><a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN P LINK</a>

    <p><a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN P LINK</a>

    3. lim inn koden et sted mellom <div id="side" class="yui-u">og <div id="footer" class="yui-gb">

    4.gjr det samme i alle fire malene.

    Hvis du lurer p akuratt hvor linklisten br legges er det bare sprre, men vanskelig vite hvor den nskes. S det er bare prve seg frem og forhndsvise til det funker.

  • 1

    Midtstille bloggen

    G inn p design >rediger >stilsett.

    Dette er koden du skal bruke:

    margin-left: auto;

    margin-right: auto;

    }

    Lim inn slik det ser ut under:

    #header {
    margin-left: auto;
    margin-right: auto;

    }
    #wrapper {
    margin-left: auto;
    margin-right: auto;

    }
    #footer {
    margin-left: auto;
    margin-right: auto;

    }

  • 0

    Fjerne eller skjule blogg.no link

    For skjule:

    1. G inn p design >rediger>stilsett

    Lim inn denne koden nederst i stilsettet:

    }
    .breadcrumbs {

    display: none;

    }

    For fjerne helt:

    1.G inn p design > rediger > maler > forside.

    P forsiden fjerner du denne linjen:

    <div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> ${BlogTitle}</div>

    P innlegg fjerner du hele denne linjen:(design>rediger>maler>innlegg)

    <div class="breadcrumbs"><ahref="http://blogg.no/">blogg.no</a> <a href="${BlogUrl}">${BlogTitle}</a> <a href="${EntryCategoryLink}">${EntryCategoryName}</a> ${EntryTitle}</div>

    P kategori fjerne du denne linjen:(design>rediger>maler>kategori)

    <div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a>
    <a href="${BlogUrl}">${BlogTitle}</a> ${CategoryName}</div>

    P arkiv fjerner du denne linjen: (design>rediger>maler>arkiv)

    <div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a>
    <a href="${BlogUrl}">${BlogTitle}</a> ${ArchiveName}</div>

  • 2

    Bilde som link

    1. G inn p design > rediger >maler

    Dette er koden:

    <a href="LINK TIL INNLEGG"><img src="URL TIL BILDE" alt="bilde"width="400"/></a>

    2. Lim den inn egentlig der du vil, men om du vil ha den rett under profilen i sidemenyen s limer du den inn rett

    under<p>${BlogDescription}</p>

    3. Last opp et bilde p tinypic.com eller photobucket.com og kopier url

    4. Lim inn url der det str URL TIL BILDE

    5. Finn url til siden du vil linke til og lim inn der det str LINK TIL INNLEGG

    6. For endre strrelse endrer du p width="400" til et annet tall.


  • 0

    Sidemeny opp ved siden av header

    G inn p design>rediger> stilsett

    Lim inn koden under nederst i stilsettet:

    }

    #side {

    margin-top: -300px;
    background-color: #ffffff;
    width: 200px;
    }
    Hvis du allerede har #side i stilsettet limer du inn disse linjene under overskriften:

    margin-top: -300px;
    background-color: #ffffff;
    width: 200px;
    Hvis du ikke vil at sidemenyen skal overlappe header m du endre p bredden p header.
    Da limer du inn denne koden under #header i stilsettet: Width: 500px; S m du tilpasse strrelsen slik at det blir riktig
    Det kan hende det vil vre fint om du endrer bredden p sidemenyen ogs da endrer du p width: 200px; til et lavere eller hyere tall under #side.

  • 0

    Luft/mellomrom rundt teksten

    G inn p design > rediger > stilsett

    Snn at ikke tekstene str klint inntil sidene er denne koden fin , den skal limes inn under #entry i stilsettet:

    padding: 5px;

    Jo hyere tall jo strremellomrom.

    Slik som dette:

    }

    #entry {

    padding 5px;

    Denne koden er for de som har oppdelt blogg. Med innlegg og sidemeny forkjellige klammer.

  • 3

    Bredere eller smalere sidemeny

    1. G inn p design >rediger>stilsett

    2. Lim koden hele koden inn nederst i stilsettet:

    }

    #side

    Border: 0 px solid #000000; <----hvis du vil ha ramme rundt kan du skrive inn 1px der det str 0px.

    width: 200px; <----Endre bredden ved legge inn et hyere eller lavere tall her.

    }

    Hvis du allerede har #side limer du inn de to nederste linjene under #side. Alst disse:

    Border: 0 px solid #000000;

    width: 200px;

  • 2

    Fjerne profil eller deler av den

    G inn p design > rediger > maler.

    For fjerne hele profilen s fjerner du linjene under fra de fire malene:

    Det ser nok ikke helt likt ut hos deg som hos meg , men fjern alt mellom:

    <a href="${ProfileUrl}" title="${ProfileName}"> og<p>${ProfileDescription}</p>

    Dette skal fjernes:

    <a href="${ProfileUrl}" title="${ProfileName}">

    <img style="float: center; border: 0;" src="http://i1123.photobucket.com/albums/l560/Inaanjuta/fe.jpg" height="110">

    <br>

    <br>

    <h7>${BlogTitle}</h7>

    <h3>

    <a href="${ProfileUrl}"></a>

    </h3>

    <p>${ProfileDescription}</p>

    For kun fjerne deler av den:

    Profilnavn: fjern<h7>${BlogTitle}</h7>

    Fjerne alt bortsett fra profiltekst: da lar du<p>${ProfileDescription}</p> vre igjen.

  • 2

    Flytte profilnavn til over profilbilde

    G inn p design>rediger>maler

    Finn denne koden i maler:

    <h7>${BlogTitle}</h7>

    Klipp den ut og lim inn under :

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

    <tag:profile>

    Slik at det ser snn ut:

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

    <tag:profile>

    <h7>${BlogTitle}</h7>

    Gjr det samme i alle fire malene.

    Du kan ogs endre p skriftstrrelse ved endre tallet<h7> til eks:<h5>

  • 45

    strre profilbilde

    G inn p design > rediger > maler.

    Her er koden:

    <img style="float: right; border: 0;" src="URL-ADRESSEN DITT BILDE" height="170">

    1. Den skal erstattes med denne linjen i alle malene <img src="${ProfileImageUrl}" alt="${ProfileName}" />

    2. Last opp et bilde p tinypic.com eller photobucket.com

    3. lim inn url til bildet der det str URL-ADRESSEN TIL DITT BILDE. Ikke fjern mer eller mindre.

    4. Endre strrelsen der det strheight="170" til et hyere tall.

  • 24

    Sette inn header uten delegge design

    1. G inn p design > reiger > stilsett

    2. Lim inn denne koden under #header: background-image: url('URL-ADRESSEN TIL BILDET');

    3. Ta bort denne linjen under #header hvis du har den: background-color: #xxxxxx;

    Slik at det ser ut som under:

    #header {

    background-image: url('URL-ADRESSEN TIL BILDET');

    background-repeat: no-repeat;

    height: 300px; <--- Her kan du endre p hyden p headeren

    width: 900px; <----Her kan du endre p bredden p headeren

    }

    4. last opp en header p photobucket.com eller tinypic.com

    5. Kopier url og lim inn der det str med stor skrift. ikke ta bort de to (' ' )

    6. For tilpasse strrelsen kan du endre p bredde eller hyde som forklart ovenfor

  • 7

    Skille blogg og sidemeny med mellomrom

    G inn p design>rediger>stilsett

    Lim disse kodene inn i stilsettet, gjerne nederst.

    1. Bakgrunnsfargen for #wrapper m vre #transparent

    2.Lim inn koden og endre gjerne p breddene alts: width

    #main{

    background-color: #ffffff;

    width: 75%;

    }

    #side{

    background-color: #ffffff;

    width: 20%;

    }


  • 1

    Mellomrom mellom header og blogg.

    metode 1

    G inn p design> rediger> stilsett

    Her er koden:

    margin-top: 10px;

    Den skal limes inn under #header i stilsettet.

    Eksempel:

    }

    #header {

    margin-top: 10px;

    }

    For f strre eller mindre mellomrom endrer du p tallet der det str 10px; til et hyere eller lavere

    Metode 2

    G inn p design> rediger>Maler.

    Finn denne linjeni malene <div id="doc2">

    Lim inn<br>over denne linjen. Du kan lime den inn flere ganger etter hverandre om du vil

    Hvis du har en toppmeny s kan du lime den inn over linjen <head>

    Det er to steder det str <head> s da m du legge det inn over den verste.



  • 1

    Mellomrom mellom innlegg og header

    Metode1.

    G inn p design >rediger>stilsett.

    Lim inn denne koden under # header: margin: 0px 0px 30px 0px;

    Eksempel slik:

    }

    #header {

    Width: 860px;

    Height: 300px;

    margin: 0px 0px 30px 0px;

    }

    Ved endre 30px til et hyere tall fr du strre mellomrom.

    Metode 2: Lim inn<br>under der det str <head> i malene.

    Gjr det samme p alle fire malene. Det str head to steder , du skal lime inn under den nederste.

  • 1

    Effekter nr du tar musepeker over link.

    G inn p design >rediger> stilsett

    Velg en av linkeffektene under og lim inn valgt kode nederst i stilsettet.

    Bytte farge p skriften nr du tar musepeker over en link. Den under er hvit men fargen kan byttes ut ved endre fargekode.

    a:hover{color: #ffffff;}

    Mellomrom mellom bokstavene nr du tar musepeker over link

    a:hover{letter-spacing:2px;}

    Strek under nr du tar musepeker over link

    a:hover{text-decoration: underline;}

    Strek p hver side

    a:hover{color: #000000;text-decoration:none; border-left:solid 1px; border-right:solid 1px;}

  • 0

    Ramme rundt sidebar og skrivefelt

    G inn p design > rediger > stilsett

    Lim inn denne koden under #wrapper:border: 1px solid #000000;

    Slik skal det se ut:

    }

    #wrapper {

    border: 1px solid #000000;

    }

  • 3

    Ramme rundt header

    G inn p design > rediger > stilsett.

    Lim inn denne koden under #header som vist under: border: 1px solid #000000;

    }

    #header {

    border: 1px solid #000000;

    }

    Forskjellige rammetyper finner du her.

  • 1

    Ramme rundt sidebar/sidemeny

    G inn p design > rediger > stilsett

    Koden or rammer: border: 1px solid #000000;

    Lim inn koden under #side

    Hvis du ikke har #side limer du inn hele koden under nederst i stilsettet:

    }

    #side {

    border: 1px solid #000000;

    }

    Annet utseende p rammer?-kommer

  • 0

    Ramme rundt innleggene

    G inn p design > rediger > stilsett

    Koden for ramme: border: 1px solid #000000;

    Lim denne koden inn i stilsettet. om du ikke har #main eller .entry s limer du inn hele kodene under.

    Alle innleggene samlet.

    }

    #main {

    border: 1px solid #000000;

    }

    Hvert enkelt innlegg

    .entry {

    border: 1px solid #000000;

    }

  • 3

    Endre utseende p kommentarer som er skrevet

    Hvis du vil ha mer muligheter for strre endringer p kommentarfelt.

    Har skrevet forklaringer p hva de forskjellige betyr nedover. Det gjr ingenting om forklaringene blir med i stilsettet men du kan ta de bort senere om du vil.

    Lim hele koden inn nederst i stilsettet:

    }

    #comments h3{

    font-size: 20px;

    color: #cccccc;

    }

    #comments h3 a{

    color: #cccccc;

    font-size: 20px;

    }

    #comments .owner{ <-----bestemmer hvordan dine hvordan dine kommentaer ser ut.

    border: 0px solid #cccccc; <-----ramme rundt dine komentarer

    background-color: #ffffff; <-----Bakgrunnsfarge p dine kommentarer

    margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; <-----hvor kommentarene skal ligge fra venstre,hyre osv

    Width: 695px; <------bredde p dine kommentarer

    }

    #comments .owner .meta{ <------bestemmer hvordan infolinjen skal se ut p dine kommentarer

    border-top: 0px solid #cccccc;

    border-bottom: 0px solid #cccccc;

    background-color:#f5f5f5; <------bakgrunnsfarge p infolinje

    color: #ffffff; <-------farge p skrift i infolinje

    margin-bottom: 0px; margin-top: px; margin-right: 0px; margin-left: 0px;

    text-align: left; <----- hvor Skriften i infolinje skal st, kan endres til center hvis du vil ha den p midten

    }

    #comments .owner .content{ <-------bestemmer hvordan kommentar innholdet skal se ut.

    background-color:#ffffff;

    border: 0px solid #cccccc;

    color: #555555;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;

    }

    #comments .user{ <------ Bestemmer hvordan andres kommentarer skal se ut, de med blogg-url.

    border: 0px dotted #cccccc;

    background-color: #ffffff;

    color: #555555;

    Width: 695px;

    }

    #comments .user .meta{ <-----infolinje

    border-top: 0px solid #cccccc;

    border-bottom: 0px solid #cccccc;

    background-color:#fdeee9;

    color: #555555;

    text-align: auto;

    }

    #comments .user .content{ <-----selve kommentarene

    background-color: #ffffff;

    border: 0px solid #cccccc;

    color: #555555;

    }

    #comments .other{ <------ Bestemmer hvordan andres kommentarer som ikke har blogg ser ut

    border: 0px solid #cccccc;

    background-color: #ffffff;

    color: #555555;

    Width: 695px;

    }

    #comments .other .meta{ <-------infolinje

    border-top: 0px solid #cccccc;

    border-bottom: 0px solid #cccccc;

    background-color:#fdeee9;

    color: #555555;

    text-align: left;

    }

    #comments .other .content{ <------selve kommentarene

    background-color:#ffffff;

    border: 0px solid #cccccc;

    color: #555555;

    }

  • 7

    Stillestende sidemeny

    G inn p design >rediger > stilsett

    Her er koden:

    position: fixed;
    margin: -300px 0px 0px 610px; <----- Her endrer du p posisjonen, hvor sidemenyen skal ligge fra toppen eller siden,sett et annet tall hvis du vil tilpasse.

    Lim inn under #side slik at det ser ut som dette:

    # side {
    position: fixed;
    margin: -300px 0px 0px 610px;

    }

  • 27

    Legge inn bilder i sidemeny

    Koden du skal bruke:

    <img src="BILDEURL" height="200">

    G inn p design >rediger>maler

    Finn denne linjen: <p>${ProfileDescription}</p> i malene og lim inn koden ovenfor rett under denne linjen. Da vil bildene komme rett under profilteksten.


    2. Last opp et eller flere bilder p tinypic.com eller photobucket.com

    3. Lim inn url til bildet der det str BILDEURL

    4. Du kan endre strrelsen hvis du nsker. Det vil si der det str height="200"> kan du endre til ethyere tall for strre bilde.

    Her er det mulig prve seg frem i forhold til hvor du vil ha bildene.

    Det er ogs mulig legge inn url til bildene rett inn der du legger inn widgets. Men for riktig strrelse og slikt er det greit gjre det slik som over.

  • 2

    Menyboks i sidemeny/sidebar

    Steg 1

    G inn p design > rediger > stilsett.

    #meny {

    font-family: arial; <----- Skriftype

    font-size: 7px; <----strrelse p skrift

    text-align: center;

    width: auto;

    height: auto;

    padding: 0 0 0 0;

    background: transparent;

    margin: 0 auto 10px auto;

    }

    #meny a {

    background: #f5f5f5; <-----bakgrunnsfarge p knappene

    color: #555555; <-----farge p skrift p knappene

    text-transform: none;

    font-weight: none;

    padding: 3px 0 3px 0;

    width: 100%;

    margin: 0 0 3px 0;

    display: block;

    }

    #meny a:hover {

    color: #ffffff; <---- Farge p linken nr du frer pekeren over

    background: #eaeaea; <----bakgrunnsfarge

    }

    Steg 2

    1. G inn p design > rediger > Maler

    2. Koden skal limes inn rett under denne linjen i alle malene: <div id="side" class="yui-u">

    Koden du skal bruke:

    <div id="meny">

    <a href="/"> Forsiden</span> </a>

    <a href="#"> Om meg</span> </a>

    <a href="#"> Blogger jeg leser </a>

    <a href="#"> Bilder </a>

    <a href="#"> Videoer </a>

    <a href="#"> Kontakt meg </a>

    </div>

    3. Du kan endre p navnene p knappene ved skrive inn hva du vil ha p knappene

    4. For linke til en side eller et innlegg m du finne url og lime inn der det str #.

  • 1

    Takk for kommentarbilde og egen tekst.

    G inn p design >rediger>maler>innlegg

    Finn denne linjen i maler> innlegg:<label for="comment_remember">Husk meg ?</label>

    Under denne linjen setter du inn denne koden:<div align="center"><img src="URL TIL BILDE" alt="takk for kommentaren!"/></div>

    Deretter m du lime inn url til det bildet du nsker.

    Feks kan du laste opp et bilde p Tinypic.com eller photobucket.com og kopiere opp url derfra.

    Det skal kun gjres p innlegg i malene.

    For f egen tekst over kommentarfeltet finner du koden: <h1>Skriv en ny kommentar</h1>

    lim inn denne koden under den linjen:

    <br>

    <h7>Skriv inn din tekst her.</h7>

    <br>

    <br>

    Slik at det ser ut som under:

    <h1>Skriv en ny kommentar</h1>

    <br>

    <h7>Skriv inn din tekst her</h7>

    <br>

    <br>


  • 2

    Skriftstrrelse og skrifttype p innlegg

    G inn p design > rediger > stilsett.

    For annen strrelse:

    Lim inn kodenfont-size: 8pt; under #body i stilsettet.

    Det skal se slik ut:

    #body {
    background-color: #ffffff;
    font-size: 8pt;
    }

    For endre p skriftstrrelsen m du endre p tallet. Jo hyere tall jo strre skrift.
    For annen skrifttype:
    Her er koden: font-family: arial ,helvetica, sans sherif;
    Slik kan det se ut:
    #body {
    background-color: #ffffff;
    font-family: arial ,helvetica, sans sherif;
    }
    For bytte skrift m du sette inn navnet p en annen font foran de andre. Det kan kan du finne p feks: photoshop eller paint.

  • 37

    Lage eget design? Sjekk ut toutorials her!

    Viktig huske p: Nr du har endret designet manuelt kan du ikke lenger bruke designbygger.

    Hvis du gjr en feil kan du alltids tilbakestille designet til det forrige i designarkivet.

    Det vil stadig komme noen fler koder etterhvert.

    -Kort om stilsettet og hva som er hva.

    Menyer:

    Header:

    Sidemeny:

    Bloggen:

    Profil:

    Tekst:

    Kommentarer:

    Overskrifter:

    Rammer:

    Linkeffekter:

    Bildebakgrunner:

    Ekstra:

    Resten kommer fortlpende. Listen blir stadig oppdatert med nye forklaringer og koder.

  • 2

    Smalere eller bredere blogg. Best for blogg som er i en boks.

    G inn p Design> rediger> stilsett

    Dette er koden: width: 700px; Den skal limes inn under #header, #wrapper og #footer

    Slik det skal se ut:

    #header {

    background-color: #FFFFFF;

    height: 236px;

    margin-left: auto;

    margin-right: auto;

    width: 700px;
    }
    #wrapper {

    background-color: #FFEFFC;

    margin-left: auto;

    margin-right: auto;

    width: 700px;
    }
    #footer {

    background-color: #FFFFFF;

    margin-left: auto;

    margin-right: auto;

    width: 700px;
    }

    Hvis du legger til disse kodene blir bloggen samtidlig midtstilt:

    margin-left: auto;

    margin-right: auto;

    Disse kodene er best om du har sidemeny og innleggene i samme boks. Hvis du har delt sidemeny og skrivefelt se her.

  • 1

    Endre farge p linker

    G inn p design >rediger>stilsett.

    Finn frem disse kodene de ligger oftest nederst.

    Endre p farge koden til eksempel: #555555 som er mrk gr eller en annen farge.

    }

    a { color: #FARGEKODE}
    a:link { color: #FARGEKODE}
    a:visited { color: #FARGEKODE}
    a:active { color: #FARGEKODE}

    Dette gjelder for alle linker.

    Noen fargekoder:

    #000000 -sort

    #f5f5f5 -lysgr

    #ff0000 -rd

    #0024ff -bl

    #de00ff -lilla

    #ff00c0 -knallrosa

    #feb8e1 -lysrosa

    Du kan ogs ta bort # skrive inn fargenavnet p engelsk for gjre det enkelt. Men da blir det ikke s mye nyanser.

  • 1

    Bredere skrivefelt. Best for oppdelt blogg.

    1. G inn p design > rediger > stilsett.

    2. Lim inn denne koden nederst i stilsettet:

    }

    #main{

    background-color: #ffffff;

    width: 500px;

    }

    3. Der det str width kan du endre til et hyere tall.

    Hvis du har sidemeny som faller nederst i bloggen kan du gjre #wrapper bredere med lime inn:

    Width: 1050px;

    Slik som dette:

    }

    #wrapper{

    Width: 1050px;

    }

    Denne koden er best for deg som har delt sidemeny og skrivefelt. Hvis du har hele bloggen i en boks de her

  • 39

    Meny under header med egne knapper

    Her er selve koden:

    <a href="LINK TIL INNLEGGET"> <img src="URL_ADRESSE TIL BILDET" height="STRRELSE"> </a>

    1. FinnBlogDescriptioni malene og lim koden inn under </div> slik som dette:

    BlogDescription

    </div>

    <a href="LINK TIL INNLEGGET"> <img src="URL_ADRESSE TIL BILDET" height="STRRELSE"> </a>

    3. Last opp bildene/knappene p photobucket.com eller tinypic.com

    4. Kopier url til bildet og lim inn der det str "URL-ADRESSEN TIL BILDET"

    5. Finn url til valgt innlegg eller kategori du nsker linke til og lim inn det det str "LINK TIL INNLEGGET".

    Hvordan finne url til kategorier eller innlegg?

    Jo du trykker deg inn p en kategori du har og kopierer hele linjen som str i skefeltet. Samme gjelder for innlegg.

    Her har jeg noen ferdige knapper som jeg har laget for de som ikke gidder lage selv med url:


    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta11.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta12.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta10.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta9.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta8.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta7.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta2-1.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta-1.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta5-1.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta6-1.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta3-1.png

    http://i1123.photobucket.com/albums/l560/Inaanjuta/knappinaanjuta4-1.png

    For f knappene til ligge helt inntil hverandre m du legge alt p en linje. sli at kodene i malerne ikke ligger p hver sin linje.


  • 1

    Agurk er en frukt.

    Greit at tomat er en frukt. Jeg har begynt godta det n.....Men at agurk ogs er en frukt det godtar jeg ikke. Alle sannheter har jo blitt endret. Ikke nok med det, paprika er ogs en frukt! Hva skjer? Hadde nettoppp en diskusjon om dette her og jeg har funnet ut at det enste som er grnnsaker er salaten. og kanskje gulrtter, men da blir plutselig poteter ogs grnnsaker. siden det er en rot.

    S fra n av skal jeg begynne spise agurk p samme mte som en frukt. Det vil si rett som den er, hvis noen spr! det er en frukt ok, det er vanlig spise frukt p denne mten skal jeg si.

    By the way: jordbr er ikke et br det er en BLOMST !

  • 4

    Skille blogg og sidemeny med en strek

    G inn p design > rediger > stilsett.

    Her er koden du skal bruke:
    #side {
    width: 20%;
    }
    #main {
    border-right: 1px solid #000000; <----- Endre 1px til 2 px for tykkere strek eller endre fargekode for annen farge.
    width: 75%;
    }

    Denne limer du inn overa { color: #000000} som ofte ligger nesten nederst i stilsettet.

  • 3

    Delvis gjennomsiktig

    G inn p design > rediger > stilsett

    Lim inn denne koden under der du vil ha det delvis gjennomsiktig:

    filter:alpha(opacity=80);

    -moz-opacity:0.8;

    -khtml-opacity: 0.8;

    opacity: 0.8;

    Du kan endre p graden av gjennonsiktighet ved endre p tallene bak.

    For f gjennomsiktig sidemeny : (hvis du allerede har #side)

    }

    #side {

    filter:alpha(opacity=80);

    -moz-opacity:0.8;

    -khtml-opacity: 0.8;

    opacity: 0.8;

    }

    Eller wrapper som er hele bloggen:

    }

    #wrapper{

    filter:alpha(opacity=80);

    -moz-opacity:0.8;

    -khtml-opacity: 0.8;

    opacity: 0.8;

    }


  • 2

    Endre utseende p skrevne kommentarer

    G inn p design >rediger>stilsett

    lim denne koden inn nederst i stilsettet:

    }

    #comments .owner { <----kommentarene du skriver p din blogg.

    border: 0px solid #555555; <---rammen rundt kommentarene

    background: #FFFFFF; <----Bakgrunnsfarge

    width: 750px; <---- Endre bredde ved sette inn et hyere eller lavere tall

    }

    #comments .user { <----kommentarene andre skriver p din blogg.

    border: 0px solid #555555; <---rammen rundt kommentarene

    background: #FFFFFF; <----Bakgrunnsfarge

    width: 750px; <---- Endre bredde ved sette inn et hyere eller lavere tall

    }

    Vil du ha bakgrunnsbilde p skrevne kommentarer?

  • 0

    Kode for runde hjrner.

    G inn p design > rediger > stilsett

    Med denne koden kan du f runde hjrner der du mtte nske det.

    Dette er koden:

    -moz-border-radius: 7px; <---- Hyere tall jo rundere hjrner

    -webkit-border-radius: 7px;

    -khtml-border-radius: 7px;

    border-radius: 7px;

    Eksempel:

    }

    #header {

    -moz-border-radius: 7px;

    -webkit-border-radius: 7px;

    -khtml-border-radius: 7px;

    border-radius: 7px;

    }

    #wrapper {

    -moz-border-radius: 7px;

    -webkit-border-radius: 7px;

    -khtml-border-radius: 7px;

    border-radius: 7px;

    -Wrapper er selve bloggen.

    koden kan legges under p alt du nsker

    Mulig ikke koden ikke vises i Internett explorer.

  • 0

    Strrelse og skrifttype p overskrifter

    1. G inn p design>rediger>stilsett

    2. Lim inn koden eller kodene under nederst i stilsettet.

    Under har jeg forklart hvordan du kan forandre p ting.

    Koden for innlegg:

    h2 {

    color: #555555; <----farge p skrift

    line-height: 200%;

    letter-spacing: 1px; <---mellomrom mellom bokstaver

    font-family: Arial, Helvetica, sans-serif; <---- skrifttype ,endre ved lime inn navnet p en annen font foran.

    font-size: 15px; <----strrelse p skrift

    }

    I sidemeny:

    }

    h3 {

    color: #555555; <----farge p skrift

    font-size:12pt; <----strrelse p skrift

    font-family: American typewriter, tahoma; <---- skrifttype, endre ved lime inn navnet p en annen font foran.

    letter-spacing:1px; <----mellomrom mellom bokstaver

    line-height:10pt;

    }

    Ramme rundt overskrifter?

    Skygge rundt overskrifter?

  • 0

    Skygge bak overskrifter.

    1.G inn p design>rediger>stilsett.

    2. Lim inn koden eller kodene nederst i stilsettet.

    Overskrifter i innlegg:

    h2 {text-shadow: 1px 1px 3px #555555;}

    Overskrifter i sidemeny:

    h2, h3 {text-shadow: 1px 1px 3px #555555;}.

    Du kan endre p fargekoden ved skrive inn en annen kode etter #. Ats fargen p skyggen.

  • 2

    skjule footer. det som str i bunnen av bloggen.

    G inn p design > rediger > stilsett

    Lim denne koden inn nederst i stilsettet.

    #footer {
    display: none;
    }

  • 2

    Ramme rundt overskrifter

    G inn p design > rediger> stilsett.
    Lim inn en eller begge kodene under nederst i stilsettet.
    For innlegg:
    h2 {
    background-color:#f5f5f5; ------> Bakgrunnsfargen.
    border: 1px solid #f5f5f5; ------> Selve rammen rundt innleggene.
    For sidemeny:
    #000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: normal; line-height: normal;">h3 {
    border: 2px solid #000000;------> Selve rammen rundt innleggene.
    background-color:#f5f5f5; ------> Bakgrunnsfargen.
  • 5

    Endre utseende p overskrifter innlegg eller sidemeny

    G inn p design > rediger > stilsett

    Lim inn koden nederst i stilsettet:

    Koden for overskrifter i innlegg

    h2 {

    cursor:default;

    color: #16CC16; <------ Farge p skrift. endre farge ved sette inn en annen kode etter #.

    font-size: 9pt; <------skriftstrrelse, endre ved sette inn et annet tall.

    font-family: tahoma; <------- skrifttype

    letter-spacing:1px; <------- mellomrom mellom bokstaver, hyere tall gir strre mellomrom

    line-height:13pt;

    text-align: center; <----midtstilt eller venstrestilt. Skriv inn left i stedenfor center hvis du vil ha den til venstre.

    padding: 1px;

    font-weight: bold; <----- tykkelse p skrift.

    text-transform: uppercase;

    border-bottom: 2px solid #16CC16; <----- strek under overskrift, hvis du ikke nsker strek kan du ta bort hele linjen.

    Har skrevet forklaring p hva de ulike tingene betyr ved siden av som du kan endre p.

    Koden for overskrifter i sidemeny.

    h3 {

    cursor:default;

    color: #16CC16; <------ Farge p skrift. endre farge ved sette inn en annen kode etter #.

    font-size: 9pt;<------skriftstrrelse, endre ved sette inn et annet tall.

    font-family: tahoma; <------- skrifttype

    letter-spacing:1px; <------- mellomrom mellom bokstaver, hyere tall gir strre mellomrom

    line-height:13pt;

    text-align: center; <----midtstilt eller venstrestilt. Skriv innlefti stedenfor center hvis du vil ha den til venstre.

    padding: 1px;

    font-weight: bold; <----- tykkelse p skrift.

    text-transform: uppercase;

    border-bottom: 2px solid #16CC16;<----- strek under overskrift, hvis du ikke nsker strek kan du ta bort hele linjen.

    Ramme rundt overskrifter?

  • 1

    strek under overskrifter.

    1.G inn p design>rediger>stilsett.

    2.Lim koden eller kodene inn nederst i stilsettet.

    For strek under overskift i innlegg:

    h2 { border-bottom: 1px solid #000000}

    

    For strek under overskrifter i sidemeny:

    h3 { border-bottom: 1px solid #000000}

    Hvis du nsker f.eks en gr stek kan du endre fargekoden til #cccccc.
    

    Endre mer av utseendet p overskrifter?

  • 1

    skygger p bloggen

    G inn p design > rediger > stilsett.
    Her er koden:
    -webkit-box-shadow: 0px 0px 20px #5c5c5c;
    -moz-box-shadow: 0px 0px 20px #5c5c5c;
    box-shadow: 0px 0px 20px #5c5c5c;

    Den kan limes inn der du vil.
    For f skygge rundt selve bloggen legger du den inn under #wrapper som vist under:

    }

    #wrapper {

    -webkit-box-shadow: 0px 0px 20px #5c5c5c;
    -moz-box-shadow: 0px 0px 20px #5c5c5c;
    box-shadow: 0px 0px 20px #5c5c5c;
    -moz-border-radius: 15px;
    For f skygge rundt sidemeny limer du inn koden under #side som vist under , eller lime inn hele koden om du ikke har #side.

    }

    #side {

    -webkit-box-shadow: 0px 0px 20px #5c5c5c;
    -moz-box-shadow: 0px 0px 20px #5c5c5c;
    box-shadow: 0px 0px 20px #5c5c5c;
    -moz-border-radius: 15px;}
    For f skygge rundt header limer du den inn under #header som vist under.
    }

    #header {

    -webkit-box-shadow: 0px 0px 20px #5c5c5c;
    -moz-box-shadow: 0px 0px 20px #5c5c5c;
    box-shadow: 0px 0px 20px #5c5c5c;
    -moz-border-radius: 15px;}

  • 0

    Bildebakgrunner der du nsker.

    G inn p design >rediger>stilsett.

    Her er koden:

    background: url(http://i1123.photobucket.com/albums/l560/Inaanjuta/fe2.png) no-repeat right bottom;

    1. For lime inn et nytt bilde tar du bort alt innenfor de to parentesene og limer inn url til bilde.

    2. For finne url til bilde kan du laste opp et bilde p tinypic.com eller photobucket.com

    Koden kan limes inn forskellige steder som jeg forklarer under.

    Bildebakgrunn p skrevne kommentarer

    Lim inn hele denne koden nederst i stilsettet om du ikke allerede har instillinger for kommentarer. Hvis du har disse allerede legger du bare inn selve koden rett under overskriftene.

    }

    #comments .owner {

    background: url(http://i1123.photobucket.com/albums/l560/Inaanjuta/fe2.png) no-repeat right bottom;

    border: 0px solid #555555;

    width: 750px;

    }

    #comments .user {

    background: url(http://i1123.photobucket.com/albums/l560/Inaanjuta/fe2.png) no-repeat right bottom;

    border: 0px solid #555555;

    width: 750px;

    }

    Bildebakgrunn i kommentarfelt

    }

    #newcomment textarea{

    background: url(http://i1123.photobucket.com/albums/l560/Inaanjuta/fe2.png) no-repeat right bottom;

    }

    Bildebakgrunn p infolinje

    Lim inn denne koden nederst i stilsettet

    }

    .entry .meta {

    background: url(http://i1123.photobucket.com/albums/l560/Inaanjuta/fe2.png) ;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 7pt;

    padding: 0px;

    }


    Bildebakgrunn p sidemeny:

    Lim inn hele koden under dersom du ikke allerede har side i stilsettet. Hvis du har #side limer du bare inn selve koden inn under overskriften som vist under.

    }

    #side {

    background: url(http://i1123.photobucket.com/albums/l560/Inaanjuta/fe2.png) no-repeat right bottom;

    border: 1 px solid #555555;

    }
    Bildebakgrunn for innlegg:
    Lim hele koden inn i stilsettet. Hvis du allerede har main limer du bare inn setningene under overskriften og limer inn.

    }

    #main {

    background: url(http://i1123.photobucket.com/albums/l560/Inaanjuta/fe2.png) no-repeat right bottom;

    border: 1px solid #transparent;

    }

  • 7

    Endre utseende p kommentarfelt.

    G inn p design > rediger > stilsett.

    Lim inn hele koden under nederst i stilsettet.

    P sidene str en beskrivelse av hvordan du endrer p farger osv.

    }

    input{ <---- her bestemmer du hvordan der folk skriver navn og bloggadresse skal se ut.

    background-color: #f5f5f5; <----- Bakgrunnsfarge , skriv inn et annet tall eller bokstaver bak #.

    border: 0px solid black; <------ Ramme rundt boksen

    font-family: verdana; <------ Skrifttype

    color: black; <------ Farge p skrift

    font-weight: ; <------- Tykkelse p skrift

    font-size: 10px; <------ Strrelse p skrift

    }

    textarea{ <---- her bestemmer du hvordan tekstboksen skal se ut.

    background-color: #f5f5f5; <----- Bakgrunnsfarge , skriv inn et annet tall eller bokstaver bak #.

    border: 0px solid black; <------ Ramme rundt boksen

    font-family: verdana; <------ Skrifttype

    color: black; <------ Farge p skrift

    font-weight: <------- Tykkelse p skrift

    font-size: 10px; <------ Strrelse p skrift

    }

    Legge inn bakgrunnsbilde?

  • 0

    Bredere eller smalere der du kommenterer.

    1.G inn p design>rediger>maler>innlegg

    Dette er koden:

    style="width:400px;"

    2.Den skal limes inn i maler for innlegg rett foran ordet:onchange=

    Du kan endre p bredden for navn ,epost , url og der man skriver inn kommentar.

    Under viser jeg hvordan det ser ut for de fire ulike tingene.

    For endre bredde m du skrive inn et annet tall bakwidth.

    Bredden der du skriver inn e-post:

    <label for="comment_authoremail">E-post:</label>

    <input id="comment_authoremail" type="text" name="authoremail"style="width:400px;"onchange="doChange(this)" value="" maxlength="100" />

    Bredden der du skriver inn navn:

    <label for="comment_author">Navn:</label>

    <input id="comment_author" type="text" name="author"style="width:400px;"onchange="doChange(this)" value="" maxlength="100" />

    Bredden der du skriver inn url:

    <label for="comment_authorurl">URL:</label>

    <input id="comment_authorurl" type="text" name="authorurl" style="width:695px;"onchange="doChange(this)" value="http://" maxlength="100" />

    Bredden der du skal skrive inn kommentarene:

    <label for="comment_text">Din kommentar:</label>

    <textarea id="comment_text" name="comment" style="width:695px;"onchange="doChange(this);" cols="40" rows="10"></textarea>

    Endre fargen i kommentarfelt? kommer snart

  • 5

    To sidemenyer

    Steg 1

    1. G inn p Design >rediger >maler

    Dette er koden som skal inn i malerne:

    <div id="side1"> Her skal innholdet i den andre sidemenyen vre </div>

    2. Lim den inn rett over denne linjen:<div id="main" class="yui-u first">

    3. Husk lagre.

    Steg 2.

    4. G inn p design > rediger > stilsett

    5. Lim inn hele koden som str under nederst i stilsettet.

    #side1 {

    width: 190px;
    background: #transparent;
    padding: 5px;
    float: left;
    padding: 5px;
    }
    #side {
    width: 180px;
    background: #ffffff;
    float: right;
    padding: 5px;
    }
    #main {
    width: 600px;
    background: #ffffff;
    padding: 5px;
    float: left;
    }
    #wrapper{
    background-color: #transparent;
    width: 1028px;

    }

    Hvis du allerede har #wrapper som de fleste har limer du kun inn denne koden under:

    background-color: #transparent;
    width: 1028px;

    Hvis du allerede har #side limer du inn denne koden under:

    width: 180px;
    background: #ffffff;
    float: right;

    Hvis du allerede har #main limer du inn koden under:

    width: 600px;
    background: #ffffff;
    float: left;

    Til slutt m du lime inn denne koden nederst i stilsettet:

    #side1 {

    width: 190px;
    background: #transparent;
    padding: 5px;
    float: left;
    padding: 5px;

    }

    Eksempel p hva du kan legge inn i den andre sidemenyen:

    Du kan skrive tekst rett inn.

    Legge inn bilder

    Eller legge inn ting fra den vanlige sidemenyen i den nye sidemenyen eksempel s kan du Lime inn profilen.

    eksempel:

    <a href="${ProfileUrl}" title="${ProfileName}">

    <img style="float: center; border: 0;" src="http://i1123.photobucket.com/albums/l560/Inaanjuta/fe.jpg" height="110">

    <br>

    <br>

    <h7>${BlogTitle}</h7>

    <h3>

    <a href="${ProfileUrl}"></a>

    </h3>

    <p>${ProfileDescription}</p>

    1. Klipp ut denne koden fra malene og lim inn i den nye sidemenyen. Det ser nok ikke helt likt ut hos meg men s lenge det er innenfor den verste og nederste koden.

    Spr hvis noe er uklart!

  • 12

    Dropdown meny

    steg 1.

    1. G inn p design > rediger > stilsett.

    2. Lim inn hele koden som er under helt nederst i stilsettet.

    3. Husk lagre til slutt.

    Stilsett:

    #navbar {

    padding: 5px;

    height: 1em;

    width: auto;

    margin: 0px;

    text-align: center;

    }

    #navbar li {

    float: left;

    list-style: none;

    width: 150px;

    background-color: #fff;

    }

    #navbar li a {

    padding: 5px;

    display: block;

    border-bottom: 0px dashed #F7D7EE;

    color: #000000;

    text-decoration: none;

    font-family: arial;

    font-size: 10px;

    line-height: 12px;

    }

    #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 #ffc0c0;

    color: #727272;

    }

    #navbar li li a:hover {

    background-color: #ffc0c0;

    }

    #meny {

    width: 610px;

    margin-left: auto;

    margin-right: auto;

    }

    ps. Hvis du nsker flere knapper og de faller under hverandre kan du endre width:610px; som str under#meny til et hyere tall.

    Steg 2.

    3. G inn p design > rediger > maler.

    4. Koden skal limes inn enten:

    Over header:

    Rett over denne linjen i maler: <div id="header">

    Under header:

    Rett over denne linjen i maler: <div id="wrapper" class="yui-gc">

    Her er koden for dropdown med kategorier , siste innlegg og arkiv:

    <div id="meny">

    <ul id="navbar">

    <li><a href="#">Siste innlegg</a>

    <ul>

    <tag:recentlist limit="10">

    <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>

    </tag:recentlist>

    </ul>

    </li>

    <li><a href="#">Kategorier</a>

    <ul>

    <tag:categorylist>

    <li><a href="${CategoryLink}">&raquo; ${CategoryName}</a></li>

    </tag:categorylist>

    </ul>

    </li>

    <li><a href="#">Arkiv</a>

    <ul>

    <tag:archivelist limit="10">

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

    </tag:archivelist>

    </ul>

    </li>

    <li><a href="#">Overskrift</a>

    <ul>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    </ul>

    </li>

    </ul>

    </div>

    Drop down meny med eget innhold?

  • 6

    Dropdown meny med eget innhold

    steg 1.

    1. G inn p design > rediger > stilsett.

    2. Lim inn hele koden som er under helt nederst i stilsettet.

    3. Husk lagre til slutt.

    Stilsett:

    #navbar {

    padding: 5px;

    height: 1em;

    width: auto;

    margin: 0px;

    text-align: center;

    }

    #navbar li {

    float: left;

    list-style: none;

    width: 150px;

    background-color: #fff;

    }

    #navbar li a {

    padding: 5px;

    display: block;

    border-bottom: 0px dashed #cccccc;

    color: #000000;

    text-decoration: none;

    font-family: arial;

    font-size: 10px;

    line-height: 12px;

    }

    #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 #ffc0c0;

    color: #727272;

    }

    #navbar li li a:hover {

    background-color: #ffc0c0;

    }

    #meny {

    width: 610px;

    margin-left: auto;

    margin-right: auto;

    }

    Steg 2.

    3. G inn p design > rediger > maler.

    4. Koden skal limes inn enten:

    Over header:

    Rett over denne linjen i maler:<div id="header">

    Under header:

    Rett over denne linjen i maler:<div id="wrapper" class="yui-gc">

    Her er koden:

    <div id="meny">

    <ul id="navbar">

    <li><a href="#">Overskrift</a>

    <ul>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    </ul>

    </li>

    <li><a href="#">Overskrift</a>

    <ul>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    </ul>

    </li>

    <li><a href="#">Overskrift</a>

    <ul>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    </ul>

    </li>

    </div>

    1. Der det str Overskrift kan du bestemme hva som skal st p knappen

    2. Der det str Link kan du bestemme hvilken side du vil linke til. Lim inn url til feks. et innlegg.

    Hvis du nsker flere knapper under hver kopierer du bare opp denne linjen og limer inn som p eksemplet:

    <li><a href="#">Link</a></li>

    Eksempel:

    <li><a href="#">Overskrift</a>

    <ul>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    </ul>

    </li>

  • 1

    Ikoner ved siden av linker

    Eksempel Ikoner til ha i sidemenyen foran alle linkene eller s kan det settes foran kommentarnavnene.

    Her skal jeg fortelle hvordan du legger ikoner foran disse to:

    Her er selve koden:

    <img src="Urltil ikon" width="20" />

    1.Lim inn koden der du nsker.

    2.Lim url inn der det str "url ti ikon" ( Ikoner finner du en link til neders p siden.)

    Hvor det skal legges inn:

    I sidemeny:

    Foran kategorier:


    (Trykk p bildet for se strre)

    Foran siste innlegg:


    (Trykk p bildet for se strre)

    Foran Lenker:

    (Trykk p bildet for se strre)

    Foran navnet til den som kommenterer:


    (Trykk p bildet for se strre)

    Ikoner finner du her.

  • 1

    Ikoner til blogg

    Her har jeg lagt ut noen direkte linker til ikoner som kan brukes ved siden av F.eks linker i sidemeny eller foran kommentarer.

    Firkanten rundt ikonet synes ikke p linkene.

    Url til ikoner:

    http://i1123.photobucket.com/albums/l560/Inaanjuta/RubyHeart-1.gif

    http://i1123.photobucket.com/albums/l560/Inaanjuta/Ixia.gif

    http://i1123.photobucket.com/albums/l560/Inaanjuta/Sunflower.gif

    http://i1123.photobucket.com/albums/l560/Inaanjuta/RubyRound.gif

    http://i1123.photobucket.com/albums/l560/Inaanjuta/Strawberry.gif

    http://i1123.photobucket.com/albums/l560/Inaanjuta/Doggie.gif

    http://i1123.photobucket.com/albums/l560/Inaanjuta/DiamondHeart.gif

    http://i1123.photobucket.com/albums/l560/Inaanjuta/RedDog.gif

  • Ina Anjuta
    inaanjutablogg@hotmail.no

    N har du akuratt forvillet deg inn p min "nettside"/blogg. Denne siden fungerer som er slags online portfolio av mange av mine arbeider innenfor kunst og design. Jeg et utdannet Mac-operatr, jobber som grafisk designer og denne bloggen handler mye om utvikle disse ferdighetene enda mer, og legge ut arbeider og prveskisser fra skole og privat. Jeg elsker designe og skape ting, og har laget en rekke bloggdesign til blogg.no. Mange av disse er gratis design som du kan finne verst i menyen.
    Bortsett fra dette s er bloggen min ogs et sted hvor jeg fr uttrykt min overflatiskhet ved legge ut bilder av te-kopper, sminke, innkjp og andre rosa ting i hverdagen, med en unnskyldning om at jeg lrer meg ta bilder med min canon 550D.

    Instagram

    Kategorier

    Arkiv

    Siste innlegg

    bilde



    hits

    Tilkomstgruppen