tutorials

Tutorial: spesialtekst p innleggstitlene! (cufon)

Dere ser min ste tittel p hvert innlegg sant? :D

Snakker om denne teksten.

Vil dere ha snn? ^^ Man trenger bare kode litt. N skal jeg prve forklare veldig enkelt (step by step) hvordan man gjr det.

1.

G inn p dafont.comsom er en nettside der du kan laste ned mange fonter. Finn en font du liker.(Jeg liker se innp "script" > "handwritten". Da finner du pene fonter slik som min <h1> er.)
Nr du finner en font du liker trykker du p download til hyre.

Bilde 1

Bilde 2 - trykk p download

2.

pne fila du lastet ned (med winRAR eller winZIP. Gratis nedlastning. Google it).
Hyreklikk pBARE .ttffilen. (om det er andre .ttf filer som heter Bold eller Italic osv, drit i dem)
Lagre/pakk den ut (extract to the specified folder)p skrivebord. Den skal ende opp p skrivebord, den alene.

Bilde 3 - hyreklikk

Bilde 4 - lagre p skrivebord


3.

G inn p cufonsom er en nettside der du kan laste opp din valgte font og f den "kodet", om jeg skal kalle det det xD
hyreklikk p download. > "save link as" > p skrivebord. Ikke endre filnavn!

Bilde 5

4.

S gr du inn phttp://cufon.shoqolate.com/generate/igjen. Denne gangen begynner du fylle ut generate skjemaet som er p samme side.MERK! du skal ikke fylle ut alt. Det er ikke ndvendig.

Dette skal du fylle ut:

- P "select the font you'd like" skal du bare endre regular typeface. Trykk p den og last opp .ttffilen du lagret p skrivebordet. (tekstfilen)

Bilde 6

en .ttf fil p skrivebordet ser gjerne slik ut. Et lite abgeksempel av fonten du valgte i midten av et hvitt felt. Og selvflgelig .ttf p enden av navnet.

Bilde 7



- neste er krysse avp denne:

Bilde 8



- neste er "include the following glyphs (if available)". Her trenger du bare krysse av pall. La resten vre som det er. Huket av eller ei.

Bilde 9

- nederst i denne krysse-av-boksen str det i tykk skrift ".. and also these single characters". Her kan du skrive bare for sikkerhetsskyld. Merk dere at ikke finnes i alle font typer. Greit finne ut dette kjapt :)

Bilde 10

- neste er enkelt og greit helt nederst. Dere trenger ikke fylle ut mer. I "terms" skal dere bare krysse av og deretter trykke let's do this!

Bilde 11


- Etter ha trykket p let's do thisfr man en fil som slutter p font.js. Lagre filen p skrivebord.

Da er bde cufon fil og tekst fil lagret! To forskjellige javascript har dere lagret n. Dette skal vi bruke nu.

5.

G inn phttp://www.tumblr.com/themes/upload_static_fileog last opp begge javascriptene. De skal ligge p skivebord. Det vil se slik ut nr du har lastet .jsfilen opp.


- pne begge lenkene du fr under "your file is available at" i nye faner. Slik at du har dem. Det vil bare vre hvite sier med masse svart tekst og koding. Ikke bry dere om det. Dere trenger bare lenkene :)

6.

G inn p Maler (html) - Forsiden / Innlegg / Kategori / Arkiv

Legg inn denne koden FR </head> i koden. (</head> er langt oppe i koden)
Legg inn lenkene der jeg har skrevet at de skal.

<script src="LENKE TIL CUFON JAVASCRIPT" type="text/javascript"></script>
<script src="LENKE TIL FONT JAVASCRIPT (FONT.JS)" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('h3');</script>

MERK! Det str Cufon.replace('h3'); i slutten av koden. Dette betyr at header 3 (header strrelse 3 eller <h3>) blir til den nye teksten. Vanligvis p blogg.no er tittel p blogginnlegg <h3>. Hvis dere vil ha fler headere med samme tekst kan dere skrive slik i steden: Cufon.replace('h3, h1, h2');

7.

G inn p Stilsett (CSS)

Legg inn.cufon-loading { visibility: hidden; } helt nederst.

Om du vil endre strrelse osv p teksen m du gjre det i h3 { denne koden } og evt koden for lenker siden tittel p forsiden er lenke til innlegget og kommentarer :)

Negativt: teksten ser helt lik ut uansett om musepekeren er over teksten eller ikke. =(

8.

Hvis dere ikke er fornyd med tekstvalget deres kan dere bare g inn p dafont.com og laste ned en annen. Men da m dere fylle inn generate skjema p nytt, trykke let's do this helt nederst p skjema og laste opp den nye javascript fila p tumblr siden jeg la ut. :) Dermed lime den nye lenken inn i koden p maler.

Det var det. :-)

