Ny Gullfisk og Slørhale

    27.11.2010 - 20:03

Vi gikk til Kvadraturen Zoo for å se på akvariefisker, og der hadde de veldig lite. Vi gikk heller til DYREHAVEN i Kirkegaten 17 for å kjøpe to nye venner til Perle (Slørhalen min). Vi kjøpte en Gullfisk og en Slørhale (59,-) pr.stk.

Nå blir Perle glad! Nå er de 3 stykk og kan bli venner!

Vi måtte hjem etter at vi hadde kjøpt de nye fiskene, og det var kaldt, så vi tok bussen hjem. Nå har bussene skiftet fra gul til blå. Da vi kom hjem, slapp vi de to nye fiskene ned i akvariumet til Perle (som var alene). Vi kalte de nye for Gull (Gullfisk) og Slør (Slørhale). Perle var litt redd første gang, men så ble hun veldig lykkelig for å få to nye venner.

Nå har vi ...  
- To Slørhaler (Perle og Slør)
- En Gullfisk (Gull)
i et 28 liters akvarium.

Bloggdesignkoder hjelperen

    15.11.2010 - 22:07

SKRIVE INNLEGG:
♥ Bilde ved siden av teksten HER
♥ Legge inn Youtube videoer til bloggen HER
♥ Legge inn koder i en boks HER

EFFEKTER:
♥ Dalende snø på bloggen HER (NY)
♥ Forandre linker når man tar musen over HER
♥ Hvordan få bloggen/bildet gjennomsiktig? HER
♥ Mellomrom mellom bokstavene når du legger musepilen over HER 
♥ Usynlig ingen høyreklikk HER
♥ Ulike teksteffekter HER
♥ Image fade effect HER
♥ Text fade effect HER

MENY:
♥ Drop-Down meny HER
♥ Enkel knappemeny HER
♥ Meny under header HER
♥ Hvordan linker jeg til et eller flere innlegg på bloggen min, til en av menyknappene? HER

HEADER:
♥ Få bort linken (blogg.no) under headeren din HER
♥ Få bort navnet over headeren HER
♥ Hvordan få headeren (bilde) på plass der oppe HER

RAMMER:
♥ Rammer du kan velge mellom HER
♥ Ramme rundt bloggen HER
♥ Ramme rundt hvert innlegg HER

OVERSIKT:
♥ Anbefale blogginnlegg "relevante innlegg" HER (NY)
♥ Hvor mange leser bloggen din akkurat nå? HER
♥ Ingen høyreklikk (kopiering) HER
♥ Søkerute på din blogg HER

ENDRE/FJERNE/FLYTTE:
♥ Alle bilder blir til lik breddestørrelse HER - passer bra for bloggen din.
♥ Dele opp blogg.no reklamen øverst på bloggen HER (NY)
♥ Endre antall poster som vises på forsiden HER
♥ Endre bakgrunn for overskrifter HER
♥ Endre farge på når du kommenterer innlegget HER
♥ Endre farge på teksten i overskrift HER
♥ Endre "Send kommentar" HER
♥ Endre "X ANTALL KOMMENTARER" HER
♥ Flytte sidemenyen opp til headeren HER
♥ Fjerne "siste kommentarer", "arkiv" ... HER
♥ Gjennomsiktig blogg HER

BLOGG-ANNET:
♥ Skifte/lage spesielt ikon på bloggen HER (NY)
♥ Scroll til toppen - knapp HER (NY)
♥ Bakgrunnsbilde som "står fast" HER
♥ Farge bak overskrift HER
♥ Menyen fra høyre til venstre HER
♥ Mellomrom mellom header og innhold HER
♥ Midtstille overskriften HER
♥ Mindre/større skrift på innleggene dine HER
♥ Smal og midtstille bloggen HER
♥ Større profilbilde HER
♥ Vis hele innlegg i kategori og arkiv HER

♥ Lage bilder i PNG (transparent) i Pixlr HER
♥ Skygge bak overskrift HER
♥ Tekst/bilde som står fast ved siden av bloggen HER

