keskiviikko 30. lokakuuta 2013

Blogin kulmien pyöristäminen

Blogin kulmien pyöristäminen antaa blogille kivan ilmeen, 
ainakin omasta mielestäni. Alla havainnollistava kuva, mitä
blogin kulmien pyöristämisellä pyrin tarkoittamaan:


Normaalistihan blogi näyttäisi ilman pyöristämistä tältä:


Jos haluat blogiisi pyöristetyt kulmat, toimi näin:
 
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Lisää CSS:ään alla oleva koodi: 

.content-inner {
border-radius: 100px;
}

 
Kuten aiemmissakin postauksissa, punaista lihavoitua pikselilukua voi
jälleen muuttaa oman mielensä mukaan. Mitä isommaksi muutat
lukua, sitä pyöristetymmät blogin ylä- ja alakulmista tulee.

HUOM! Tämä koodi ei valitettavasti pyöristä automaattisesti
blogin banneria. Bannerin voi pyöristää kuvanmuokkausohjelmalla
sopivaksi, esimerkiksi Photoscapella (netistä ladattava ilmainen
kuvanmuokkausohjelma, omistan itsekin).

xoxo iltsu

sunnuntai 20. lokakuuta 2013

Musta YouTube-palkki

1. Mene Youtubeen ja klikkaa biisiä, jonka haluat valita
postaukseesi. Sitten mene Jaa -> Upota -> kopio punaisella
ympäröity kenttä kokonaisuudessaan. Lilalle alueelle voit
halutessasi itse määrittää jo valmiiksi palkin leveyden/korkeuden.


2. Mene luomaan postausta -> HTML -> liitä äsken kopioimasi
kohta postauksen HTML-koodiin.


3. Widthiä (= leveys) ja heightiä (= korkeus) voit muuttaa mieleiseesi.
Width kannattaa määrittää kuvien levyyden kanssa samaksi.
Kuvien leveyden määrittämiseen on tehty postaus, tämä
ÄLÄ KUITENKAAN POISTA LAINAUSMERKKEJÄ!!!

4. Alla olevaan kuvaan olen määrittänyt leveyden ja korkeuden. Leveyden
olen määrittänyt kuvieni leveyden kautta, joka siis on 750. Korkeudeksi
laitoin 25, sillä se miellyttää silmääni eniten.

5. Lisää videon jälkeen >br /> koodiyhdistelmä 3-4 kertaa siten, 
jotta pystyt kirjoittamaan YouTube-palkkisi alle jotain
tekstiä. Jos haluat laittaa kuvia, br-koodeja ei ole pakko laittaa.

6. Ja alla sitten kuva valmiista palkista julkaistussa tekstissä


xoxo iltsu


perjantai 18. lokakuuta 2013

Kommenttiavatarin pyöristäminen

Eli kommenttiavatarien/kommenttikuvakkeiden pyöristäminen
olisi käsittelyssä tässä postauksessa. Näytän, miltä se sitten
luonnossa näyttäisi:


Lisää alla oleva koodi CSS:ään:

.avatar-image-container, .avatar-image-container img {
width: 40px !important;
max-width: 40px !important;
height: 40px !important;
max-height: 40px !important;
padding: 0 !important;
margin: 0px 0px 0px 0px;
border: 0px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
-khtml-border-radius: 999px;
border-radius: 999px;
}

 40-pikseleitä muuttamalla voit muuttaa avatarin kokoa.
999-pikselit määräävät avatarin pyöreyden. 

xoxo, iltsu

torstai 17. lokakuuta 2013

Kuvien välit pieneksi ilman Flickriä

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS
Lisää CSS:ään alla oleva koodi:

img { 
margin-top: -5px; 
margin-bottom: -5px; 
}

Punaiseksi värjättyjä lukuja voit muuttaa mielesi mukaan.

xoxo iltsu

keskiviikko 16. lokakuuta 2013

Kommenttiboksin pyöristäminen

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS
 Lisää sinne alla oleva koodi:

.comments .comment-block {
background-color: #F2F2F2;
border: 10px solid #F2F2F2;
border-radius: 40px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
}