Hper det funket for dere.

#bloggdesign #design #html #cufon #tittel #stilsett #maler #css #tutorial #tutorials

Tutorial: redigere tittelen

Dette er en tutorial p hvordan man kan f en finere tittel p innleggene sine. Man blir ogs mer observant p hva som skal til for redigere slike ting. ^^

Nr 1: CSS koden

lim inn dette i CSS koden:

a.tittel:LINK, a.tittel:VISITED
{font-family:georgia;
line-height:18pt;
height:20px;
font-size:20pt;
text-align:center;
color:black;
letter-spacing:1px;
text-decoration:none;
text-transform:none;
display:block;
}
a.tittel:HOVER, a.tittel:ACTIVE
{font-family:georgia;
line-height:18pt;
height:20px;
font-size:20pt;
text-align:center;
color:#CCCCCC;
letter-spacing:1px;
text-decoration:none;
text-transform:none;
display:block;
}

Slik ser teksten ut
Slik ser teksten ut med pil over

Jeg valgte svart og grtt for det er mest nytralt. Om dere vil ha andre farger og annen font s m dere redigere dette selv. ^^

Nr 2: maler (forside, kategori og arkiv)

Design > Rediger > Maler > Forside / kategori / arkiv (IKKE innlegg)


1. Trykk CTRL + F for ske etter ">${EntryTitle}</a>i koden.
2. Skiv inn class="tittel" etter <a slik at det blir:
<a class="tittel" href="${EntryPermaLink}">${EntryTitle}</a>
3. Fjern ogs <h2> og </h2> som er foran og etter denne lille delen. Hvis du ikke allerede har tatt det vekk.

Bruk forhndsvisning for se om det virker fr dere lagrer!

FORKLARING: Tittelen p forsiden er en link til selve innlegget og kommentarene. (Man trykker p dn for komme videre) For redigere denne linken m vi lage en linkekode i CSS. Den koden kalte vi "tittel" s da m vi skrive class="tittel" i forsidekoden.

Nr 3: maler (innlegg)

Finn ${EntryTitle} i innleggskoden.
Forsikre deg om at det str <h2>${EntryTitle}</h2>
Ja n SKAL det vre <h2> der!
I innlegg s er ikke tittelen en link, men vanlig tekst. h2 er en type tittelkode.

Nr 4: Css koden for innleggstittel

Design > Rediger > Stilsett

Lim inn dette. (hvis du allerede har en kode for h2 i css fra fr, slett den og erstatt med denne)

h2 {
font-family:georgia;
line-height:18pt;
height:20px;
font-size:20pt;
text-align:center;
color:black;
letter-spacing:1px;
text-decoration:none;
text-transform:none;
display:block;
}

Dette er bare en mte gjre det p. Den er heller ikke s avansert som de andre mtene er. Det er i alle fall en start. Rediger CSS koden som dere vil for f en tittel dere nsker! :)

#tutorials #bloggdesign #design

Tutorials - shortcut icon / favicon

Har du ogs lyst p et stt lite ikon ved siden av bloggnavnet ditt?



Frst m du finne et favicon du liker, hyreklikke p bildet og kopiere bildenettadressen.Det finnes mange ste favicons p denne siden:http://pixelsgalore.tumblr.com/favicons




S gr du inn p Design > Rediger > Maler (HTML)
I starten av koden skal du finne denne:<link rel="shortcut icon" href="

Du skal lime inn bildenettadressen (image URL)href="mellom her"
den koden som sto der fra fr skal vekk.

slik vil det se ut:



Dette m gjres i Forside, Innlegg, Kategori og Arkiv.

:D

#bloggdesign #css #html #shortcuticon #favicon #shortcut #design

Tutorial - dele opp sidemenyen i bokser



Step 1.

i CSS Stilsett
Legg inn denne koden. Dere kan velge bakgrunnsfarge og bredde som dere vil. Dette er kopiert fra mitt eget design. Hvis sidemenyen forsvinner er det fordi den er for brei. Gjr width mindre.

(Fjern alle ***** for at koden skal funke)

Ting dere kan endre p:
background = bakgrunnsfarge
width = bredde
padding = luft mellom kant og tekst
margin-left = hvor langt til venstre skal boksen

Step 2.

Legg dette inn i CSS Stilsett for gjemme den ordinre sidemenyen.

Husk fjerne ******

Step 3.

Jeg rder dere brukeFORHNDSVISNINGp denne delen.

G inn p Maler og finn <div id="side" i (Forside, innlegg, kategori og arkiv). ETTER "side" koden sin > legg inn denne <div id="sideboks"> og litt random tekst etterp

