Sivut/välilehdet banneriin

*Postauksessa oletetaan, että olet lisännyt blogiisi ylävälilehdet eli sivut bannerin alle

Tähän ei tarvita HTML-koodin muokkausta, vaan homma hoituu näppärästi tutun ja turvallisen CSS:n avulla. Eli välilehdillä bannerissa tarkoitan tätä:

MITEN OMAAN BLOGIIN?

1. Tee bannerikuva, eli siis banneri, johon haluat "linkkipalkin" eli välilehdet. Minä tein esimerkkibanneriin valkoisen suorakulmion eli palkin, johon halusin laittaa välilehdet. Tältä tässä vaiheessa bannerini näytti:

2. Lisää banneri blogiisi. Jos et osaa lisätä banneria, lue tämä postaus.

3. Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit (violetilla):

.PageList {text-align:center !important;}
.PageList {text-shadow: 0px 0px 3px black  !important;}
.PageList {letter-spacing: 2px; !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList {margin-top: -347px !important;}
.PageList {margin-right: 70px !important;}
.PageList {text-transform: uppercase; !important;}

Jos haluat välilehtien tekstien taakse varjostukset, pidä koodin toisella rivillä oleva 3 ja black (voit muuttaa sen väriä esim. pink, grey, blue...) paikoillaan. Jos et halua varjostuksia, poista koko toinen rivi (.PageList {text-shadow: 0px 0px 3px black  !important;}) koodista. 

Tässä kuvat, miltä teksti näyttää ilman varjostuksia ja varjostuksilla:

(// pahoittelut, kuvat ovat jostain syystä erittäin epäselviä)

Kolmas rivi (.PageList {letter-spacing: 2px; !important;}) tarkoittaa letter-spacingia eli k i r j a i n t e n   v ä l i ä  toisistaan. Jos et halua väliä, laita numeron 2 paikalle numero 0. Jos haluat välin, voit katsoa, minkä numeron välistä tykkäät eniten. Kokeile esim. lukuja 1-5.

Neljäs rivi (.PageList {margin-top: -347px !important;}) kertoo välilehtien korkeuden eli sen, miten ylhäällä ne ovat blogissa, mille korkeudelle ne bannerissasi sijoittuvat. Voit muuttaa lukua -347 mieleiseksesi.

Viides rivi (.PageList {margin-right: 70px !important;}) kertoo sen, missä suhteessa välilehdet ovat reunoihin verrattuna, mutta samalla rivillä. Esim. ovatko välilehdet lähes keskellä vai täysin oikeassa reunassa. Lukua 70 voi taas siis muuttaa mieleisekseen.

Kuudes rivi (.PageList {text-transform: uppercase; !important;}) kertoo, että välilehtien teksti on CAPS LOCKILLA kirjoitettu. Jos haluat tekstin olevan "normaali", vaihda sanan uppercase tilalle none.

Lisäksi lisää CSS-boksiin seuraavat koodit:

.tabs-inner .section:first-child {
border:none;
}

.tabs-inner .section:first-child ul {
border:none;
}
 

.tabs-inner .widget ul {
background: none;
_background-image: none;
border:none;
}

.tabs-inner .widget li a {
display: inline-block;
font: 11px verdana;
color: #000000;
border:none; 

}

 11px tarkoittaa fontin kokoa - voit muuttaa kyseistä lukua. Verdana taas on fontin nimi, jonka voit muuttaa haluamaksesi esim. corsiva tai arial. Kuusi 0-numeroa taas kertovat fontin värin, joka on tässä tapauksessa musta. Voit muuttaa sitä haluamaksesi joko heksakoodeilla tai engl. kielisillä numeroilla. Blogin väreistä löydät postauksen täältä.

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: grey;
background-color: transparent;
text-decoration: none;
font-style: none;
}

Boldattu grey taas kertoo fontin värin, kun hiiri viedään tekstin päälle. Voit muuttaa sitä. 

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:active {
background-color: transparent;
text-decoration: none;
font-style: none; 

}

***

Toivottavasti tästä oli apua! :)

Mouseover banneri / kun hiiren vie bannerin päälle, banneri muuttuu

Tämä onkin vähän monimutkaisempi juttu, joten tämän postauksen suunnittelussa ja tekemisessä kului vähän enemmänkin aikaa. Mutta hei, siirrytään suoraan asiaan.

Mouseover banneri? Mikä se on?
Jos ette tämän postauksen otsikosta saaneet punaisesta langasta kiinni, mouseover banneri on siis banneri (mikä on banneri ja miten se lisätään blogiin -postaus), josta tulee erilainen, kun hiiren vie sen päälle. Alla esimerkkikuva siitä - viekääs hiiri kuvan päälle!