Punaiseksi värjätyt nimikkeet kertovat kommenttiboksin
värin. HTML-koodin värejä löytyy täältä. Rullatessasi sivua
alaspäin pääset väripaletille, josta voit valita värin.
Vihreää lukua muuttamalla voit vaikuttaa kommenttilomakkeen
kehysten (= lähes sama asia kuin kommenttilomakkeen koko)
suuruuteen. Sinistä lukua muuttamalla vaikutat kommenttiboksin
pyöreyteen.
 
xoxo iltsu

tiistai 15. lokakuuta 2013

Vähän Photobucketista

Ajattelin tehdä Photobucketille ihan oman postauksen, jossa
kerron vähän siitä, mikä se on & miten kuvat saa sen
kautta ladattua esim. blogin gadgetiin TAI postaukseen.

kuva ladattu laittomasti googlen kuvahausta. kuvaa klikkaamalla pääset alkuperäislinkkiin.
Photobucket on kuvanlatauspalvelu, jonne siis voit
ladata kuvia. Omasta mielestäni Photobucket on kätevä,
nopea ja helppo ladata kuvia esimerkiksi gadgetiksi.


Yllä oleva kuva on Photobucketin etusivusta, kun käyttäjälle
on kirjaudutta sisään. Punaisella ympyrällä vedetystä alueesta klikkaamalla
voit ladata kuvan/kuvia.

NÄIN LATAAT KUVAT PHOTOBUCKETIIN

1. Olet Photobucketin etusivulla (yllä oleva kuva). Klikkaa "Upload".
2. Klikkaa "Choose photos and videos".


3. Aukeaa kuvakansiosi, ja valitse sieltä kuvat, jotka haluat ladata.
4. Kuvat latautuvat sivun alareunaan, ja sitten voit klikata
kuvaa, jotta näet sen alkuperäisessä koossa.

Ja tadaa kuvat on ladattu photobucketiin!

 MITEN KUVA GADGETIIN TAI POSTAUKSEEN?

Kun olet ladannut kuvan Photobucketiin, saatat halua
laittaa kuvan esim. blogin gadgetiin tai postaukseen. Alla olevan
kuvan ympäröidyssä laatikossa (Links to Share this photo) on koodit siihen.


Jos haluat laittaa kuvan postaukseen, klikkaa laatikon HTML-kohtaa, 
jolloin koodi kopioituu hiireesi. Sitten liitä se postauksen HTML-koodiin,
ja tadaa, pitäisi näkyä!

Jos haluat kuvan gadgetiin, mene ulkoasu -> lisää gadget ->
HTML/JavaScript. Kopioi Links to share this photo -laatikon
HTML-kohta niin kuin ylemmässäkin ohjeessa & liitä tyhjään
kenttään.

Jos sinun pitää kopioida kuvan linkki, ÄLÄ kopioi linkkiä selaimen
ylälaidassa olevasta "linkkilaatikosta" (en muista mikä se on
nimeltään, joku osoitekenttä tms.) sivun linkkiä, vaan Links to share this photo 
-laatikon Direct-kohta. Tätä taitoa tarvitaan esim. tässä ja tässä ohjeessa.

 KYSY IHMEESSÄ, JOS PHOTOBUCKETISTA ON JOTAIN KYSYTTÄVÄÄ! :)

xoxo iltsu

Kuvagadget, josta pääsee johonkin linkkiin, muttei sille tarvitse laittaa otsikkoa

Melko monille on tullut ongelmia kuvagadgettia lisätessään; gadgetille
pitäisi laittaa otsikko, jotta gadgetin voisi tallentaa. 

Tällä tavalla sinun kuitenkaan ei tarvitse laittaa gadgetillesi otsikkoa.
Tässä vielä linkki postaukseen, jossa käsittelen Photobucketia. 

1. Lataa kuvasi esim. Photobucketiin (itse suosittelen tätä). Jos sinulla
ei ole Photobucketissa tiliä, luo se. Tulet luultavasti hyötymään tilistäsi.

2. Blogger -> ulkoasu -> lisää gadget -> HTML/JavaScript
Lisää tyhjään kenttään alla oleva koodi:

<a href="tähän tulee linkki, jonne kuvaa klikkaamalla pääsee"><img src="tähän tulee kuvan osoite Photobucketista" /></a>

Punaiselle tekstille laitat kuvan osoitteen, jonne pääsee,
kun klikkaa kuvaa. Siniselle tekstille laitat
kuvan osoitteen Photobucketista.

3. Tallenna & Tallenna asettelu.