Og dermed legg in </div> nr du vil at boksen skal ende. RETT etter den </div> legger du inn<div id="sideboks">p nytt. Da starter en ny boks. S avslutter du med en ny </div>. Slik fortsetter du.

Eksempel:

<div id="sideboks">Her er litt info om meg selv. Jeg liker bamser. De er ste. Her er et bilde av en bamse. <br><br> <img src="link"></div></div id="sideboks">N kommer noen linker til mine favorittblogger: sdkjfhdkjghfkjh</div>

Hvis hele greia blir delagt er det mest sannsynlig fordi du har en </div> for lite eller for mye. :-)

Step 4. Kategorier i egen boks

Alternativt. Koden skal inn i Maler et sted inni sidemenyen etter en </div>

<div id="sideboks">
<strong>Kategorier</strong>
<li><ul>
<tag:categorylist>
<a href="${CategoryLink}">${CategoryName}</a> - </tag:categorylist>
</ul></li>
</div>

LYKKE TIL.

#bloggdesign #html #css #sidemeny #design #koding #tutorials

Tutorial - legge transparent bilde over bakgrunn

Her viser jeg hvordan man legger et bilde med gjennomsiktig bakgrunn over blogg.no bakgrunnen.

Her er koden:

Jeg har tatt vekk bredden p bildet, som jeg nevnte i videoen. :) Jeg har ogs fikset margin-left til 0px, alts HELT inntil venstre kant. Den var p -50 hos meg fordi Ichigo bildet som jeg bruker har s lang katana (sverd). Trengte ikke se hele :p Husk at den skal limes inn rett etter </head>

<div style="position:fixed; margin-left:0px; bottom:0px;"><img src="BILDE KODE" width=""></div>

Tutorial - fjerne ensfarget bakgrunn

Sett farge p visse ord i teksten

Noen har kanskje lurt p hvordan jeg fr denne teksten til se annerledes ut? Det er bare vanlig fet tekst og kursiv tekst. :)

Eksempel:

Find light in the beautiful sea, I choose to be happy.
You and I, you and I.. We're like diamonds in the sky.

You're a shooting star I see. A vision of ecstasy.
When you hold me, I'm alive.. We're like diamonds in the sky.

For teste det ut:

1. Publiser et innlegg med fet og kursiv tekst.

2. Putt dette i CSS koden:


#3b3a3e; font-family: helvetica; line-height: 16px;">
b, strong

#3b3a3e; font-family: helvetica; line-height: 16px;">{COLOR: #3b3a3e;
#3b3a3e; font-family: helvetica; line-height: 16px;">font-size : 12px;
#3b3a3e; font-family: helvetica; line-height: 16px;">font-family:helvetica;
#3b3a3e; font-family: helvetica; line-height: 16px;">font-weight:bold;
#3b3a3e; font-family: helvetica; line-height: 16px;">text-transform:;
#3b3a3e; font-family: helvetica; line-height: 16px;">letter-spacing:1px;
#3b3a3e; font-family: helvetica; line-height: 16px;">}
#3b3a3e; font-family: helvetica; line-height: 16px;">i, em, u, s, strike
#3b3a3e; font-family: helvetica; line-height: 16px;">{font-weight:normal;
#3b3a3e; font-family: helvetica; line-height: 16px;">font-family:georgia;
#3b3a3e; font-family: helvetica; line-height: 16px;">font-size:12px;
#3b3a3e; font-family: helvetica; line-height: 16px;">text-transform:none;
#3b3a3e; font-family: helvetica; line-height: 16px;">letter-spacing:0px;
#3b3a3e; font-family: helvetica; line-height: 16px;">color: #38bf9e;
#3b3a3e; font-family: helvetica; line-height: 16px;">text-transform: ;
#3b3a3e; font-family: helvetica; line-height: 16px;">text-decoration:none;
#3b3a3e; font-family: helvetica; line-height: 16px;">}


#3b3a3e; font-family: helvetica;">
3.
Trykk forhndsvis for se hvordan det ser ut.

#3b3a3e; font-family: helvetica;">4.Rediger koden etter nske. Tekststrrelse, farge, type osv. :)

#3b3a3e; font-family: helvetica;">For finne fargekoder (#E8ADAA):http://www.computerhope.com/htmcolor.htm

Photoshop brushes jeg anbefaler

Her er noen brushes til Photoshop som jeg anbefaler.
Nedlastningslinken er under bildene.
Jeg fant ikke alle de jeg bruker, men jeg fant noen av dem og noe annet som ligner :)


Birds Flying
http://redheadstock.deviantart.com/art/Birds-Flying-Brushes-56661566




Glitter Brushes
http://redheadstock.deviantart.com/art/Glitter-Sparkles-Brushes-48646588




