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

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

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

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

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

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

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

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