torstai 19. joulukuuta 2013

HTML-värikoodit / HTML Color Codes / blogin värit

HTML Color Codeista (joista yleisemmin puhutaan heksakoodeina)
minulla on paaljon asiaa. Ne tarkoittavat koodeja, jotka
"muuntautuvat" joksikin tietyksi väriksi. Jokaisella värisävyllä
on tismalleen oma heksakoodi, esimerkiksi #ffffff, joka
vastaa väriä valkoinen. Heksakoodien edessä on #-merkki, ja 
heksakoodeja käytetään esimerkiksi juuri blogin koodeissa,
jos halutaan määrittää jokin tietty asia tietyn
väriseksi.

MISTÄ LÖYTÄÄ HEKSAKOODEJA?

Heksakoodeja löytyy nykyään monilta eri sivustoilta,
joissa on väripaletti, jolta voi etsiä haluamansa värin. 
Itse suosin Html Color Codes -nimistä internetsivua,
jolta on hyvin helppo sivua scrollaamalla alaspäin 
valita väripaletilta juuri se mieluinen väri ja kopioida
värin heksakoodi, jonka jälkeen koodin voi lisätä
tarvitsemaansa juttuun.

 KÄYTTÖ

Päätinpä tehdä pienen sepostuksen heksakoodien käytöstä, mm. väripaletista, koska haluan ilmaista blogissa ohjeet mahdollisimman selvästi, jotta kaikki ymmärtävät ne :)   

Ohjeet ovat Html Color Codes -sivustoa varten.

Oranssilla ympäröidystä lokerosta voit hiirtä vetämällä etsiä mieleisesi sävyn.
Keltaisella ympäröidystä lokerosta voit vetää hiirellä mieluisesi värin, jonka jälkeen mennä oranssiin kohtaan ja etsiä mieluisesi sävyn.
Viininpunaisella ympäröidyssä lokerossa näkyy valitsemasi värin sävy.
 Punaisella ympäröidyssä lokerossa on värisävyn heksakoodi, jonka voi kopioida. 
Mustalla ympäröityyn lokeroon voit syöttää jonkin heksakoodin, jonka jälkeen painaa Go-nappia. Siten näet, mikä väri on kyseessä. 

Heksakoodeja tarvitaan monissa koodeissa - tämä lienee jo itsestään selvää (?). Otetaan esimerkkikoodiksi vaikka navigaatiopalkin värin vaihtamiseen tarvittava koodi:

#navbar-iframe {
background:#ffffff;
}

 Navbar-ifreme -kohta tarkoittaa navigaatiopalkkia, ja sen perässä
toisella rivillä background sen taustaa, jonka yhteyteen on liitetty
väri #ffffff, joka vastaa siis valkoista väriä. 
Muistakaa AINA, että heksakoodin edessä pitää olla #-merkki
eli älkää missään tapauksessa poistako sitä vaihtaessanne
väriä (!!). 


MUUT VÄRIT, JOTKA SOPIVAT KOODEIHIN

Jos väripaletilta värin valitseminen tuntuu värinpaljouden takia
ylitsepääsemättömän hankalalta, voi värin onneksemme
valita myös käyttämällä värin englanninkielistä nimeä.

Jos haluaisi esim. yksinkertaisesti peruspunaisen vaikkapa
navigaatiopalkin väriksi, aiemmin esitetty koodi näyttäisi tältä:

 #navbar-iframe {
background:red;
}
 
Alla värejä, jotka itse olen kokeillut toimiviksi:

red - pink - blue - yellow - green - black - white - gold - silver
 grey - brown - violet

Lisäämällä ylläolevan sanan eteen sanan light tai dark, saat
väristä vaaleamman tai tummemman (ei käy kaikkiin!). Huomioi,
että oikeinkirjoitusasu on yhteen, esim. lightpink. Pink ja lightpink
ovat muuten erivärejä, joista lightpink on tummempi o.o

***************

