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

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

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

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

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