Ny Gullfisk og Slørhale

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

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

EFFEKTER:
♥ Dalende snø på bloggen HER
♥ 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
♥ 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
♥ 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
♥ Scroll til toppen – knapp HER
♥ 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:
♥ Jeg lager headere på bestilling HER

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

Midtstille overskriften

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?

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

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

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: 958px;
}
.meny ul{
list-style-type:none;
}
.meny li{
display:inline;
}
.meny a{
float:left;
width:137px;
text-decoration:none;
background-color: #FFBEF0;
font-weight:bold;
font-size:11px;
padding:10px;
border-right:1px 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 27.07.2017

Enkel knappemeny

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”

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”

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>