Jotain kysyttävää liittyen väreihin/html-värikoodeihin?
Kysy ihmeessä! Vastaan mielelläni!(:

xoxo, iltsu

tiistai 17. joulukuuta 2013

Navigaatiopalkin värin muuttaminen

Tämän koodin kanssa minulla oli hankaluuksia saada se toimimaan
tässä blogissa; kynsiblogissani (olen lopettanut) koodi kyllä toimi,
ja lopulta sain sen toimimaan tässäkin blogissa. Kyseessä on
siis navigaatiopalkin värin muuttaminen, ja tähän blogger
ei tarjoa valmiina kuin muutaman värin Ulkoasu-välilehdessä.
Malli -> Mukauta -> Lisäasetukset -> CSS
Lisää CSS:ään alla oleva koodi:
#navbar-iframe {
background:#ffffff;
}
 HTML-värikoodia (koodissa valmiina punaiseksi värjätty f-sarja,
joka on värinä valkoinen) voi muuttaa mieleisensä mukaan
miksi tahansa HTML-värikoodiksi. 
Klikkaa tästä päästäksesi
Color Codes -sivulle, jonka paletista voi päättää mieleisensä
värikoodin
********** 

Kertokaa ihmeessä, toimiko koodi teillä!
ps. muutin ulkoasusta hieman jouluisemman, hope you like! :)
xoxo iltsu

keskiviikko 27. marraskuuta 2013

Gadgetien otsikoiden keskittäminen

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

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

.sidebar h2{
text-align: center;
}

Sitten vain painat enteriä ja tadaa, pitäisi toimia!
Muista toki tallentaa.

xoxo iltsu


maanantai 11. marraskuuta 2013

Tekstin otsikon alleviivaantuminen hiiren vietäessä päälle

Kyseessä on siis tekstin otsikon linkin hover-efekti; kun hiiren vie
otsikon päälle, teksti alleviivautuu keskeltä reunoille.

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

h3.post-title a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}

h3.post-title a:after {
content: '';
display: block;
margin: auto;
height: 2px;
width: 0px;
background: transparent;
transition: width .7s ease, background-color .7s ease;
}

h3.post-title a:hover:after {
width: 100%;
background: #c9c9c9;
}

 Siniseksi värjättyä heightin arvoa muuttamalla isommaksi viivan
paksuus kasvaa, ja numeroa muuttamalla pienemmäksi viivasta
tulee ohuempi.

Punaiseksi värjätty koodin osa on taas värikoodi, jonka tilalle
voit muuttaa jonkin koodin täältä.

Jos haluat efektin kaikkiin linkkeihin, poista jokaisen koodin 
alusta kohta h3.post-title.

xoxo iltsu

lauantai 9. marraskuuta 2013

Maalausvärin muuttaminen

Tekstin maalausvärillä tarkoitan tätä:

Maalausväri on normaalisti ainakin omasta mielestäni tylsä sininen,
joten värin vaihtaminen toiseen on varmasti hyvä vaihtoehto,
joka miellyttää silmää. Suosittelen tätä lämpimästi, kunhan
ette laita mitään silmiä kirveltäviä neonvärejä, jos toivotte
blogiinne lukijoita.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

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

::-moz-selection {
color:#ffffff;
background: #c9c9c9;
}

::selection
{
color:#ffffff;
background: #c9c9c9;
}

Kun lisäät nuo koodit, värin pitäisi näkyä kaikissa selaimissa. 
Erivärisiksi värjättyjä kohtia voi taas muokata lisäämällä
#-merkin jälkeen jonkun HTML-koodin värin vaikkapa täältä

Punaiset kohdat tarkoittavat tekstin väriä sen maalatessa. 
Valmiissa koodissa väri on valkoinen. (kuten kuvassa)
Siniset kohdat taas kertovat maalausvärin värin, joka valmiissa
koodissa on harmaa. (kuten kuvassa)

 HUOMIOITHAN, että sekä punaiset että siniset kohdat ovat koodissa
kaksi kertaa. Maalausväri & tekstin väri siis täytyy laittaa koodiin
kaksi kertaa :)

xoxo iltsu


torstai 7. marraskuuta 2013

Valkoisen YouTube-palkin tekeminen

Kyseessä siis tällainen palkki:

Justin Bieber - Heartbreaker


1. Mene YouTubeen, klikkaa Jaa & sen jälkeen Upota.
2. Ruksita "Käytä vanhaa upotuskoodia" -kohta & kopioi
koodikenttään ilmestynyt koodi.

  
3. Liitä koodi postauksen HTML-koodiin. Etsi koodista
kaksi tällaista pätkää: version=3&hl=fi_FI,
poista ne & lisää tilalle alla oleva koodi:
 version=2&loop=1&showinfo=0&showsearch=0&color=ffffff&color1=0xffffff&color2=0xffffff&color=ffffff


 4.  Muuta kohtia height & width mieleisiksesi. 
