Jeg fikk en søt kommentar av Silje, der jeg ble utfordret til å skrive 10 ting som jeg vil gjøre før jeg dør. Selvfølgelig vil jeg det - så får kanskje noen et litt annet inntrykk av meg, enn som den designhekta 18-åringen jeg er.

1. Eie en walkin-garderobe.
2. Reise til California, NY, Florida, Paris, Luxembourg, Island, Thailand, Egypt og England.
3. Utdanne meg til eiendomsmegler - og få jobb.
4. Finne en butikk der har alle bukser i lengde 36.
5. Printe ut noen av mine egne fotografier og ha dem i storformat på stueveggen.
6. Leve spontant å oppleve ting som aldri kunne vært planlagt.
7. Få barn før jeg er 30.
8. Ikke angre på noe jeg ikke gjorde.
9. Tattovere meg.
10. Være lykkelig den dagen det min tur til å forlate denne jord.


Jeg utfordrer videre Melissa, Marit, Vivian, Silje og alle andre som måtte ønske å ta utfordringen! Det er også morsomt at du legger igjen en kommentar hvis du tar den, så jeg kan lese hva du vil gjøre i løpet av livet! :)

Siden det er så mange som lurer på dette, så kan jeg likegodt skrive det i et eget innlegg. Det er ikke så vanskelig bare man har hodet med seg. 

Jeg vil anbefale dere å gjøre det på denne måten jeg nå vil vise for å få en heldekkende bakgrunn med ei kolonne for blogginnlegg og ei kolonne for sidemenyen (slik jeg har).

Vi finner frem til stilsettet ditt.



Hvis du har en bakgrunn på hele siden på bloggen din, er det denne som vil vises når vi er ferdige med denne guiden. I avsnittet #wrapper har du sikkert en bakgrunn eller bakgrunnsbilde, dette vil jeg at du skal fjerne, slik at det ikke finnes en linje som ser slik ut:

background-image: url(' DITT BILDES URL ');

Den andre linjen vi skal endre er skal etter endring se slik ut:

background-color: #transparent; 

Forhåndsviser du nå, vil alt utenom headeren ha samme farge eller bakgrunnsbilde. Hvis du ikke har følgende avsnitt, legger du til alt under. Dersom du har følgende avsnitt, men ikke linjene som her er nevnt, lim inn det du ikke har.
Slik skal det være når vi er ferdige, og bakgrunnen i feltene blir hvit. Disse fargene kan endres. Fargekoder finner du her. 

#main {
background-color: #ffffff;
width: 75%;
}
#side {
background-color: #ffffff;
width: 20%;
}


Jeg synes også det er pent med en ramme med en litt mørkere, men nøytral farge, rundt kolonnene, dette får du med å legge inn denne koden i begge avsnittene: border: 2px solid #cdcdcd;
Tallet foran px kan endres til ønsket bredde på rammen.

Ferdig resultat i stilsettet blir da slik:





Og som vanlig setter jeg pris på at jeg ikke finner mine guider kopiert inn på andres blogger!

Her kommer en mal på en fireknappers meny - for dem som måtte ha problemer med dette.

Menyen vil se slik ut:


..og når du holder musepekeren over blir det slik:


(beklager uklare bilder, det blir selvfølgelig bedre når det ikke er print screen..)

Før vi starter, vil jeg gjerne at du i et innlegg skriver litt info om deg selv. Om du ikke har det, kan du enten lage et nytt innlegg der du skriver om deg selv, eller omgjør et eldre innlegg til dette formålet. Når dette er gjort, lagrer du url-adressen til dette innlegget, det skal inn i HTML-koden for menyen din. Url-adressen er den linjen som står i adresselinjen helt oppe - der det mest sannsynlig står http://thehibi.blogg.no/1265396238_fireknappers_meny.html nå. Når du går inn på din blogg, og finner frem til innlegget der du har skrevet om deg selv, blir altså det som står i adresselinjen når du er inne på det innlegget.



For å få menyen inn slik at det ikke blir forvirring, er det viktig at HTML-koden legges inn i alle malene - dvs i malene for forside, innlegg, kategori og arkiv. Dette blir det mest profesjonelle resultatet.


Vi legger først inn CSS som hører til menyen.