NYTTIGE SIDER:

♥ Forkort lange linker til korte HER
♥ Nedtelling til ... HER
♥ Instagram bilder til bloggen HER
♥ aBowban HER 
♥ HTML - koder til blogg HER
♥ Google Fonts HER (skrifttyper)

DESIGN:
♥ Gratisdesign HER
♥ Jeg lager headere på bestilling HER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Er det noe dere lurer på, så er det bare å spørre!

Midtstille overskriften

    15.11.2010 - 21:06

Trykk på "Design" - "Rediger" - "Maler".

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

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

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

Da skal det se sånn ut:
<div align="center">
<h2>
<a href="${EntryPermaLink}">${EntryTitle}</a>
</h2>
</div>

Hvordan linker jeg til et eller flere innlegg på bloggen min, til en av menyknappene?

    15.11.2010 - 21:04

Url-adressen finner du ved å gå inn på din blogg (OBS: som besøkende!!!) og klikke deg dit du vil linke knappen til. Da ser du url-adressen i søkelinja. La oss si at du vil ha en knapp som står "Konkurranser" på, der ALLE konkurransene du har, ligger inne på. Altså FLERE INNLEGG PÅ KNAPPEN. Da MÅ du ha en KATEGORI som heter Konkurranser. Når du har laget kategorien, går du på framsiden av bloggen din og trykker på kategorien "konkurranser". Når siden er ferdig opplastet der, kan du trygt og godt kopiere URL-linken oppe i søkefeltet, og lime den inn i koden. På denne måten får du da alle innleggene du lager i kategorien "konkurranser", inn på menyknappen. Hvis du BARE vil ha 1 INNLEGG PÅ KNAPPEN, går du rett inn på innlegget og kopierer linken til bare innlegget, og legger inn i koden.

Når det er gjort er det bare å lagre. Så må du sette inn alt dette i alle malene. "Forsiden" er den du har satt det inn i nå, men du må gjøre det i Innlegg, Kategori og Arkiv også. Du kommer inn på disse malene ved å gå til "Maler" og velge rett over koderuten. Da er det bare å lagre alt.

Drop-Down meny

    15.11.2010 - 21:02

En nokså vanskelig kode, det kan hende at du må finne ut av enkelte ting selv!

}
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 5px 10px;
background-color: #transparent;
color: #123456; /*Endre fargen på teksten her*/
text-decoration: bold;
font-family: Lucida Handwriting; /*Endre skrifttypen her*/
font-size: 15px; } /*Endre størrelsen på skriften her*/
#navbar li ul {
display: none;
width: 8,5em; /* Endre bredden på undermenyen her */
background-color: #FFFFFF;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 1;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #F9BAAA; /*Endre fargen på undermenyen*/
border-bottom: 1px solid #F9BAAA;
color: #000000; } /*Endre tekstfargen på undermenyen her*/
#navbar li li a:hover {
background-color: #; } /*Endre fargen når man holder musen over undermenyen*/
#navbar li{ float: left; }
#navbar{
margin-left: 0px;
}
#navbar {
padding: 5px;
height: 2em;
width: left;
margin: 0px;
text-align: left;
}
#navbar li {
float: left;
list-style: none;
width: 157px;
background-color: #FFFFFF;
}
#navbar li a {
padding: 5px;
display: block;
border-bottom: 2px solid #C4E0FF;
color: #000000;
text-decoration: none;
font-family: arial;
font-size: 15px;
line-height: 15px;
}
#navbar li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
text-align: left;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
border-bottom: 1px dotted #D1D1C6;
color: #727272;
}
#navbar li li a:hover {
background-color: #D1D1C6;
}
#meny {
width: 950px;
margin-left: auto;
margin-right: auto;
}

(fargen og alt sånt har jeg funnet på selv)
Legg inn på: Stilsett/CSS
Også lagrer du. Ingenting vil skje. 


Etterpå går du til Maler/HTML og limer inn denne koden:

<ul id="navbar">
  <li><a href="link til sida">Kategori 1</a>
    <ul>
      <li><a href="#">Länk 1</a></li>
      <li><a href="#">Länk 2</a></li>
      <li><a href="#">Länk 3</a></li>
    </ul>
</li>
<li><a href="#">Kategori 2</a>
   <ul>
      <li><a href="#">Länk 4</a></li>
   </ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
   <ul>
      <li><a href="#">Länk 6</a></li>
      <li><a href="#">Länk 7</a></li>
      <li><a href="#">Länk 8</a></li>
      <li><a href="#">Länk 9</a></li>
   </ul>   
</li>
</ul>

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

For å endre på størrelse, farger og slikt, må du gå til koden i Stilsettet og endre på den.

Meny under header

    15.11.2010 - 21:00

Framgangsmåte:

1. Gå inn på Avansert design > Forsiden. Gå ned til der div-tagen til headeren slutter (</div>)  og lim inn denne koden:

<div id="menyboks" class="meny">
<ul>
 <li><a href="http://www.dinblogg.no">&nbsp;Forsiden</a></li>
 <li><a href="http://www.dinblogg.no">Om meg</a></li>
 <li><a href="http://www.dinblogg.no">Videoer</a></li>
 <li><a href="http://www.dinblogg.no">Kontakt</a></li>
 <li><a href="http://www.dinblogg.no">Hvorfor Meg</a></li>
 <li><a href="http://www.dinblogg.no">Outfits</a></li>
</ul>
</div>

(PS! Bytt ut "http://www.dinblogg.no/" med lenkene til dine sider).

Gjør dette med innlegg, kategorier og arkiv hvis du vil ha det i alle sider på bloggen.

2. Lim inn koden nedenfor øverst eller nederst i stilsettet ditt.

#menyboks{
height="40px";
background:#ffe3e9;
background-color: #FFBEF0;
width: 951px
}
.meny ul{
list-style-type:none;
}
.meny li{
display:inline;
}
.meny a{
float:left;
width:100px;
text-decoration:none;
background-color: #FFBEF0;
font-weight:bold;
font-size=14px;
padding:10px;
border-right:2px solid #000000;
font-family:"Verdana";
}
.meny a:hover{
background:#FFBEF0;

Fargene color kan endres, font-family (skrifttype) og annet kan endres som eget behov.

Oppdatert 02.05.2015

Hvordan vise hele innlegg på kategori og arkiv?

    15.11.2010 - 20:58

Du må gå inn på "design" - "Rediger" - "maler" og søke opp denne linja; CTRL+F:

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

Fjern maxchars="200", men husk at > fortsatt må være der. Gjør dette på kategori, innlegg og arkiv malene hvis du vil ha hele innlegg der.

Enkel knappemeny

    15.11.2010 - 20:52

Først må du gå inn på "design". Trykk på "rediger" og så "stilsett". Helt nederst i stilsettet ditt setter du inn denne koden:

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

Nå må du lagre stilsettet (selv om det ikke vises noe på forhåndsvisningen, ikke vær redd). For at disse skal vises må du nå gå inn i "maler". Finn så denne linja:

Trykk CTRL+F, og søk på denne linjen.

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

 

Rett under den linja setter du inn denne koden:

<div class="mattblacktabs">
<ul>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
</ul>
</div>

Så må du redigere litt i koden. La oss si at du vil ha en "knapp" som heter f.eks FORSIDEN og som linker til fremsiden din. Da må du skrive inn url-adressen til fremsiden din, der jeg har skrevet URL-ADRESSE, og skrive "FORSIDEN" der det står "Valgfritt". for eksempel slik:

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

GÅ inn som besøkende på din egen blogg og kopier søkelinjen til det innlegget du vil ha og lim det inn der det står URL-ADRESSE.

Endre "Send kommentar"

    15.11.2010 - 20:49

Gå til Design -> Rediger -> Maler -> Innlegg

Bla ned til du finner "Send kommentar" og bytt ut med det du vil skal stå der.

Tips: Trykk på Ctrl nederst på venstre side av tastaturet. Hold den inne og trykk på F. Så søker du på "Send kommentar", så finner du det! 

Endre "X ANTALL KOMMENTARER"

    15.11.2010 - 20:46

Vil du at for eksempel at det skal stå "2 søte små" istedenfor "2 kommentarer", så gjør du dette:
Trykk på Design -> Rediger -> Maler

- Trykk på CTRL + F tasten på tastaturet eller rull ned til du finner det.
- Søk på: <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
- Det du skal gjøre er å endre litt på koden, sånn at den blir ca slik:
<a href="${EntryPermaLink}#comment">${EntryCommentCount} søte små</a>

Mellomrom mellom header og innhold

    15.11.2010 - 20:44

Har du lyst på mellomrom mellom header og innhold? Da går du inn på "design", "rediger" også "stilsett". Det skal ca. se ut som dette:


#header {
background-color: #FFFFFF;
background-image: url(''HER ER URL'EN TIL DIN HEADER);
height: 480px;
background-repeat: repeat;
margin: 0px 0px 10px 0px;                         << HER!

Sett inn denne koden margin: 0px 0px 10px 0px; slik som jeg har gjort over. Vil du ha større eller mindre mellomrom, bare endrer du der det står 10px, til f.eks 5px eller 20px.

Menyen fra høyre til venstre

    15.11.2010 - 20:42

Koden du skal legge inn er:
}
#main {
float: right;
}
#side {
float: left;