Height: korkeus, palkille hyvä korkeus esim. 25
Width: leveys, hyvä olla sama leveys kuvien kanssa.
Tässä ohje kuvien leveyden määrittämiseen.

Alla olevassa kuvassa on esimerkki, miltä koodi voisi näyttää. Vihreällä
olen alleviivannut kohdassa 3 lisätyt koodit ja punaisella widthin ja
heightin.

 
5. Esikatsele & julkaise.

 JOS haluat keskittää palkin, lisää koodin alkuun ja loppuun <center>,
jolloin koodi näyttää tältä: 


xoxo, iltsu


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

lauantai 28. syyskuuta 2013

Tekstin otsikon ja bannerin välin pienentäminen

Jos olet poistanut blogistasi päivämäärän (niin kuin minä tästä blogista), saatat
harmitella suurta väliä, mikä on tekstin otsikon ja bannerin välissä. Ei huolta, sen
saa poistettua tällä koodilla, jonka minä itse keksin muita koodeja hyödyntämällä.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

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

h3.post-title{
margin-top: -30px;
}

Punaiseksi värjättyä lukua pystyt muuttamaan mieleisesi mukaan.
Mitä pienempi luku on, sitä pienempi väli on. 

Huom! Koodi pienentää myös tekstin otsikon ja alatunnisteen väliä etusivulla!

Ilmoitathan, jos koodi ei toimi! En nimittäin tiedä, toimiiko koodi kellään
toisella, mutta ainakin omassa blogissani se toimii. 

xoxo iltsu

Päivämäärän poistaminen blogista

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

.date-header {display :none !important;}

Koodi poistaa blogista päivämäärän. 

xoxo, iltsu

Postauksen alatunnisteen keskittäminen

Postauksen alatunnisteella tarkoiteaan alla olevassa kuvassa punaisella
rengastettua aluetta:


Alatunniste on siis postauksen alapuolella oleva "lokerikko" tai "tekstiryhmä".
 Alatunniste on normaalisti vasemmalla reunalla, ja jos sen haluaa keskittää,
tarvitaan koodia.

 Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

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

.post-footer {
text-align: center;
}  

Esikatsele & tallenna, toimiiko. Huomioikaa, että koodi keskittää vain
alatunnisteen, ei esimerkiksi kommenttiboksia.

xoxo, iltsu

"5 stalkkeria paikalla" -gadget blogiin

KOODI UUDISTUNUT!

Olette mahdollisesti nähneet blogien sivupalkissa tms. 
"5 stalkkeria paikalla" tai "3 katselijaa paikalla" -juttuja. 
Jos ette, alla oleva kuva havainnollistaa gadgetia.


Omasta mielestäni kyseinen sivuelementti on kiva yksityiskohta gadgeteissa. 
Se on helppo laittaa blogiin lukemalla nämä ohjeet;

1. Mene tähän osoitteeseen: http://freehostedscripts.net/onlinecounter/
 
2. Scrollaa sivua alaspäin. Sinun pitäisi päästä alla olevan kuvan kohdalle (huom. sivulla ei ole noita värilaatikoita). 
Vihreällä kehyksellä varustettuun laatikkoon kirjoita se teksti, minkä haluat näkyvän, jos blogissasi on yksi stalkkeri.
Vaaleanpunaisen kehyksen sisään laita teksi, jonka haluat näkyvän, jos blogissasi vierailee kaksi tai useampi henkilö.
Paina sinisellä kehyksellä ympäröityä laatikkoa, kun olet valmis. 
4. Sitten vain kopioit laatikkoon ilmestyneen koodin.

LISÄÄMIINEN BLOGIIN
1. Mene ulkoasuun -> lisää gadget -> HTML/JavaScript


2. Kun olet klikannut HTML/JavaScript -kohtaa, pääset sivulle, jonka kenttä sinun tulee täyttää alla olevalla koodilla. Liitä tänne kopioimasi koodi. 
Gadgetille ei kannata laittaa otsikkoa, mutta jos välttämättä haluat, voit kokeilla sitä. Kun olet valmis, tallenna.


Toivottavasti koodi toimii! :)

xoxo, iltsu