sunnuntai 13. lokakuuta 2013

Oma allekirjoitus postausten loppuun

Tekisikö välillä mieli toitottaa muille, että juuri MINÄ olen kirjoittanut juuri tämän loistopostauksen? Haluaisit lopettaa postauksen lennokkaaseen signeeraukseen, jotta kaikki tietäisivät kenen sormet ne ovat näppäimistöllä laulaneet ja saaneet aikaan tämän mestariteoksen. Harmillista kyllä, Bloggerissa kirjoittaja jää kuitenkin pieneksi tahraksi postauksen lopputeksteihin jonnekin kellonajan ja kommenttien väliin. Siihen kohtaloon ei ole kuitenkaan pakko tyytyä, vaan näyttävämpikin allekirjoitus on mahdollinen. Ja sellainen tehdään nyt! Olen kirjoittanut ylös, että tämä oli jonkun toive. Toivottavasti muistiinpanoni pitävät paikkansa. Omaan käsialaan liittyviä toiveita on muitakin mutta paneudutaan niihin toisella kertaa.

Tutkiskelin allekirjoitusvaihtoehtoja ja voin todeta, että nimmarin voi lisätä monella tapaa mutta tämä esittelemäni keino on helppo ja tosi kätevä. Se ei mitenkään pidennä postauksen latausaikaa, sen saa kerralla kaikkiin postauksiin, sitä voi muuttaa helposti halutessaan, ja se vie vain hetken. Itse en tätä ominaisuutta nyt juuri lisännyt mutta nimmarilla saa kyllä persoonallista ilmettä blogiin.

Nimmarin kirjoittaminen
Ihan oma aito ja oikea allekirjoituskin on mahdollista saada postauksen loppuun, jos vaikka skannaat sen koneellesi. Mutta nyt mennään sieltä mistä aita on matalin ja annetaan koneen arpoa nätti käsiala. Tai siis päätetään itse, minkälainen nimmari halutaan. Tämä on varmasti ilouutinen kaikille niille, joiden käsiala muistuttaa harakanvarpaita (ja joilla ei ole skanneria)! Kerrankin nimi voi näyttää hyvältä. Suuntaa siis allekirjoittamaan My Live Signatureen. Step ykkösessä kirjoita nimesi tai nimimerkkisi. Seuraavassa stepissä eteesi avautuu tämän tyyppinen näkymä:


Sivulla on yhteensä kymmenen erilaista nimmaria ja huomaa yläreunan sivut (#), joista löytyy siis 120 erilaista vaihtoehtoa. Tarjolla on kaikennäköistä käsialaa. Pylpyröi haluamasi vaihtoehto ja siirry next steppiin, jossa saat valita sopivan koon. Sitä seuraavassa kohdassa saat valita nimmarin värin ja myös taustankin värin. Voit myös pitää sen läinäkyvänä eli transparenttina, mitä suosittelenkin. Tämän jälkeen valitset onko nimmari suorassa vai jotenkin vinossa ja vinkkelissä. Sitten klikkaat viimeisen kerran next steppiä ja tallennat valmiin nimmarin koneellesi hiiren oikeaa näppäintä klikkaamalla.

Nimmari nettiin
Äskeisessä kohdassa tallensit  nimmarin koneellesi mutta nyt sille pitäisi saada oma osoite, eli URL. Lataa kuva siis johonkin verkkoalbumiin, kuten vaikka Photobuckettiin. Sieltä saat kuvallesi Direct URL:in. Kopioi osoite http:// -alkuisena johonkin odottamaan tai jätä verkkoalbumi auki toiseen välilehteen.

Nimmari postauksiin
Suosittelen varmuuskopioimaan blogin ihan varmuudeksi vain. Sitten voitkin siirtyä mallinsuunnittelutyökaluun (Malli -> Mukauta) ja sieltä Lisäasetuksiin, jossa viimeisenä komeilee Lisää CSS. Lisää kenttään seuraava koodi (jos sinulla on jo kentässä jotain, laita koodi vikaksi):

.entry-content:after {
content: url(kuvanosoitetähän);
margin-left: 250px;
}

Lisää kuvasi URL tuohon merkattuun kohtaan. Jos haluat nimmarin keskelle, 250px on yleensä hyvä. Voit muuttaa kohtaa muuttamalla lukua. Alla olevassa esikatselussa näet, miten nimmari asettuu.

Minulla on muutakin koodia kentässä, eli nimmarikoodi alkaa vasta .entry-content -kohdasta

Kun kaikki näyttää mielestäsi hyvältä klikkaa Käytä blogissa. Olet valmis! Nimmari näkyy kaikissa postauksissasi!

Muuta huomioitavaa
Jos haluat joskus muuttaa nimmariasi, sen kuin vain vaihdat tuohon koodiin uuden kuvan osoitteen. Nimmari vaihtuu kaikkiin postauksiin.

Jos käytät minunkin vinkkaamaani LinkWithin tai nRelate -widgettejä, nimmari saattaa ilmestyä vasta tämän widgetin jälkeen. Jos haluat sen näkyvän ensin, näillä seuraavilla koodeilla homman pitäisi korjaantua:

LinkWithinin kanssa vaihda koodin eka .entry-content:after { -rivi seuraavaksi:

.linkwithin_outer:before {

nRelaten kanssa vaihda ensimmäinen .entry-content:after { -rivi seuraavaksi:

div[id*="nrelate_related"]:before {

Näitä en itse kokeillut mutta ne ovat yleinen suositus, joten pitäisi toimia.

Ei kun allekirjoittelemaan sitten vain!

36 kommenttia:

  1. Olen jo kauan seuraillut blogia. Kommentoinut en ennen ole, koska ei ole ollut aiheeseen mitään infottavaa. Mutta nyt asiaan. Aivan ihana blogi! Olen löytänyt omaan blogiini paljon neuvoja. Ja nyt olin puhelimella katsomassa oletko kirjoittanut tänne. Olit ja aloin heti kokeilemaan. Ja onnistui. Mutta miten saa sen taustan läpinäkyväksi?

    VastaaPoista
    Vastaukset
    1. Kiitos Jessica! Kiva, kun kommentoit :)

      Valitsitko transparentin taustan? Ja laitoit muuten ihan ohjeen mukaan? Onko kuvan muoto png (en kyllä tiedä, onko sillä niin väliä)? Kyllä taustan pitäisi olla läpinäkyvä, jos valitsee allekirjoitusohjelmassa läpinäkyvän taustan eikä esim. valkoista.

      Poista
    2. Jos valitset transparent taustaksi, mutta kuvan muoto ei ole PNG vaan esim JPG, tieokone muuttaa taustan automaattisesti valkoiseksi. Eli aina kun kuvassa läpinäkyvää, muodoksi PNG! :D

      Poista
    3. Tein ihan ohjeitten mukaan, mutta ainakin tällä tietokoneella se näyttää että siinä pitäisi olla kuva mutta siinä ei ole. Ihan ohjeitten mukaan minä ainakin tein.....

      Poista
    4. Kiitos Amanda tarkennuksesta! Mutta tämä neliö.... Hmm.. Kannattaa tarkistaa koodi, että se on juuri tuo sama, eli alkaa pisteellä, välit ovat samoissa kohdissa jne. Ja sitten se kuvan muoto png..

      Poista
  2. Hei kiitos tästä! Oonkin miettinyt että miten tuollanen tehdään kun oon joillain nähnyt ties minkälaisia hienouksia allekirjoituksina :)

    VastaaPoista
    Vastaukset
    1. Eikös olekin helppo tehdä, vaikka hienolta näyttääkin :)

      Poista
  3. Moikka! En pysty rekisteröitymään photobuckettiin, ei suostu jostakin syystä yhteistyöhön kanssani.. mitä muita verkkoalbumeita siis on? :D Ja kiitos jälleen tästäkin vinkistä! :)

    VastaaPoista
    Vastaukset
    1. Minulla on ollut joskus sama ongelma. Palveluja on paljon, vaikka flickr ja ImageShack.

      Poista
  4. Moi, jos haluaa tuohon sisältökohtaan (content) esim. FB kuvakkeen, niin onnistuuko koodin lisääminen tuohon? Ois aika näppärä, jos kuvaketta ei joka kerta tarviis lisätä maunaalisti postausken loppuun. Meinaa aina unohtua! Onnistuuko noilla parametreillä vai mitenkä? Voi kun ois tuota koodaamista tullu vähän enempi opiskeltua aikanaan... Kiitos kaunis jo etukäteen, mikäli siulta löytyy ratkaisu ongelmaani.

    VastaaPoista
    Vastaukset
    1. Enpäs ole kokeillut tuohon mutta veikkaan ettei toimi. Olen tutkinut tätä asiaa ja hieman monimutkaisempia koodeja on tarjolla. Tästä on siis juttua tulossa kyllä!

      Poista
  5. Pidän blogistasi ja täällä on kivoja vinkkejä ! :)) Halusin hetikokeilla tätä mutta en saa nimmaria näkyviin sen kohdalle tulee vaan sellainen ihme neliö kuva :( mistähän johtuisi ? :D

    VastaaPoista
  6. Hohoo sainpas näkyviin ! :)

    VastaaPoista
    Vastaukset
    1. Okei, hyvä! Mikäs sinulla meni sitten ekalla yrittämällä pieleen?

      Poista
    2. En osaa sanoa kokeilin vain toisen kerran ihan alusta niin onnistui :D

      Poista
    3. http://diamond-nani.blogspot.fi/

      Siellä se nyt möllöttää , mutta vaikka laitoin taustan läpinäkyväksi se on valkoinen :D

      Poista
  7. Iso kiitos ohjeista!! Hyvin toimivat ja nyt on signature käytössä! Tätä on niin helppo muokata, että tulee varmaan vaihtumaan tasaiseen tahtiin. Mainio blogi sinulla, kiva kun viitsit jakaa näitä vinkkejä - eipä olisi tällainenkaan itsellä muutoin heti juolahtanut mieleen. :)

    VastaaPoista
    Vastaukset
    1. Mikään ei tosiaan estä vaihtamasta nimmaria aina välillä :)

      Poista
  8. Heips,

    sama ongelma...neliötä pukkaa, en saa tuota nimmaria näkyviin mitenkään useammankaan yrittämän jälkeen. Aargh. Koodi on oikein, olen tarkistanut sen monta kertaa. Otankohan kuvan urlin oikeasta kohtaa? Vai missä ongelma? Ehkä nimimerkkini on ihan osuva...? :)

    VastaaPoista
    Vastaukset
    1. No voi höh. En keksi mikä teillä muutamilla mättää tuossa. Otitko linkiksi sen http:// -alkuisen ilman mitään lainausmerkkejä, sulkuja tms.?

      Poista
  9. Kokeilin vielä uudelleen Picasan kautta, neliö tulee sieltäkin, osoitteenkin pitäisi olla oikein. Pöh, täytynee olla sitten ilman nimmaria :) Kiitos kuitenkin tuhannesti kaikista neuvoistasi!

    VastaaPoista
    Vastaukset
    1. Ilmoittelen, jos törmään ongelman ratkaisuun! Ja muutkin saa tietty ilmoitella.

      Poista
  10. Kiitos tosi paljon, mahtavaa!

    siellä se on! :) http://elamanlyriikka.blogspot.fi/

    VastaaPoista
  11. Kiitti tästä -mutta entä jos haluaa kuvallisen logon? Kuten minulla pikku elefantti :D postausten perässä?

    VastaaPoista
    Vastaukset
    1. Täytyy tehdä juttu, miten joka postauksen perään saa norsun :)

      Poista
  12. Osaatko neuvoa, miten tuon nimen saisi tekstin perään silloin kun blogissa on myös "You might also like" -palsta, sillä silloin tuo nimi hyppää automaattisesti vasta tämän perään ja se näyttää typerältä :D Olen nyt toistaiseksi poistanut tuon YMAL-jutun, kun en osannut tätä kohtaa vaihtaa.. Kiitos muutoin mahtavista neuvoista täällä! :)

    VastaaPoista
    Vastaukset
    1. Onko sinulle ehkä Linkwithin tai tuo nRelate, joka suosittelee postauksia lopuksi? Kokeilitko tuota lopussa mainittua kikkaa koodin kanssa? Vai onko sinulla joku muu ohjelma siinä?

      Poista
    2. Enpä ollut lukenut tekstiäsi loppuun ja nyt se onnistuikin noilla neuvoillasi. Kiitos paljon! :)

      Poista
  13. Ei toimi minulla, en saa allekirjoitusta näkyviin ohjeen mukaan, eikä edes LinkWithin avulla... :/

    VastaaPoista
  14. En saa minäkään toimimaan tuota :(

    VastaaPoista
  15. Hei! Onko sulla tietoa koodista, miten engageya- widgetin saisi vasta allekirjoituksen jälkeen? Eli siis vastaava kuin esim. linkwithin. Ja kiitos ohjeesta, sain tosin allekirjoituksen näkymään ainoastaan laittamalla sen css boksiin ensimmäiseksi,

    VastaaPoista
    Vastaukset
    1. Siihen mulla ei ole valitettavasti koodia eikä pienellä googlailulla tuntunut löytyvän.

      Poista
  16. Kiitos tästäkin! Olen saanut blogistasi paljon apua :) itse tein tuon niin, että picmonkeylla tein nimmarin ja sitten käytin koodia. Toimii!

    VastaaPoista
  17. Hei! Osaisitko neuvoa, kuinka saisin tuon allekirjoituksen pois blogistani tai edes pystyisin muuttamaan sitä? :-D Tuolla 'lisää css' -kohdassa ei ole enää tuota koodia, ja muutenkin sieltä on kadonnut koodeja, mutta koodatut jutut pysyvät kuitenkin ennallaan...

    VastaaPoista
    Vastaukset
    1. No jopas jotakin. Onpa sitkeä tapaus! Ja kuulostaa oudolta, että koodeja on kadonnut. Oletko etsinyt jo html:stä ettei siellä jossain olisi tuohon allekirjoitukseen liittyvää koodia?

      Poista