Jos tämä on ensimmäinen visiittisi koodien maailmaan, lue toki ensimmäisenä tämä postaus, joka selventää mistä tässä oikein on kysymys. Aihearkistosta löytyvät kaikki postaukset aakkosjärjestyksessä ja vastaukset yleisimpiin kysymyksiin ja ongelmiin tästä postauksesta.

Avoimet ovet

Kun tätä nyt on pyydetty niin monta kertaa, niin avasin blogin uudelleen, mutta tällä kertaa vain luettavaksi. Se tarkoittaa sitä, että kommentoida ei voi - ja vanhat kommentit on piilotettu (syystä että niihin kaikkiin ei ole vastattu). Paitsi tähän postiin voi nyt toistaiseksi kirjoittaa jotain. Tämä käytäntö on voimassa toistaiseksi sen vuoksi, että minulla ei yksinkertaisesti ole aikaa vastata kommentteihin... mutta ainakin blogin ohjeet ovat auki lukemista varten, jos niistä jollekin iloa on. Kun kerran olen tällaisia ohjeita joskus ison määrän kirjoittanut, niin miksipä minä niiden päällä istuisin, kun ne voivat lojua netissäkin.

Koska blogi on ollut kiinni pitkään elämäntilanteestani johtuen, osa ohjeista voi olla (ja onkin) valitettavasti jo vanhentuneita tai toimimattomia, sillä Blogger on taatusti tehnyt muutoksia taas koodeihin ja muuhunkin. En ole ehtinyt tarkistaa, mitkä postaukset ovat out of date, joten varokaa miinoja. Ja selaimet ovat päivittyneet ja niin edelleen, eli css-filtterit toimivat nykyään Firefoxissakin... Uusia postauksia en myöskään uskalla toistaiseksi luvata. Luulenpa, että mikäli uusia postauksia jossain välissä on aikaa kirjoitella, pitää koko blogi pistää ihan kunnon remonttiin ennen sitä (mm. poistaa toimimattomat postaukset).

Pyydän myös, ettette laittaisi sähköpostilla kysymyksiä tai ongelmia toistaiseksi - en mitenkään ehdi niitä juuri nyt ratkoa, kun minulla on kaksi työtä ja opinnäytetyö tekeillä. Ja ei, en tee ulkoasuja tällä hetkellä - paitsi jos sinulla on joku äärimmäisen hieno ja innostava blogi, josta saat minut kiinnostumaan.

tunnisteet "ombre style"

Liukuvärjäys on monessa suhteessa muotia. Miltä kuulostaisi liukuvärjätty tunnistepilvi?

Jos sinulla ei vielä ole Tunnisteet-widgetiä blogissasi, lisää se haluamaasi kohtaan blogissa seuraavilla asetuksilla. Jos taas sinulla on se jo, muuta asetukset alla olevaa kuvaa vastaaviksi. Kannattaa huomioida, että liukuvärjäys ei toimi oikein, mikäli tunnisteet ovat aakkosjärjestyksessä. Tosin aakkosjärjestetystä liukuvärjätystä widgetistä saattaa muuten sitten tulla hauskan näköinen...

Etsi (esimerkiksi haulla ctrl+f syöttämällä sinne hakusana Label1) blogistasi koodi
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>...</b:widget>
mutta älä klikkaa mustaa nuolta sivusta auki tai klikkaa kolmea pistettä > ja < välissä, koska muutoin rivi laajenee ja sen korvaaminen vaikeutuu. Maalaa teksti ja korvaa koko widget koodilla
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>

  <div class='widget-content'>
  <div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
      if(a&gt;b){
          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
             }
      else{
          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
          }
      return v
   }


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
     if (!labelCount[ts[t]]){
           labelCount[ts[t]] = new Array(ts[t])
           }
        }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
    if(ts[t] &lt; cloudMin){
       continue;
       }
    for (var i=0;3 &gt; i;i++) {
             c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
              }    
         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
         li = document.createElement('li');
         li.style.fontSize = fs+'px';
         li.style.lineHeight = '1';
         a = document.createElement('a');
         a.title = ts[t]+' Posts in '+t;
         a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
         a.href = '/search/label/'+encodeURIComponent(t);
         if (lcShowCount){
             span = document.createElement('span');
             span.innerHTML = '('+ts[t]+') ';
             span.className = 'label-count';
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             li.appendChild(span);
             }
          else {
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             }
         ul.appendChild(li);
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
    }
  lc2.appendChild(ul);  
