tutorials

Tutorial: spesialtekst på innleggstitlene! (cufon)

Dere ser min søte tittel på hvert innlegg sant? :D 

 

 

 

Snakker om denne teksten.

Vil dere ha sånn? ^^ Man trenger bare å kode litt. Nå skal jeg prøve å forklare veldig enkelt (step by step) hvordan man gjør det. 

 

 

1.

Gå inn på dafont.com som 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.)
Når du finner en font du liker trykker du på download til høyre. 

Bilde 1

 

Bilde 2 - trykk på download

 

 

2.

Åpne fila du lastet ned (med winRAR eller winZIP. Gratis nedlastning. Google it).
Høyreklikk på BARE .ttf filen. (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 - høyreklikk

 

Bilde 4 - lagre på skrivebord

 
 

3.

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

Bilde 5

 

4.

Så går du inn på http://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 nødvendig.

Dette skal du fylle ut:

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

Bilde 6
 

en .ttf fil på skrivebordet ser gjerne slik ut. Et lite abg eksempel av fonten du valgte i midten av et hvitt felt. Og selvfølgelig .ttf på enden av navnet. 

Bilde 7
 



- neste er å krysse av på denne:

Bilde 8



- neste er "include the following glyphs (if available)". Her trenger du bare å krysse av på all. La resten være som det er. Huket av eller ei.

Bilde 9

 

- nederst i denne krysse-av-boksen står 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 this får man en fil som slutter på font.js. Lagre filen på skrivebord.

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

 

5.

Gå inn på http://www.tumblr.com/themes/upload_static_file og last opp begge javascriptene. De skal ligge på skivebord. Det vil se slik ut når du har lastet .js filen opp.


- Åpne begge lenkene du får under "your file is available at" i nye faner. Slik at du har dem. Det vil bare være 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 FØR </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 står Cufon.replace('h3'); i slutten av koden. Dette betyr at header 3 (header størrelse 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 størrelse osv på teksen må du gjøre 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 fornøyd 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. :-)

Håper 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 grått for det er mest nøytralt. 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 å søke 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 forhåndsvisning for å se om det virker før 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 står <h2>${EntryTitle}</h2>  
Ja nå SKAL det være <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 før, 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 måte å gjøre det på. Den er heller ikke så avansert som de andre måtene 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 søtt lite ikon ved siden av bloggnavnet ditt?



Først må du finne et favicon du liker, høyreklikke på bildet og kopiere bildenettadressen. Det finnes mange søte favicons på denne siden: http://pixelsgalore.tumblr.com/favicons




Så går 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 før skal vekk.

slik vil det se ut:



Dette må gjøres 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. Gjør 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 ordinære sidemenyen.

Husk å fjerne ******

Step 3.

 Jeg råder dere å bruke FORHÅNDSVISNING på 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> når 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 søte. 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 får 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 forhåndsvis for å se hvordan det ser ut.

#3b3a3e; font-family: helvetica;">4. Rediger koden etter ønske. Tekststørrelse, 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 måne-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 :) Håper 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 større program)

 

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

 

 

2. Trykk "Download Now" - den første grønne knappen. Last ned helt normalt.

 

 

3. Gå inn på www.nyaa.eu og søk etter anime helt øverst til høyre (se mine vakre røde/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 første episode av en anime kan du søke 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 størrelse.  Den med flest episoder er nok en av de største.

Ellers har jeg skrevet det meste på bildet om hvilken du bør laste ned.

 

 

5. For å laste ned, trykk på den lille pila på samme rad som den du skal laste ned. Da åpnes den automatisk i uTorrent. Hvis ikke, så spør den om den skal åpnes automatisk i uTorrent.  :)

 

 

6. Den laster ned automatisk også kommer det en liten pop-up når 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 før 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 hår og inspirasjon. I tillegg blogger jeg en del om hverdagen min. Jeg er en veldig hyggelig jente så ikke nøl med å spørre 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 skjønner hvis jeg har laget eller tatt bildene selv.

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

Om du lurer på noe //
spør 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