Hvor legger jeg den inn?
Du legger den inn under #wrapper.
Slik skal det se ut sånn ca:

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

Forhåndsvis først, så ser du om du har gjort det riktig. Husk å lagre!

Ramme rundt bloggen

    15.11.2010 - 20:40

Hvordan gjør jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:

border: 2px solid #000000;

Hvor legger jeg den inn?
Du legger den inn under #wrapper og #footer. Ca. sånn her skal det se ut:
(Du kan også legge koden inn under #header, hvis du vil ha en ramme rundt headeren også).

#wrapper {
background-color: #FFFFFF;
border: 2px solid #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px solid #000000;
 
Istedet for solid, som betyr helstrukken linje rundt bloggen, kan du putte inn disse:
dotted
dashed
solid
double
groove
ridge
inset
outset

border-bottom = ramme eller strek kun på bunnen

bordet-top = ramme eller strek kun på toppen

border-left / border-right = ramme eller strek kun til venstre eller høyre


For å få tykkere ramme, så kan du bare endre ved å skrive 3px og hvis rammen skal være mindre, så skriver du bare 1px. Farger endrer du også fra #000000; (svart) til en annen type farge.

Smal og midtstille bloggen

    14.11.2010 - 15:59

Smal blogg

Koden:
width: 610px;

Hvor legger jeg den inn?
Du legger den under #header, #wrapper og #footer.

Slik skal det se ut da:

#header {
background-color: #FFFFFF;
height: 236px;
margin-left: left;
margin-right: left;
width: 700px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: left;
margin-right: left;
width: 700px;
}
#footer {
background-color: #FFFFFF;
margin-left: left;
margin-right: left;
width: 700px;
}

Nå er det bare å endre tallet til hva du måtte ønske. 600px eller kanskje 800px. Du bestemmer.


Midtstille bloggen

Koden du skal bruke:
margin-left: auto;
margin-right: auto;

Hvor legger jeg den inn?
Den skal du legge inn under #header, #wrapper og #footer.

Slik skal det se ut:

#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;

}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;

}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;

Bakgrunnsbilde som "står fast"

    14.11.2010 - 15:58

Hvor legger jeg den inn?
Denne koden skal du lime inn øverst i stilsettet.

BODY {
background-image: url("her skal URL'en til bildet stå");
background-attachment: fixed;
background-position: right bottom;
background-repeat: repeat;
}

Endre bakgrunn for overskrifter

    14.11.2010 - 15:58

Hvor legger jeg den inn?
Denne koden skal du lime inn nederst i stilsettet ditt.