</script>

<noscript>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>
</noscript>
    <b:include name='quickedit'/>
  </div>

</b:includable>
</b:widget> 
Tämän jälkeen etsi koodista kohta
</b:skin>
Juuri ennen sitä (tai johonkin fiksuun paikkaan css-koodiasi) lisää koodit
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Lisää heti
</b:skin>
jälkeen koodi
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 15;
var maxColor = [255,255,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Valmista tuli ja voit tallentaa.

Huom! Koska kyseessä on Bloggerin ulkopuolinen widget, ei Blogger välttämättä vaihda widgetin otsikkoa sen mukaan, millaiseksi se on merkitty widgetissä itsessään. Tässä widgetissä otsikko on määritelty automaattisesti tekstiksi Label Cloud, joten mikäli haluat muuttaa tätä, pitää vielä muuttaa vähän koodia.

Etsi jälleen (esimerkiksi haulla ctrl+f syöttämällä sinne hakusana Label1) blogistasi koodi
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
ja muuta sen kohta title haluamaksesi otsikoksi tähän tapaan
title='tunnisteet'
Seuraavaksi haluaisit varmaan muokata ainakin värejä niin, että ne sopivat koodiisi. Tässä tapauksessa skripti käyttää heksakoodiarvojen sijasta rgb-arvoja. Useiden kuvankäsittelyohjelmien värivalitsimista saa toki myös rgb-arvot, mutta saat sellaiset myös kätevästi vaikkapa Color Pickeristä. Siellä voit valita värin joko värikartasta tai syöttää ylös ruutuun tietämäsi heksakoodiarvon ja klikata pickerin harmaata taustaa, niin picker näyttää sinulle oikeassa reunassa rgb-arvot alla olevan kuvan tavoin.



Liukuvärjäys koostuu kahdesta väristä. Halutessasi muuttaa eniten käytössä olleiden tunnisteiden päässä olevaa väriä, muuta värikoodia rivillä
var maxColor = [255,255,255];
Vastaavasti sen pään väriä, jossa ovat vähiten käytössä olleet tunnisteet, muokataan riviä
var minColor = [0,0,0];
Hakasulkeiden sisällä on siis pilkuilla erotettuna kolme eri numeroa ja ne ovat samassa järjestyksessä kuin kirjaimetkin. Ensimmäinen numero r, toinen numero g ja kolmas numero b. Tässä tapauksessa minä kirjoittaisin kuvaesimerkkini perusteella koodeiksi
[179,25,143]
Samaan tapaan voi muokata suuren ääripään ja pienen ääripään fonttikokoja (min=pieni, max=suuri) eli koodeja
var maxFontSize = 15;
var minFontSize = 10;
Luonnollisesti mikäli koot ovat samat, kaikki tunnisteet ovat samankokoisia, mutta värivaihtelu tapahtuu silti. Tässä skriptissä tunnisteiden numeroarvot (montako postausta kyseisen tunnisteen sisältää) ovat automaattisesti pois päältä (periaatteessa ne saisi päälle, mutta se oli tosi ruman näköistä kun numerot eivät värjäytyneet samoin kuin tunnisteet, joten en viitsi sitä edes neuvoa).

Tunnistepilven css-koodiosassa voi muuttaa myös monia asioita. Niistä tärkeimpänä kuitenkin ehkä rivi
#labelCloud {text-align:center;font-family:arial,sans-serif;}
jossa voi muuttaa pilven tasausta (text-align:center - muuta arvoksi justify, jos haluat molempiin reunoihin tasatun tai left/right riippuen kumpaan reunaan haluat pilven tasata), fonttia (font-family) jne.

Tämän postauksen koodit ovat peräisin blogista phydeaux3, joka valitettavasti ei ole enää (tai tällä hetkellä ainakaan) luettavissa.

ylimääräisen : -merkin poistaminen kommenteista

Jotkut ovat saattaneet huomata, että postauksen alatunnisteessa olevan kommenttilinkin perässä on ylimääräiseltä tuntuva kaksoispiste. Tässä postauksessa kerrotaan, kuinka tämän pienen (tuskin huomattavan) mutta silti ehkä häiritsevän yksityiskohdan saa hävitettyä.

Avaa blogisi koodi ja hakukenttä. Hakukenttään syötä hakutermiksi
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
tämän kohdan pitäisi löytyä ihan suoraan.


Välittömästi tämän rivin alta (ks. kuva yllä) löytyy ylimääräinen kaksoispiste, jonka poistamalla häviää kaksoispiste kommenttilinkin jäljestä.

Myös kommenttien otsikon perässä (kun on siis klikannut itsensä kommenttilinkkiä painamalla postaukseen) on tällainen kaksoispiste. Se ei ehkä ole niin häiritsevä, mutta mikäli senkin haluaa pois, syötä hakukenttään
<b:includable id='threaded_comments' var='post'>
myös tämä löytyy ihan suoraan. Avaa kyseisen kohdan edessä oleva musta nuoli, mikäli ei ole jo.


Kun musta nuoli on avattu, pari riviä etsityn kohdan alapuolella (ks. kuva yllä) on tämä kaksoispiste, jonka poistamalla saadaan kaksoispiste hävitettyä myös kommenttien otsikosta.

taustakuva (simple-malliin) koodin kautta

Periaatteessa taustakuvien lisääminen blogiin koodin kautta on helppoa ja vaivatonta, ainakin lähestulkoon kaikissa muissa malleissa paitsi Simplessä, jossa täytyy tehdä pari pientä muutosta, jotta taustakuva näkyisi kokonaan - siksi tämä postaus. Minä käytin tässä tutoriaalissa mallina sinipohjaista Simpleä.

Totta kai taustakuvia voi ladata mallin suunnittelutyökalunkin kautta, mutta esimerkiksi itselläni tämä vaihtoehto ei ole koskaan toiminut oikein ja Blogger herjaa yhtä sun toista virhettä. Lisäämällä kuvan koodin kautta kaiken pitäisi toimia melko varmasti oikein. Lisäksi taustakuvan pitäisi pysyä jokseenkin sen näköisenä ja laatuisena kuin on tarkoitettu (olettaen, että käytät kuvan hostaamiseen jotakin kuvapalvelua, joka ei pakkaa kuviasi) ja pystyt määrittelemään ehkä hieman paremmin taustakuvan asettelunkin.

Perusohje taustakuvan lisäämiseksi blogiin on seuraava (toistuva taustakuvan osalta). Etsi koodi body { } ja korvaa sen background-rivi seuraavankaltaisella rivillä
body {
background: #ffffff url(kuvanosoite.com/kuva.jpg) repeat scroll top left;
}
tai näin (toistumaton taustakuva)
body {
background: #ffffff url(kuvanosoite.com/kuva.jpg) no-repeat fixed top left;
}
Ennen varsinaista kuvamääritystä kannattaa määritellä blogille joku taustaväri (esimerkissä #ffffff eli valkoinen) heksakoodiarvoilla. Yllätysten ja suurten kontrastien välttämikseksi (esim. taustakuvan latautumista odoteltaessa hitailla nettiyhteyksillä) on suositeltavaa käyttää sellaista väriä, joka on lähellä taustakuvan päävärisävyä. Korvaa kuvanosoite.com/kuva.jpg nettiin lataamasi taustakuvan osoitteella. Vinkkejä taustakuvien asetteluun liittyen (esim. tasausehdot) löytyy tästä postauksesta.

Taustakuva saattaa lisäämisen jälkeen näyttää Simplessä vaaleammalta kuin pitäisi, siksi etsi koodi
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
ja poista se. Nyt taustakuvan pitäisi näyttää sen väriseltä kuin se oikeasti on. Taustakuva ei kuitenkaan edelleenkään näy kokonaan, joten vielä pitää etsiä koodi
.body-fauxcolumn-outer .cap-top {
 position: absolute;
 z-index: 1;
 height: 400px;
 width: 100%;
 background: $(body.background);
 $(body.background.override)
}
ja poistaa tämäkin. Nyt taustakuvan pitäisi näkyä kokonaan ja normaalin näköisenä.

marginien/paddingien muokkaus blogipohjassa 2

Tämä postaus on suoraa jatkoa ensimmäiselle postaukselle, jossa käsiteltiin tyhjän tilan poistamista blogialueen reunoilta. Ensimmäinen postaus venyi suhteellisen pitkäksi, joten siinä jäi käsittelemättä se, miten sivupalkin reuna-alueelta poistetaan ylimääräinen tyhjä tila, koska se ei ole mikään itsestäänselvyys olemassa olevien, mutta omassa koodissa "näkymättömien" paddingien ja marginien takia. Tämä ei ole kaikenkattava tutoriaali, vaan tässä kerrotaan ainoastaan yksi ratkaisutapa ongelmaan ja olen itse kokeillut tähän useampiakin eri tapoja. Suosittelen kuitenkin, että marginaalien kaventaminen tehdään malliin, johon ei ole vielä ehditty tehdä (paljon) muita muutoksia. Näin homma toimii varmimmin.

Jatketaan siis siitä, mihin edellisessä tutoriaalissa jäätiin ja pysytään Simple-mallin käsittelyssä. Toisin sanoen oletus on, että marginaalit on kavennettu edellisen tutoriaalin mukaisesti ensin. Tässä .content-inner padding on 5px. Se on määräävä tekijä siinä, kuinka kapeaksi tyhjä tila sivupalkin oikealla (tai vasemmalla, jos sinulla on vasemmanpuoleinen sivupalkki) puolella kutistuu (samaksi kuin mitä se on blogin toisella reunalla). Muokkaamaton padding on 10px, mutta koska edellisessä tutoriaalissa tuli käytettyä arvoa 5px, käytän sitä myös tässä.


Ylläolevaa muutosta varten lisää blogiisi kaksi koodia (näitä ei ole siellä valmiina):
.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {
padding: 0;
}

.sidebar {
margin-right: 0;
margin-left: 10px;
}
Nämä koodit pätevät, jos sivupalkkisi on oikealla. Ylempi koodi tulee lisätä sellaisenaan, alemmassa koodissa on muokkaamisen varaa sen verran, että mitä suurempi on margin-left -arvo, sitä suurempi tila jää blogitekstien ja sivupalkin sisällön väliin. Arvon ollessa nolla sivupalkin sisältö on kiinni blogiteksteissä. Hyvä välistys on yleensä noin 15-25px. Margin-right -arvoa ei tule muuttaa suuremmaksi, mikäli haluaa, että tyhjää tilaa on blogin molemmilla reunoilla yhtä paljon.

Jos sivupalkkisi on vasemmalla, pitää alemman koodin arvot muuttaa päikseen eli näin
.sidebar {
margin-left: 0;
margin-right: 10px;
}
Muokkausvara on muuten sama, mutta luonnollisesti sivupalkin sisällön väliä blogiteksteihin kontrolloidaan nyt margin-right -arvolla ja margin-left -arvo jätetään nollaksi.

Tosin, jos haluat päästä helpolla, voit käyttää blogissasi tekemääni Simple Grey Variant -mallia, jossa marginit ja paddingit on muokattu automaattisesti kapeiksi.
Koodikielellä 2013 - 2014 | Layout ja sisältö JH.