MITEN SAAT MOUSEOVER BANNERIN BLOGIIN?

1. Sinulla pitää olla kaksi samankokoista kuvaa - toinen kuvista on se, joka näkyy, kun hiiri viedään bannerin päälle ja toinen on se kuva, miltä haluat bannerin näyttävän silloin, kun hiiri ei ole bannerin päällä.

2. Lataa nuo kaksi kuvaa nettiin, esim. Photobucketiin.

3. Mene malli -> mukauta -> lisäasetukset -> lisää CSS:ään alla oleva koodi:

#header{
display:none;
{

Kyseinen koodi poistaa blogisi headerin eli Ulkoasusta käsin laittamasi alkuperäisen bannerin. Älä pelkää vanhan bannerin katoamista, nimittäin bannerittomuuden tilalle saat pian vähän eri tavalla laitetun bannerin!

4. Seuraavaksi mene ulkoasuun. Paina Ylätunnisteen alla olevaa kohtaa "lisää gadget". Jos blogisi Ulkoasussa ylätunnisteen alla ei ole palkkia, jossa lukee lisää gadget, valitse sitten blogitekstit-ruudun viereisestä palkista "lisää gadget" -kohta ja paina sitä.

5.  Rullaa alaspäin ja valitse "HTML/JavaScript".

Lisää sinisellä rengastettuun boksiin tämä koodi:

<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>

Laita tähän blogisi osoite -kohtaan blogisi osoite http-muodossa, eli kopioi se selaimesi yläreunassa olevasta linkkipalkista.

EI siis näin: www.blogikoodeja.blogspot.fi
VAAN NÄIN: http://blogikoodeja.blogspot.fi/

Muistathan, että jos latasit kuvat Photobucketin kautta, kopioit kuvien URL-osoitteet kohdasta Direct. Täällä lisää tästä asiasta.

6.  Jos lisäsit tuon äskeisen HTML/JavaScript-koodin sivupalkkiin etkä ylätunnisteen alle, siirrä se nyt ylätunnisteen alle vetämällä.

7. Valmista! Sitten vain painat "Tallenna".

MOUSEOVER BANNERIN KESKITTÄMINEN

Lisää kohdan 5 koodin alkuun <center> ja loppuun </center>. Koodi näyttää siis tältä:

<center>
<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>
</center>

Toivottavasti toimii! :)

Banneri näkyviin mobiiliversiossa

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

.mobile .header-outer{
display:block;
}

Ja muuta ilmoitusasiaa:
Oon saanut nyt tänään 24.1.2015 vastattua useaan kommenttiin, mutta silti aika moni kommentti odottaa vielä vastausta. Vastaan niihin vastaamattomiin tässä muutaman viikon sisällä sen mukaan, miten mulla on aikaa :)! Muistakaa, että kysyä saa aina, mutta vastaamiseen vaan saattaa mennä aika kauan :/

Ratkaisuja blogin pyöristämisestä koituviin ongelmiin

Blogin kulmien pyöristämisestä koituu monelle bloggaajalle ongelmia, joihin niksiä voi olla itse vaikea ratkoa. Viime aikoina mulle on tullut paljon kysyttävää juurikin pyöristämisen koodista johtuvista ongelmista. Ongelmia, joita kulmien pyöristämisestä saattaa koitua, on monia, joten olen koonnut tähän postaukseen ikään kuin ensiapupaketin, jolla voitte yrittää ratkoa ongelmaanne. Tässä vielä linkki kulmien pyöristämispostaukseen: http://blogikoodeja.blogspot.fi/2013/10/blogin-kulmien-pyoristaminen.html

ONGELMA 1 ~ BANNERISTA AIHEUTUNEET PUSKEVAT KULMAT

Kulmia pyöristäessä voi tulla ylläolevan kuvan osoittama tilanne vastaan: pyöristetyistä kulmista törröttää valkoiset (toki voi olla myös muunväriset) kulmat. Tässä tapauksessa törröttävät kulmat johtuvat bannerista, jonka kulmia ei ole pyöristetty. Pyöristyskoodi itsessään ei pyöristä banneria, joten suorakulmion muotoinen banneri voi helposti pompata esiin pyöristetyistä kulmista.

Miten korjata ongelma?

- Pyöristä bannerisi kulmat jollakin kuvankäsittelyohjelmalla, esimerkiksi netistä ladattavalla ilmaisella Photoscapella tai netissä käytettävällä Picmonkeyllä klikkaamalla kohtaa "Rounded Corners". IPiccyllä voit esimerkiksi poistaa kaikki ylimääräiset kohdat tekemällä ne läpinäkyviksi kohdasta "Erase Background". 

