Ina Anjuta - Kunst og design
Hjem Gratis bloggdesign Portfolio malerier Følg 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 størrelse på teksten i sidemeny

    Gå inn på design>rediger>stilsett

     

    Lim disse kodene inn under #side i stilsettet:

     

    Kode for skriftstørrelse: 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 mørk 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 kåret den som skal være 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å foregår alt på nett) 

     

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

     

    Hver uke kommer jeg til å kåre 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"  

    Følte liksom at bildet passet så godt inn.........

     

     

     

  • 13

    PÅMELDING 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 være 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 står det hvordan du kan legge inn.

     

    Om designet

    Profilteksten skrives inn på vanlig måte.

    På dette designet bytter du header i maler

    Samme med profilbilde

    Hvis du ikke får 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 større)

    Slik som på bildet ser det ut. Du skal bytte ut det som står markert i blått med url til den headeren du ønsker

    Samme må gjøres i alle fire malerne.

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

    Header skal være 792x284. Men inne på malerne kan du endre på størrelsen hvis det ikke skulle passe helt perfekt.

     

    Bytte profilbilde:

    Gå inn på design>rediger>maler


    (trykk på bildet for å se større)

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

    Gjør det samme i alle fire malerne

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

    Størrelsen på profilbildet kan endres rett ved der profilbildeurl står.

     

    Linker i sidebar ( til" blogger jeg leser")

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

    2. Der det er markert i blått 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 står innenfor gul markering på bildet  under, og legger det rett under.

     

    • Tips for å finne frem til de ulike tingene uten å søke 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 står der. Det skal være 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å spør! :)

      

  • 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.gifwidth="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.gifwidth="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.gifwidth="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.gifwidth="10" />

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

    <br>

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

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

    <br>

    <img src="http://img831.imageshack.us/img831/829/diamondheart.gifwidth="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.gifwidth="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 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>

     

     

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

  • 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

    Stillestående 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 sånn 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 står 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. gjør det samme i alle fire malene.

    Hvis du lurer på akuratt hvor linklisten bør legges er det bare å spørre, men vanskelig å vite hvor den ønskes. Så det er bare å prøve seg frem og forhåndsvise 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 står URL TIL BILDE

     

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

     

    6. For å endre størrelse 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 størrelsen slik at det blir riktig
    Det kan hende det vil være fint om du endrer bredden på sidemenyen også da endrer du på   width: 200px;   til et lavere eller høyere tall under #side.

  • 0

    Luft/mellomrom rundt teksten

    Gå inn på design > rediger > stilsett

     

    Sånn at ikke tekstene står klint inntil sidene er denne koden fin , den skal limes inn under #entry i stilsettet:

    padding: 5px;

     

    Jo høyere tall jo størremellomrom.

     

    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 står 0px.

    width: 200px;    <----Endre bredden ved å legge inn et høyere 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> være 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 sånn ut:

     

     

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

    <tag:profile> 

    <h7>${BlogTitle}</h7> 

     

     

    Gjør det samme i alle fire malene.

    Du kan også endre på skriftstørrelse ved å endre tallet <h7> til eks: <h5>

  • 45

    større 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 står URL-ADRESSEN TIL DITT BILDE. Ikke fjern mer eller mindre.

    4. Endre størrelsen der det står height="170" til et høyere 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å høyden 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 står med stor skrift.   ikke ta bort de to ( '  ' )

    6. For å tilpasse størrelsen kan du endre på bredde eller høyde 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å være #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å større eller mindre mellomrom endrer du på tallet der det står 10px; til et høyere eller lavere

     

                                                                                             Metode 2

    Gå inn på design> rediger>Maler.

     

    Finn denne linjen i 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 står <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 høyere tall får du større mellomrom.

     

     

    Metode 2:   Lim inn <br>  under der det står <head> i malene.

    Gjør det samme på alle fire malene. Det står head to steder , du skal lime inn under den nederste.

     

  • 1

    Effekter når 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 når 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 når du tar musepeker over link

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

    Strek under når 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 #wrapperborder: 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 større endringer på kommentarfelt.

     

    Har skrevet forklaringer på hva de forskjellige betyr nedover. Det gjør 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,høyre 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

    Stillestående 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 står BILDEURL  

    4. Du kan endre størrelsen hvis du ønsker. Det vil si der det står  height="200"> kan du endre til et høyere tall for større bilde. 

     

    Her er det mulig å prøve 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 størrelse og slikt er det greit å gjøre 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;    <----størrelse 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 når du fører 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 står #.     

  • 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 gjøres 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

    Skriftstørrelse og skrifttype på innlegg

     Gå inn på design > rediger > stilsett.

     

    For annen størrelse:

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

    Det skal se slik ut:

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

    For å endre på skriftstørrelsen må du endre på tallet. Jo høyere tall jo større 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å: Når du har endret designet manuelt kan du ikke lenger bruke designbygger. 

    Hvis du gjør 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: 

    • Meny med egne knapper.                                                                                                                                                             
    • Dropdown meny  (rullegardin)                                                                                                                                                     
    • Dropdownmeny (rullegardin) med egne knapper                                                                                                                    
    • Knapper i sidemeny. (som en boks)                                                                                                                                          
    • To sidemenyer 

     Header:

    Sidemeny:

    • Flytte sidemeny høyere opp, ved siden av header                                                                                                                 
    • Gjøre sidemeny bredere eller smalere                                                                                                                                      
    • Legge inn bilder i sidemeny                                                                                                                                                          
    • Venstrestille sidemeny                                                                                                                                                                    
    • Egen tekst i sidemeny                                                                                                                                                                     
    • Skille blogg og sidemeny med strek                                                                                                                                           
    • Skille blogg og sidemeny med mellomrom                                                                                                                               
    • Stillestående sidemeny                                                                                                                                                                   
    • Link liste i sidemeny
    • Sidemeny delt opp i bokser

     Bloggen:

     Profil:

     Tekst:

     Kommentarer:

    Overskrifter:

    Rammer:

     Linkeffekter:

    Bildebakgrunner:

     Ekstra:

     

     

     Resten kommer fortløpende. 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 mørk 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   -rød

    #0024ff    -blå

    #de00ff     -lilla

    #ff00c0   -knallrosa

    #feb8e1   -lysrosa

     

    Du kan også ta bort # å skrive inn fargenavnet på engelsk for å gjøre 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 står width kan du endre til et høyere tall. 

     

    Hvis du har sidemeny som faller nederst i bloggen kan du gjøre #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="STØRRELSE"> </a>

     

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

    BlogDescription

    </div>

    <a href="LINK TIL INNLEGGET"> <img src="URL_ADRESSE TIL BILDET" height="STØRRELSE"> </a>

     

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

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

    5. Finn url til valgt innlegg eller kategori du ønsker å linke til og lim inn det det står "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 står i søkefeltet. 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 grønnsaker er salaten. og kanskje gulrøtter, men da blir plutselig poteter også grønnsaker. siden det er en rot. 

    Så fra nå av skal jeg begynne å spise agurk på samme måte som en frukt. Det vil si rett som den er, hvis noen spør! det er en frukt ok, det er vanlig å spise frukt på denne måten skal jeg si. 

     

    By the way: jordbær er ikke et bær 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 over a { 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 høyere 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 høyere eller lavere tall

    }

     

     

     

    Vil du ha bakgrunnsbilde på skrevne kommentarer?

  • 0

    Kode for runde hjørner.

    Gå inn på design > rediger > stilsett

     

    Med denne koden kan du få runde hjørner der du måtte ønske det.

     

    Dette er koden:

    -moz-border-radius: 7px;        <---- Høyere tall jo rundere hjørner

    -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

    Størrelse 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;    <----størrelse på skrift

    }

    I sidemeny:

     }

    h3 {

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

    font-size:12pt;  <----størrelse 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 står 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; <------ skriftstørrelse, endre ved å sette inn et annet tall.

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

    letter-spacing:1px;    <------- mellomrom mellom bokstaver, høyere tall gir større 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; <------ skriftstørrelse, endre ved å sette inn et annet tall.

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

    letter-spacing:1px;    <------- mellomrom mellom bokstaver, høyere tall gir større 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.

      

     

    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 står 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;    <------ Størrelse 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;    <------ Størrelse 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 bak width.

     

    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 være </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 står 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.

     

    Spør 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 står under #meny til et høyere 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 står Overskrift kan du bestemme hva som skal stå på knappen

    2. Der det står 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="Url til ikon" width="20" />

     

    1.Lim inn koden der du ønsker.

    2.Lim url inn der det står "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 større)

     

    Foran siste innlegg:


    (Trykk på bildet for å se større)

     

    Foran Lenker:

     

    (Trykk på bildet for å se større) 

     

     

    Foran navnet til den som kommenterer:


    (Trykk på bildet for å se større) 

     

     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-operatør, jobber som grafisk designer og denne bloggen handler mye om å utvikle disse ferdighetene enda mer, og å legge ut arbeider og prøveskisser 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 får uttrykt min overflatiskhet ved å legge ut bilder av te-kopper, sminke, innkjøp og andre rosa ting i hverdagen, med en unnskyldning om at jeg lærer meg å ta bilder med min canon 550D.

    Instagram

    Kategorier

    Arkiv

    Siste innlegg

    bilde



    hits

    Tilkomstgruppen