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;}
.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;
}
border:none;
}
.tabs-inner .section:first-child ul {
border:none;
}
.tabs-inner .widget ul {
background: none;
_background-image: none;
border:none;
}
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! :)
Tästä oli paljon apua, vaikka vähän tajusinkin jo siellä edellisen postauksen kommenteissa!:) Mulla on sulle taas kysymys:D Nyt kun lisäsin mun blogiin nuo välilehdet tuonne ylös, niiden väleihin tuli tuollaiset valkoiset viivat. Olen joskus saanut ne pois, mutta juuri nyt en millään muista miten:D Osaisitko auttaa asiassa?
VastaaPoistaKiva että tästä oli apua :-)! Haha :D
PoistaLaitoitko kaikki tässä postauksessa olevat koodit CSS:ään? Jos nimittäin et laittanut, syy lienee siinä. (.tabs-inner .widget li a { -koodi). Koska blogisi on atm yksityinen, en pääse katsomaan, mistä ongelma kiikastaa, mutta veikkaisin että tästä.
Ihanaa, että jaksat panostaa tähän apublogiin näin paljon! Nämä yksinkertaiset ja monipuoliset ohjeet helpottavat niin paljon oman blogin ulkoasun muokkaamista. Kiitos kiitos kiitos! :)
VastaaPoistaIhanaa, että blogistani on iloa niin monille! Tähän nimittäin valuu aika paljon aikaa. :) Kiitos vielä piristävästä kommentistasi <3
PoistaHeips! Osaisitkohan auttaa tai tehdä omaa postausta tälle aiheelle.. Haluisin saada erilaisen navigointipalkin blogiini (malli simple) ja olen yrittänyt html-koodailla ja saada koodeja toimimaan, mutta ei vaan onnistu! :D Alla olevissa linkeissä näkyy haluamani navigointipalkin ohjeet englanniksi, eli joiden avulla en ole onnistunut. Ja toinen linkki on blogiini.
VastaaPoistahttp://thebloggingbrew.com/how-to-make-a-sticky-navigation-bar-on-blogger/
http://sanniautiorinne.blogspot.fi/
http://www.thenextepisode-katarina.com/ (esimerkki siitä, millaisen navigointipalkin haluaisin)
Heippa! Mun onkin pitänyt jo jonkin aikaa toteutella aiheesta postausta, on vaan unohtunut :D Teen postauksen tässä ihan lähipäivinä ellen jo tänään :) Tätä onkin toivottu paljon!
PoistaMoikka! Olisiko mahdollista kirjoittaa postaus, miten saa Suositut tekstit -gadgetin postausten pikkukuvat pyöristettyä? Jos siis vain osaat, jaksat ja haluat neuvoa siinä, ei ole minulle niin tärkeää mutta saisin vain ulkoasua hienosäädettyä sillä :)
VastaaPoistaMoi Jenna! On mahdollista kirjoittaa aiheesta postaus :-) Mulla on kuitenkin nyt niin paljon postauksia jonossa, että ko. postauksen julkaisemiseen voi mennä tovi, joten annan sulle tähän koodin, jolla saat ne pyöristettyä:
Poista#PopularPosts1 img {
border-radius: 100px;
}
Tuota lukua 100 voi muuttaa :-)
Kiitos paljon avusta! :)
PoistaMiten blogin ylävälilehtien taustan saisi kokonaan läpinäkyväksi?
VastaaPoistaMoi! Lue tämä postaus:
Poistahttp://blogikoodeja.blogspot.fi/2014/09/valilehtien-taustavari-muut-harpakkeet.html
Heippa!
VastaaPoistaOlen tehnyt blogiini uuden bannerin, jonka tausta on läpinäkyvä. Simple mallissa tausta kuitenkin on valkoinen. Millä koodilla saisin bannerin taustan läpinäkyväksi, kun banneri kuitenkin ilmeisesti tarvitsee olla simple mallissa, jotta se näyttää fiksulta (bannerin alareuna valkoinen). Banneri ei tällä hetkellä näy blogissani. Toivottavasti ymmärsit asiani ja osaat auttaa :)
http://siivetonpegasos.blogspot.fi/
Moi! Tällä koodilla saat Simple-mallin bannerin taustan pois:
Poista.content-inner {
background-color: transparent;
}
.header-outer {
background: none;
_background-image: none;
}
.main-inner{
background:white;
}
Moikka, tosi kiva ohje!
VastaaPoistaEn tiedä, olenko vähä-älyinen vai mitä, mutta kuinka banneriin sitten saa tekstiä? :'D
Hei!
PoistaEt suinkaan! En vaan aivan tajua, mitä tuolla haet. Vaihtoehtoja on useita (esim. javascriptit). Haluaisitko pidemmän tekstin banneriin vai ihan vain lyhyen sepostuksen? Onko kohdalla väliä?
Mulla ei vaan tapahdu mitään vaikka molemmat koodit laittaisinkin?
VastaaPoista> jellonat.blogpot.fi
Sama ongelma mullakin D:
Poistawithprinssi.blogspot.com
Hei! Sain sittenkin toimimaan :D! Muista painaa enter sen jälkeen kun olet laittanut koodin ;)
PoistaJuu hyvä, täällä tulikin jo neuvo :)!
PoistaMulla ei toimi, vaikka enter. katrikuvat.blogspot.com
Poistahei! Tarvisin kiireellisesti apua, mulla meinaan nousi koko juttu eli postauskin bannerin päälle, kun sain aseteltua sivut oikealle kohdalle. Mitä teen? Blogi on sonettaeveliina.blogspot.fi
VastaaPoistaMoi! Olet ilmeisesti saanut ongelman selvitettyä?
PoistaMullakin nousee koko postaus bannerin päälle.. Ainakin puhelimen ja ipadin internet versiolla
Poistapikkuponiprinssi.blogspot.fi
Vielä se, että minun perus windows koneella näyttää aivan normaalilta, mutta iphonen, ipadin ja meidän applen pöytätietokoneella näyttää että postaukset ja gadgetit menevät bannerin päälle
PoistaHeh en tarvitse enään apua :)
PoistaOkei :)! Hienoa, että sait ongelman ratkaistua omin käsin!
PoistaMulla on tää sama ongelma, mitä teen?
PoistaHei! Oon ihan käsi näiden juttujen kanssa ja oon lopettanut monesti bloggaamisen koska en ole ollut tyytyväinen blogin ulkoasuun :D-
VastaaPoistaOsaisitko neuvoa kuinka saisin blogistani ihan simppelin valkoisen, missä kaikki on siististi tasattu, esim. tässä blogissa :http://janninahakola.blogspot.fi/. Tosin ton bannerin tilalle haluaisin jonkun kuvan tekstin kera, mutta en saa asettumaan kuvaa siihen tasaisesti ja hienosti. Toivottavasti osaat auttaa! :)
Moi! Hyvä, kun uskalsit rohkeasti tulla pyytämään jelppiä :)!
PoistaVINKKEJÄ
1. Keskitä gadgetit ja blogitekstin otsikko (ja päivämäärä):
http://blogikoodeja.blogspot.fi/2014/12/gadgetien-ja-blogiarkiston-keskittaminen.html
http://blogikoodeja.blogspot.fi/2013/11/gadgetien-otsikkojen-keskittaminen.html
http://blogikoodeja.blogspot.fi/2013/09/paivamaaran-otsikon-keskitys.html
2. Käytä taustana valkoista ja säädä kaikkien tekstien väriksi klassinen musta.
3. Banneri (voi tehdä jollain kuvankäsittelyohjelmalla, jolla lytätään banneriin teksti)n saa keskittymään tästä postauksesta löytyvän koodin numeroa muuttamalla:
http://blogikoodeja.blogspot.fi/2013/09/bannerin-keskittaminen.html
Hei! :) Minulla on bannerissa valmiina teksti, onko bloggerissa mahdollista saada kansikuvaan silleen, että sitä painamalla pääsee esimerkiksi Facebookkiin ? Olen siis muokannut koulussa Illustatorilla bannerin omalla mieleiselläni fontilla, joten onnistuisiko se mitenkään? Tässä vielä blogini osoite; http://mirandlife.blogspot.fi/
VastaaPoistaKiitos paljon, jos osaat auttaa!
Terveisin; Mira Ps. Oon saanut tästä sivustasi todella paljon hyödyllisiä vinkkejä ja toivon, ettet poista tätä blogiasi. Ihan älyttömän hyvä sivu ja paljon hyödyllisiä vinkkejä! :)
Mooi :)! Tarkoitatkohan kansikuvalla banneria? Siis jotain kuvaa painamalla Facebookiin? On takuulla mahdollista, olen vain pahoillani etten oikein ymmärtänyt että mitä kuvaa painamalla :D Osaisitko selittää vähän tarkemmin?
PoistaSiis jos haluat, että banneria klikkaamalla pääsee Facebookiin, toimi näin:
1. Lataa haluamasi banneri Photobucketiin tms. kuvapalveluun.
2. Lisää CSS:ään tämä koodi:
#header{
display:none;
{
3. Katso täältä kohdat 4, 5 & 6:
http://blogikoodeja.blogspot.fi/2015/04/mouseover-banneri-kun-hiiren-vie.html
4. Lisää JavaScript-lokeroon tän postauksen koodi:
http://blogikoodeja.blogspot.fi/2013/10/kuvagadget-josta-paasee-johonkin.html?showComment=1430127755729#c2531676860273087386
5. Pitäis olla valmista! Monimutkanen ohje, mutta toivottavasti sait kiinni punaisesta langasta :)!
Hei kiva kuulla enkä tuu poistamaan - vaikka joskus lopettaisin vastailun täällä, tulen silti pitämään blogin netissä, koska täällä on hirveästi koodeja ja moni saa täältä jatkuvasti apua ongelmiinsa :)!
Tästä oli tosi tosi tosi paljon apua, kiitos paljon! (:
VastaaPoistaMukava kuulla :)!
PoistaMulla nousee kans koko postaus jne bannerin päälle :/ Tai siis mun kaverin blogissa nousee ja mulla ei, miksiköhän?
VastaaPoistaHmmhh, en osaa sanoa :/
PoistaMullakin nousee koko postaus ja muut bannerin päälle D:
VastaaPoistaPahoittelut, en tiedä :/
PoistaMulla nousee noi tekstit bannerin päälle enkä saa niitä mitenkään otettua pois siitä! Voitko auttaa?
VastaaPoistaMiten saisin nuo sivut tuonne navigointipalkin kohdille ?
VastaaPoistaTästä oli paljon apua, mutta haluaisin vielä nuo välilehtien otsikot boldattuna, miten sen saisi? ^-^
VastaaPoista-Kiitos!
Ongelma ratkaistu.
PoistaHei, miten saisin muun blogin alemmas, ja pidettyä nuo välilehdet samalla paikalla. Kun nyt tuo päivämäärä esimerkiksi on hieman liian korkealla :/
VastaaPoistaporinponitalliry.blogspot.com
moikka!
VastaaPoistaoonko ihan tyhmä, jos kysyn miten bannerikuva tehdään banneriin?:D
Moi, mulla kun laitan nuo koodit CSS:ään, nousee muukin blogi mukana ja bannerin alaosa peittyy sen alle :/ blogi tällä hetkellä yksityinen eli en pysty linkkaamaan sitä. :(
VastaaPoistahttp://blogikoodeja.blogspot.fi/2013/09/paivamaaran-ja-bannerin-valin.html
Poistaauttaako tämä? muutat vain tuota punaista lukua plussan puolelle! :)
ja sit jos se sivupalkki on vieläkin liian ylhäällä, niin sain oman alemmas ainakin tällä CSS koodilla:
Poista.sidebar {
margin-top: 245px;
}
ja tuota lukua 245 voi siis muuttaa :) itse laitoin siihen saman kuin tuohon aiemmin linkkaamaani bannerin ja päivämäärän välinsäätö lukuun :p