Yläbannerikuvan muokkaaminen oikeaan kokoon

 

Moni on jo huomannut Bloggerin tehneet muutoksia, jotka aiheuttavat päänvaivaa. Omalla kohdalla näin tapahtua vaihtaessani yläbannerin kuvaa. Vaikka kuinka tutkin, kokeilin ja säädin, en saanut kuvaa oikean kokoiseksi. Se jysähti vasempaan ylälaitaan minikokoisena. Siitäkin huolimatta, että käytin ennen haluamallani tavalla näkynyttä ja asettunutta kuvaa.

Harmitti ja kiukutti suunnattomasti. Olisin tietenkin voinut palauttaa varmuuskopioidun blogin, mutta silloin olisin menettänyt ne muutamat postaukset, jotka olen tehnyt varmuuskopion jälkeen. Eikä sekään olisi tuonut tilanteeseen helpotusta jatkon kannalta.

Kerroin ongelmastani blogissa, jolloin jälleen kerran löytyi ihminen, joka pyyteettömästi halusi auttaa. Otin häneen yhteyttä sähköpostilla ja sain selkeän ohjeen, jonka perusteella ongelmani ratkesi. Sovimme auttajani kanssa, että julkaisen ohjeen blogissani helpottaakseni muita samassa tilanteessa olevia.

Tässä jutussa teille jakamani ohjeet antoi M.T. Ainasoja saman nimisestä blogista. Pitkän linjan tietotekniikka-ammattilaisena toiminut Ukkokultani yritti minua jeesata. Blogger-maailma ei ole hänelle tuttu ja niinpä ajauduimme väärille raiteille.

Lämmin kiitos tälläkin foorumilla MT:lle avusta ja erittäin selkeistä ohjeista. Pudotit kiven sydämeltäni.

 
BANNERIKUVAN KOON SÄÄTÄMINEN
CSS-koodin lisäämisen pitäisi onnistua näin:

CSS:ää lisätäkseen ei tarvitse (tai ei ainakaan aiemmassa versiossa tarvinut) mennä muokkaamaan blogin koko koodinäkymää, vaan sitä pystyi lisäämään ulkoasun muokkausvalikoiden kautta. Nykysysteemissäkin se näköjään löytyy, mutta vähän vaikeammin:

 
Ota ensin varmuuskopio:

Avaa Bloggerin hallintapaneelista "Teema". Avaa alasvetovalikko  klikkaamalla oranssin "Mukauta"-painikkeen oikeassa reunassa olevaa nuolisymbolia. Valitse alasvetovalikoista: "Varmuuskopioi". Tallenna varmuuskopio.

 

Samasta "Teema"-valikosta: avaa ulkoasun muokkaustila klikkaamalla oranssia "Mukauta"-painiketta (nimenomaan oranssia Mukauta-sanaa, eikä sen oikean puolen nuolta tai nuolella avautuvaa valikkoa). Tällöin vasempaan reunaan avautuu uusi valikko.

Selaa vasemman reunan valikkoa alas ja avaa "Lisäasetukset"-valikko.

"Lisäasetukset"-valikon otsikon alla heti ensimmäisenä olevasta alasvetovalikosta (jossa ensimmäisenä vaihtoehtona minulla näkyy valittuna "Sivun teksti"), löytyy viimeisenä kohtana "Lisää CSS" (eli vieritä kuvassa näkyviä vaihtoehtoja rohkeasti viimeiseen saakka).

  

Kun klikkaat "Lisää CSS", tulee esiin kirjoituskenttä, jossa lukee harmaalla (näkyy tässä kuvakaappauksessa lihavoituna) "Lisää yksilöity CSS". Kopioi siihen alla näkyvä koodinpätkä.

 

img#Header1_headerimg {
    width: 1200px !important;
    height: auto !important;

}

 

Oikealla näkyvässä esikatselussa pitäisi heti näkyä muutos. Jos se ei näy, koodi ei todennäköisesti toimi jostain syystä.

Jos se toimii, muista tallentaa (näytön oikeassa alakulmassa näkyy tallennus-painike).

Jos tämä ei toimi, CSS-koodi pitää ehkä lisätä HTML-muokkausnäkymässä, mutta kokeile ensin tätä.

 

Näiden ohjeiden avulla onnistuin bannerikuvani kanssa. Olen tallentanut kuvani kokoon 1200x700px. Kuvan oikeasta reunasta osa jäi puuttumaan, joten muutin koodiin 1200 px:n tilalle 1100px. 

Olen tehnyt yläbannerin kollaasikuvan vuosi sitten. Kuvani rakeisuus johtuu luultavasti huonolaatuisista alkuperäiskuvista, mutta saattaa vaatia muutakin säätöä. Pääasia, että ongelma ratkesi. Pätevistä ohjeista on sekin hyöty, että jatkossa löydän helpommin paikan, jossa on mahdollista tehdä säätöjä.  

Toivottavasti tästä ohjeesta on apua teille muillekin, jotka painitte yläbannerikuvan kanssa. Jälleen kerren saimme huomata, kuinka asiat kannattaa ottaa esille ja kysyä auliisti neuvoa. Jaettu tieto on isompi ilo - ainakin minun mielestäni.