h2 {
cursor:default;
background-color: #000000; <- Her endrer du bakgrunnsfarge..
color: #16CC16;
font-size:9pt;
font-family:tahoma;
letter-spacing:1px;
line-height:13pt;
text-align: center;
padding: 1px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid #16CC16;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;

Hvor mange leser bloggen din akkurat nå?

    14.11.2010 - 15:57

Hvor legger jeg den inn?
Endre profil - > Beskrivelse
I ruten for beskrivelse skal du lime inn koden, og du må huske på å legge inn linken til bloggen din.

Så limer du inn dette:
<!-- Start FastOnlineUsers.com --> <a href="http://www.fastonlineusers.com"> <script type="text/javascript" src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!! mce_src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!!></script> </a> leser denne bloggen NÅ</a> <!-- End FastOnlineUsers.com --></div>

Jeg har den koden på høyre side av bloggen. Det går også ann å legge inn koden på Widgets.
Gå inn på Design - Rediger - Widgets.

Hvordan få headeren (bilde) på plass der oppe

    14.11.2010 - 15:57

Koden du skal bruke er:

#header {
background-image: url(http://www.settinnlenkeher.jpg);
background-repeat: no-repeat;
height: 100px;
width: 800px;
}

Hvor skal jeg legge den inn?
Design -> Rediger
Du limer bare inn koden i stilsettet ditt.

Større profilbilde

    14.11.2010 - 15:56

Koden du skal bruke er:
<img src="PICTURE URL" height="100">

Forklaring:
Picture url skjønner du sikkert. Der du skal legge inn linken til bildet ditt.
100, der kan du sette inn et tall, og det bestemmer hvor stort bildet ditt blir.

Slik gjør du det:
Design -> Rediger -> Maler.
Her skal du finne

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


Så kan du for eksempel søke (CTRL + F) på 'profilename'. Du skal deretter bytte ut
(<img src="${ProfileImageUrl}" alt="${ProfileName}" />) med koden; <img src="PICTURE URL" height="100">.
For å legge inn linken til bildet, så må du laste opp bildet ditt på www.tinypic.com, under "Direct Link for Layouts" henter du linken som du skal legge inn i koden. Og du kan endre størrelsen for bildet ditt også hvis du vil.
Nå trykker du på Lagre Malen og da skal bildet ditt være større.

Mindre/større skrift på innleggene dine

    14.11.2010 - 15:56

Koden du skal bruke:
font-size: 10pt;

Hvor skal jeg legge den inn?
Den skal du legge inn under wrapper.

Slik for eks. skal det se ut;
#wrapper{
background-color: #FFFFFF;
font-size: 10pt;
}

Det eneste du trenger å gjøre nå er å endre tall, vil du ha større skrift skriver du for eksempel 12, eller kanskje du vil ha mindre skrift, så skriver du 8...

Få bort navnet over headeren

    14.11.2010 - 15:55

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

Hvor skal jeg legge den inn?
Den skal du legge nesten helt nederst i stilsettet ditt.

Slik skal det noenlunde se ut;
#header { color: #FFFFFF; }
#header h1, #header p { display:none }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #FFFFFF; }

Bilde ved siden av teksten

    14.11.2010 - 15:11

Legg inn et bilde på vanlig måte i innlegget du skriver i og trykk på "Html"-knappen eller "HTML av/på".

Da finner du koden:
<img src="adressetilbildet.jpg"/img>

Legg inn align="left" eller align="right" etter adressen så det ser slik ut:

<img src="adressetilbildet.jpg" align="left" /img>

Skift "left" til "right" hvis du vil ha bildet på venstre eller høyre side.

- Håper dere skjønte dette!

CINDY Z.

CINDY Z.

20, Kristiansand

Hei og velkommen til min blogg! Her kan du følge med på min hverdag og ting jeg liker å holde på med. Min lidenskap er foto, design, interiør, mat, skole og andre kreative ting som du finner på bloggen. Les, nyt og spør i vei om du lurer på noe! :-)

Bestill design

Kontakt/samarbeid:
zhuoblogg@hotmail.no

Siste innlegg

Annonser






Lenker

Bloggdesign



Design og koding av KvDesign - www.kvdesign.no
hits