Bla til nederst i stilsettet ditt og legg inn denne koden

#meny li a img:hover {
background: #83766c;
}



Start HTML
Denne guiden som kommer under må du altså gjøre fire ganger - en gang per mal. Du gjør det samme i alle malene.
Så da er det bare å starte:

Vi går først til malene for forside:


Søk (Ctrl+F) opp følgende: <div id="wrapper" class="yui-gc">

Under dette legger du til denne HTML-koden:

<ul id="meny" ><div align="center"><li><a href="http://blogg.no/"><img src="http://i50.tinypic.com/2iqcrqg.jpg" alt="Blogg.no" width="200"></a><a href="${BlogUrl}"><img src="http://i50.tinypic.com/2ikb3h2.jpg" alt="Forside" width="200"></a><a href="${ProfileUrl}"><img src="http://i50.tinypic.com/29mkkz8.jpg" alt="Profil" width="200"></a><a href="LINK TIL INNLEGG OM MEG"><img src="http://i45.tinypic.com/2rmt9c2.jpg" alt="Om meg" width="200"></a></div></ul>


Nå får du bruk for url-adressen til det innlegget du tidligere skrev om deg selv. Den uthevede skriften (KUN UTHEVET!!) LINK TIL OM MEG, fjerner du, og erstatter med url-adressen til innlegget der du har skrevet om deg selv.

Du kan nå forhåndsvise - er du tilfreds - lagre. Er det noe som ikke stemmer - sjekk om du har fått fjernet gåseøynene som hører til linken til dit du har skrevet om deg selv. Det skal være gåseøyne ( " " ) der!

Har du nå gjort dette en gang: Gå så til malene for innlegg og gjør så om igjen alt etter Start HTML.
Har du nå gjort dette to ganger: Gå så til malene for kategori og gjør så om igjen alt etter Start HTML.
Har du nå gjort dette tre ganger: Gå så til malene for arkiv og gjør så om igjen alt etter Start HTML.
Har du nå gjort dette fire ganger: FERDIG! Gratulrerer med egen meny! :)





Jeg hadde også satt pris på om Ezo ikke kopierer absolutt ALLE kodene jeg legger ut, man trenger ikke to identiske blogger til enhver tid.. På forhånd takk.

Enkelt og greit for deg som vil ha litt variasjon, og ikke et standard blogg.no-oppsett.

Vi finner frem til stilsettet






Legg inn disse linjene nederst:

#main {float: right;}
#side {float: left;}


Lagre.

Er du plaget med å ikke finne frem i din egen blogg, eller irriterer deg grenseløst over at det er håpløst å finne frem i andres blogger?

Her får du info om hvordan du raskt legger inn din egen google-søkerute der man kun søker innenfor din bloggs grenser!
Koden legger vi inn i alle maler, her får du info om hvordan du legger søkeruten øverst i sidemenyen i malene for forsiden - så må du gjøre det samme i malene for de andre sidene etterpå.

Vi finner frem til din bloggs forside-maler




Klikk Ctrl+F og søk opp <div id="side" class="yui-u">

Under denne linjen legger du inn følgende


.<div class="sokerute">
<h3>Søk i bloggen</h3>
<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post">
<input type="hidden" name="bl_id" value="${BlogID}" />
<input type="text" name="criteria" value="" size="12" maxlength="64" />
<input type="submit" value="Søk" />
</form>
</div>



Lagre og gjør det samme i malene for innlegg, kategori og arkiv.
Så er det bare å søke i vei :)
Les mer i arkivet » Februar 2010 » Januar 2010 » Desember 2009

TheHibi

For å få til skikkelig blogging, der en atpåtil ønsker lesere, klarer man seg nesten ikke uten et skikkelig bloggdesign. Det er dette denne bloggen kan hjelpe deg med, og med hjelp av photoshop, html- og css-koder kan virkelig underverker utføres.

Velkommen til TheHibi's designblogg!!




Siden jeg tilbyr gratis designer, har jeg tatt meg den frihet å velge selv når jeg lager designer, altså når jeg har tid til det. Sender du inn en forespørsel, kan du derfor regne med å få positivt svar etter flere uker.

TheHibi på bloglovin

Populære ferdigdesign

hits