LISÄYS: MITEN MUUTAN TÄLLÄ TAVOIN LISÄTYN KUVAN KOKOA?

Toimi siis ihan samalla tavalla, mutta kohdassa 2 lisää tässä postauksessa aiemmin esitellyn koodin tilalle tämä koodi:

<a href="tähän tulee linkki, jonne kuvaa klikkaamalla pääsee"><img src="tähän tulee kuvan osoite Photobucketista" width="40px" height="auto" /></a>
 Vihreää lukua 40 voi muuttaa. Kyseinen kohta kertoo kuvan leveyden sivupalkissa.

Toivottavasti tämä toimi!

xoxo iltsu

perjantai 11. lokakuuta 2013

Oikeaan alareunaan ilmaantuva "nuoli" sivua scrollattaessa alaspäin

En keksinyt tälle parempaa nimeä, sillä rehellisesti sanottuna en
tiedä, mikä tämän efektin nimi on. Osa teistä on kuitenkin
varmaan törmännyt blogeissa oleviin nuoliin, kolmioihin tms., jotka
ilmestyvät blogin oikeaan alareunaan sivua scrollattaessa alaspäin. 
Ja siitä kun klikkaa, sivu scrollautuu nopeasti ylöspäin.

JA MITEN SAAT BLOGIIN?

1. Sinulla täytyy olla kuva, mieluiten läpinäkyvällä
taustalla varustettu. 

2. Lataa se johonkin kuvapalveluun, vaikka Photobucketiin.

3. Ulkoasu -> lisää gadget -> HTML/JavaScript.

4. Lisää tyhjään kenttään alla oleva koodi:

<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: 14px; right:14px; cursor:pointer;font:14px arial;'><img src='www.kuvasikaunisosoite.fi' width="45px" height="55px"/></a>

5. Lisää kuvasi osoite sille tarkoitetulle paikalle. Pikselilukuja voit
jälleen kerran muokata mieleiseesi. Ne vaikuttavat kuvan
kokoon sekä marginaaleihin (miten kaukana kuva on esim. 
vasemmasta reunasta...).

6. Lopuksi tallenna! Suosittelen laittamaan kyseisen gadgetin
alimmaksi gadgetiksi, jotta juttu toimisi parhaiten.

xoxo iltsu

Erotin postausten väliin

Tässä havainnollistava kuva erottimesta postausten välissä:


----
Olen kokenut erottimen hyväksi tavaksi erotella postaukset,
ja omasta mielestäni se on kiva yksityiskohta blogissa etenkin,
jos postauksia on paljon, ja marginaalit (tarkoitan, että
postaukset ovat liki kiinni toisissaan) ovat pienet.

JA MITEN SELLAISEN SAAT BLOGIISI?

1. Sinulla täytyy olla kuva, jonka haluat laittaa erottimeksi. Omani
olen ladannut laittomasti googlesta (hjuupsista...) hakusanalla
"dividers". Erottimen voit tehdä itse tai ladata jostain, mieluiten
luvallisesti, mutta muistakaa: Googlen kuvahausta
ladatut kuvat ovat aina laittomasti ladattuja, ellei
toisin mainita.

2. Seuraavaksi sinun tulee ladata kuvasi johonkin kuvapalveluun.
Tässä suosittelen lämpimästi Photobucketia. Se on helppo palvelu
aloittelijallekin *kokemusta on... :D

3. Kun olet ladannut kuvasi Photobucketiin tai johonkin muualle, mene
malli -> mukauta -> lisäasetukset -> lisää CSS.
Lisää alla oleva koodi sinne: 

.post{
background: url(tähän tulee kuvan osoite!!!!);
background-repeat: no-repeat;
background-position: bottom center;
margin:0 0 40px;
padding-bottom: 70px;
}

Sitten vain liität kuvan osoitteen sille tarkoitetulle paikalle 
& muokkaat välejä (punaiset numerot) mielesi mukaan, 
jotta silmäsi tykästyy.

xoxo, iltsu

Pystykuvat samanlevyisiksi vaakakuvien kanssa

Monet bloggaajat tuskailevat tämänkin ongelman kanssa; miten saada
vaaka- että pystykuvista samanlevyisiä. Itse asiassa se ei ole vaikeata.

Aiemmassa postauksessa *click* käsiteltiin kuvan koon muuttamista.
Jotta saat vaaka- ja pystykuvista samanlevyisiä, sinun 
tulee osata muuttaa kuvan leveys.