Grunge & Rust
http://metal-cx.deviantart.com/art/Grunge-n-Rust-2nd-Edition-17576384




Mill
http://wowbrushes.com/swirls/mill/




Moon Brushes
(her er det mange mne-brushes. De har jeg sletta for jeg brukte bare stjerne-brushene.)
http://keepwaiting.deviantart.com/art/MOON-BRUSHES-for-PS7-v-2-36432704




Paint Splat Brushes
http://browse.deviantart.com/art/paint-splat-brushes-101721444




Stars & Cloud
http://miss69-stock.deviantart.com/art/Stars-n-Cloud-Brushes-31809206




Cherry Bomb
http://wowbrushes.com/splatters/cherry-bomb/


Hvordan finne og laste ned brushes til Photoshop

Her har jeg laget en video om hvordan man kan finne gode brushes og laste dem opp i Photoshop.

Her er en link til brushes som jeg anbefaler:
http://alchemist.blogg.no/1361883759_photoshop_brushes_jeg.html

Tutorial - kule effekter p header

Her viser jeg hvordan jeg pleier redigere headere.

Tutorial - hvordan fjerne bakgrunn med pen tool.

En video om hvordan man fjerner bakgrunn med pen tool. Anbefaler at dere bruker full skjerm s dere ser hva som skjer.

Denne lagde jeg i dag :) Hper dette forklarer det meste.

Hvordan laste ned anime?

Hvordan laste ned filmer, serier, anime generelt? Jo da trenger du bitorrent eller utorrent. Hva er det? Det skal jeg forklare.

Jeg bruker utorrent, s da forklarer jeg med utorrent. (bitorrent er ikke noe annerledes, bare et strre program)

1. Google "utorrent free download" og trykk p den verste.

2. Trykk "Download Now" - den frste grnne knappen. Last ned helt normalt.

3. G inn p www.nyaa.eu og sk etter anime helt verst til hyre (se mine vakre rde/rosa piler)

4. Det kommer opp MANGEEEEEEEEE episoder du kan laste ned. De siste episodene som er lagt ut er de du ser.

Hvis du vil ha frste episode av en anime kan du ske f. eks "Naruto Shippuuden 1" eller "Naruto Shippuuden 1-100" eller noe..

For laste ned flest mulig episoder fra en anime kan man trykke p "SIZE" over alle sidetallene... Da sorteres den etter strrelse. Den med flest episoder er nok en av de strste.

Ellers har jeg skrevet det meste p bildet om hvilken du br laste ned.

5. For laste ned, trykk p den lille pilap samme rad som den du skal laste ned. Da pnes den automatisk i uTorrent. Hvis ikke, s spr den om den skal pnes automatisk i uTorrent. :)

6. Den laster ned automatisk ogs kommer det en liten pop-up nr den er ferdig nedlastet. Den finnes ogs i "Nedlastninger" eller "Downloads" mappa p dataen din. Etter den er ferdig nedlastet seff. Hvis du pner den fr den er ferdig vil den hakke og ikke fungere. Logisk.

7. Man kan ogs dobbeltklikke p den via uTorrent for se. 100% = finished downloading. Enjoy! :-)

Noe som var uklart?

tutorials


Alder: 25
Bosted: Oslo
Stjernetegn: Tvilling (♊)

Velkommen til min blogg. Jeg bryr meg veldig mye om hr og inspirasjon. I tillegg blogger jeg en del om hverdagen min. Jeg er en veldig hyggelig jente s ikke nl med sprre om ting eller legge meg til som venn :)

add as friend / トモダチ

online / 忍者


pusene


Dette er Yuki ♥ Navnet betyr sn p japansk.



Dette er Neko ♥ Navnet betyr katt p japansk.


anime


[] full metal alchemist brotherhood, naruto, one piece, bleach, attack on titan etc.
anime list anime gifs

lese mer?

= nytt/oppdatert

Info

animerte bilder (gifs), animebilder og andre bilder er kopiert fra tumblr. dere skjnner hvis jeg har laget eller tatt bildene selv.

Kontakt
facebook og email er privat.
tumblr: klikk
deviantart: klikk

Om du lurer p noe //
spr i kommentarfeltet eller send melding her p blogg.no


blogg.no

blogg.no leverer teknologien bak alchemist ; 錬金術師. Bloggen skrives av Silje Anderson :) og er underlagt Lov om opphavsrett til ndsverk. Det betyr at du ikke kan kopiere tekst, bilder eller annet innhold uten tillatelse. Forfatter er selv ansvarlig for innhold. Henvendelser kan rettes til hjelp@blogg.no.

ToppBlogg - toppliste for bloggere
hits