- Voit myös yrittää saada kulmat banneria siirtämällä / blogia leventämällä / molemmilla syrjään.

Kun lisäät tämän koodin CSS:ään, saat banneria siirtymään vasemmalle:

.header-outer {
margin-left: 20px;
}

Lukua 20 voit muuutaa mieleisesi mukaan.

Kun lisäät tämän koodin CSS:ään, saat banneria siirtymään alaspäin:

.header-outer {
margin-top: 20px;
}

Lukua 20 voit taas muuttaa mieleisesi mukaan. 

  

ONGELMA 2 ~ LÄPINÄKYVÄT KULMAT

Tähän ongelmaan olet saattanut törmätä, mikäli et käytä valkopohjaista Simplen mallia. En ole testannut, näkyykö ongelma muissakin kuin Simplen väripohjaisissa malleissa, mutta niissä tämä ongelma ainakin ilmenee, jos olet käyttänyt pyöristyskoodia. Vaikka valkea blogipohja onkin pyöristynyt, se on jättänyt jälkeensä haaleat, vähän läpinäkyvää muistuttavat kulmat. Ikävää, eikö?

Miten korjata ongelma?

- Malli -> mukauta -> lisäasetukset -> lisää alla oleva koodi CSS:ään:
 
.content-outer{
box-shadow: none;
}

ONGELMA 3 - VALKOISET, PIENEMMÄT KULMAT, JONKA SYYNÄ EI OLE BANNERI

On siis kyse ongelmasta, johon ei banneri vaikuta. Ainakin oikeaan kulmaan on jäänyt valkoinen, esiin puskeva kulma, jota ei saa banneria mihinkään suuntaan siirtämälläkään pois. Tämä ongelma ei tietojeni mukaan automaattisesti esiinny ainakaan Simplen valkopohjaisessa mallissa, mutta esimerkiksi sinipohjaisessa Simplessä kyllä.

Miten ratkaista ongelma?

- Hallintapaneeli -> Malli -> Mukauta (eli menet mallin suunnittelutyökaluun) -> Lisäasetukset -> Taustat -> Ylätunnisteen tausta -> Muokkaat sen läpinäkyväksi

Toivottavasti tästä oli apua! Lisäilen tänne ongelmia sitämukaa, jos niitä teille tulee. :-)

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 ja bannerin välin pienentäminen

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

.date-header {
margin-top: -15px;
}
 

Muokkaamalla punaiseksi värjättyä numeroa voit vaikuttaa siihen,

miten suuri päivämäärän ja bannerin väli on. Luku voi

olla sekä positiivinen että negatiivinen.

xoxo, iltsu

Bannerin keskittäminen

Lisää CSS:ään alla oleva koodin pätkä.

.header-outer {
margin-left:100px;
}

 Muuta punaiseksi värjättyä lukua eli pikselilukua niin, että saat bannerin keskelle. 
Huomaathan, ettet voi poistaa mitään muuta merkkiä kuin lilaksi värjättyä lukua.

TAI

.header-outer {
text-align: center;
}

xoxo, iltsu

Banneri: Mikä & miten lisätä blogiin

Banneri on blogissa yleensä ylin yksityiskohta, joka sisältää blogin nimen. Alla olevissa kuvissa on esimerkit bannereista. Kuten huomaatte, bannereita on erilaisia; on esimerkiksi teksti- ja kuvabannereita.

www.iltsunkynsiblogi.blogspot.fi 

Kynsiblogini, jonka lopetin. 

www.kiksun-photoblog.blogspot.fi

 Kaverini Kiian lifestyleblogi.

www.ohomoi.blogspot.fi

Oma lifestyleblogini.  

MITEN LISÄÄT BANNERIN BLOGIIN?

1. Mene Ulkoasu-osioon ja klikkaa ylätunnisteesta kohtaa "Muokkaa".

2. Ikkuna avautuu. Klikkaa "Tietokoneeltasi"-kohtaa ja siitä Selaa. Laita mainospaikaksi "Otsikon ja kuvauksen tilalla". Voit toki valita jonkun toisenkin vaihtoehdon, mutta yleensä bloggaajat suosivat ympyröimääni vaihtoehtoa.

3. Tallenna.

 4. Ja klikkaa vielä varmuudeksi kohtaa "Tallenna asettelu". Tämä ei ole pakollinen, sillä yleensä aina äsken esitelty tallennus riittää.

 Valmista! Kannattaa tarkistaa, että banneri istuu blogissa hyvin. Mikäli ei, tee ihmeessä hienosäätöjä.

xoxo, iltsu