JA ASIAAN...

Muutat Paintissa vain jokaisen kuvan leveydeksi saman, 
eli vaaka- ja pystykuvien Paintin vaaka-koko on sama, 
esim. 750, jota minä käytän lifestyleblogini *click*
kuvien leveytenä. Voit tietenkin itse päättää
omien kuviesi leveyden.

Asia ei ole sen vaikeampi. :)

xoxo, iltsu

keskiviikko 9. lokakuuta 2013

Kuvakoon muuttaminen Paintilla

Monet bloggaajat tuskailevat kuvan koon muuttamisesta. Miten blogin kuvien koon
pystyisi itse määrittämään? Minäpä kerron.

Itse muokkaan kuvieni koon aina Paintilla, sillä olen sen mieltänyt
helpoimmaksi & nopeimmaksi tavaksi.

1. Olet avannut kuvan Paintiin. Se on kuitenkin liian iso.



2. Klikkaa kohtaa "Muuta kokoa", jonka jälkeen avautuu laatikko. Alla oleva kuva saattaa olla hieman sekava, pahoittelut siitä! Se kuitenkin kertoo koko jutun. 
Kuvapisteet -> säilytä kuvasuhde -> vaaka
ÄLÄ muuta pystykokoa, tai ainakin itse teen kuvan koon muuttamisen aina
vain käyttämällä vaaka-kohtaa. Sitten paina "ok".



3. Ja tadaa, kuva on sopivan kokoinen! 


Huomaathan, että jos laitat kuvan leveyden Paintilla esim. kokoon 300, 
tallennat, mutta jälkeen päin haluatkin kuvasta suuremman, vaikka 
leveyden kokoon 700, kuvasta tulee pikselimössöä. Tee siis kuvan 
koon muuttaminen aina vähitellen suuresta pieneen, ei pienestä suureen, 
jos kyseessä on Paint!

xoxo iltsu

Harmaat pallot pois blogin alaosasta

Tällaisia palloja tarkoitan:

 Lisää CSS:ään alla oleva koodi:

.blog-pager {
  background: none;
}

xoxo iltsu 

Harmaan katkoviivan poistaminen blogin alaosasta + välin pienentäminen

Alla oleva kuva toimii havainnollistavana:


Lisää tämä koodi blogisi CSS:ään:

.footer-outer {
  border-top: 0px;
}

 Jos sinua ärsyttää "tyhjä" väli, joka jää blogin alaosaan
"Etusivu"-kohdan alapuolelle, voit poistaa sen tällä koodilla,
joka siis sekä poistaa harmaan katkoviivan että välin:

 .footer-outer {
  border-top: none;
  margin-top: -100px;
}


xoxo, iltsu

Tekstin otsikon liukuvärjääminen hiiren vietäessä päälle

Aivan, en keksinyt tälle koodille parempaa otsikkoa :D. 
Tarkoitan linkkiefektiä (johon olette mahdollisesti
joissain blogeissa jo törmänneet), kun linkin väri
liukuvärjäytyy yleensä hitaasti joksikin toiseksi väriksi. 
Tämä koodi toimii kuitenkin vain otsikossa (sillä eräs samaan sarjaan 
kuuluva koodi aiheuttaa hankaluuksia otsikolle yms., mikä siis 
laittaisi efektin kaikkiin linkkeihin). Olenpa sekava tänään.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS
Lisää CSS:ään tämä koodi:
h3.post-title a:link {
text-decoration:none;
color: #000000;
transition: 0.6s;
-moz-transition: 0.6s;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
}

h3.post-title a:hover {
text-decoration:none;
color: #c9c9c9;
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
-o-transition: 1.5s;
}


 Taas, tälläkin kertaa, punaiseksi värjättyjä ja lihavoituja kohtia
voit muuttaa oman mielesi mukaan. Hashtagin jälkeiset luvut (numero-
kirjainyhdistelmät) ovat värikoodeja (= koodi, joka on tietty väri). 
Muuta niitä mieleiseksi. TÄMÄ linkki vie HTML Color Codes -sivustolle,
jossa voit testailla väripaletilla värejä & niiden koodeja, 
jonka jälkeen kopioida koodin ja liittää hashtagin perään.

Jos jäi jotain kysyttävää, kysy ihmeessä! :)

xoxo iltsu