10. lokakuuta 2014

POSTAUKSEN OTSIKON ALLE VIIVA

1. Mene kohtaan malli ja siitä muokkaa HTML-koodia

2. Etsi haulla (CTRL + F) tai rullaa kohtaan h3.post-title, .comments h4 {

3. Lisää sen alle koodi: border-bottom: 1px solid #000000;

4. Voit muokata viivan väriä vaihtamalla jonkun muun värikoodin #-merkin jälkeen ja viivan paksuutta muokkaamalla kohtaa 1px. Esikatsele ja tallenna.

21. syyskuuta 2014

GADGETTIEN OTSIKOIDEN KIRJAIMIIN VÄLIT

Otsikosta on varmaan vaikea ymmärtää, mutta tarkoitan siis alla olevan kuvan kirjainten välejä.
1. Mene Malli > muokkaa HTML-koodia.
2. Rullaa alas niin kauan kunnes tulee kohta:

/* Headings
----------------------------------------------- */
h2 {

3. Lisää siihen { ja } sisälle koodi letter-spacing: 5px;
4. Voit muokata numeroa haluamasi kokoiseksi ja muista sen jälkeen esikatsella ja tallentaa!

25. elokuuta 2014

SCROLL TO TOP- NUOLI

Tämä ohje oli yksi teidän toiveista ja ajattelin sen nyt ensimmäisenä toteuttaa, koska tämä on niin simppeliä.
Nuoli tulee siis blogin oikeaan alareunaan, kun sivua rullaa vähän alaspäin. Katso esimerkki täältä.

1. Ensimmäisenä pitää tehdä jossain kuvanmuokkausohjelmassa nuoli/kuva, jonka haluat sitten vievän ylöspäin. Muista tallentaa PNG-muodossa!

2. Lataa kuvasi esimerkiksi Photobuckettiin ja avaa kuva ja kopioi sen linkki.

3. Sitten menet kohtaan ulkoasu > lisää gadget > HTML/Javascript

4. Liität gadgettiin koodin: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='rb-top' style='display: none; position: fixed; bottom: 20px; right:20px; cursor:pointer;font:12px arial;'><img src='kuvasiosoite.fi' width="40px" height="40px"/></a>

5. Korvaat sinisellä merkityn tekstin oman kuvasi osoitteella ja, jos haluat kuvan olevan esim. enemmän toisella reunalla muokkaat kohtaa, joka on merkitty punaisella. Muitakin pikselilukuja voi muuttaa. Kokeilemalla löytää parhaan tuloksen.

6. Esikatsele ja tallenna!