lauantai 28. syyskuuta 2013

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 poistaminen blogista

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

.date-header {display :none !important;}

Koodi poistaa blogista päivämäärän. 

xoxo, iltsu

Postauksen alatunnisteen keskittäminen

Postauksen alatunnisteella tarkoiteaan alla olevassa kuvassa punaisella
rengastettua aluetta:


Alatunniste on siis postauksen alapuolella oleva "lokerikko" tai "tekstiryhmä".
 Alatunniste on normaalisti vasemmalla reunalla, ja jos sen haluaa keskittää,
tarvitaan koodia.

 Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

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

.post-footer {
text-align: center;
}  

Esikatsele & tallenna, toimiiko. Huomioikaa, että koodi keskittää vain
alatunnisteen, ei esimerkiksi kommenttiboksia.

xoxo, iltsu

"5 stalkkeria paikalla" -gadget blogiin

KOODI UUDISTUNUT!

Olette mahdollisesti nähneet blogien sivupalkissa tms. 
"5 stalkkeria paikalla" tai "3 katselijaa paikalla" -juttuja. 
Jos ette, alla oleva kuva havainnollistaa gadgetia.


Omasta mielestäni kyseinen sivuelementti on kiva yksityiskohta gadgeteissa. 
Se on helppo laittaa blogiin lukemalla nämä ohjeet;

1. Mene tähän osoitteeseen: http://freehostedscripts.net/onlinecounter/
 
2. Scrollaa sivua alaspäin. Sinun pitäisi päästä alla olevan kuvan kohdalle (huom. sivulla ei ole noita värilaatikoita). 
Vihreällä kehyksellä varustettuun laatikkoon kirjoita se teksti, minkä haluat näkyvän, jos blogissasi on yksi stalkkeri.
Vaaleanpunaisen kehyksen sisään laita teksi, jonka haluat näkyvän, jos blogissasi vierailee kaksi tai useampi henkilö.
Paina sinisellä kehyksellä ympäröityä laatikkoa, kun olet valmis. 
4. Sitten vain kopioit laatikkoon ilmestyneen koodin.

LISÄÄMIINEN BLOGIIN
1. Mene ulkoasuun -> lisää gadget -> HTML/JavaScript


2. Kun olet klikannut HTML/JavaScript -kohtaa, pääset sivulle, jonka kenttä sinun tulee täyttää alla olevalla koodilla. Liitä tänne kopioimasi koodi. 
Gadgetille ei kannata laittaa otsikkoa, mutta jos välttämättä haluat, voit kokeilla sitä. Kun olet valmis, tallenna.


Toivottavasti koodi toimii! :)

xoxo, iltsu

perjantai 27. syyskuuta 2013

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

Päivämäärän ja otsikon välin pienentäminen

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

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

Muokkaamalla punaiseksi värjättyä numeroa voit itse päättää välin 
suuruuden. Luku voi olla sekä positiivinen että negatiivinen.

xoxo, iltsu

"Tilaa blogitekstit (Atom)" pois

Tässä postauksessa esitelty koodi poistaa "Tilaa blogitekstit (Atom)" -kohdan blogista.
Se löytyy blogista alhaalta.


 ---------------------
POSTAUSTA MUOKATTU 10.6.2015; lisäys:
VOIT POISTAA KOHTEEN PELKKÄÄ CSS:ää KÄYTTÄMÄLLÄ LISÄÄMÄLLÄ
CSS-BOKSIIN ALLA OLEVAN KOODIN:

.blog-feeds{
display:none;
}

---------------------
Nyt pääsemme ensimmäistä kertaa HTML-koodin pariin tässä blogissa!
Blogisi HTML-koodiin pääset: Malli -> Muokkaa HTML-koodia.

Tältä pitäisi näyttää;
 Koodi näyttää varsinkin, jos sen ensimmäisen kerran näkee, pelottavalta & hirviömäiseltä. Klikkaa hiirellä jotain HTML-koodin kohtaa, mutta älä poista tai lisää mitään! Sitten paina
Ctrl + F (pidä ctrl painettuna ja paina F-näppäintä siten, että molemmat näppäimet ovat yhtä aikaa painettuina) niin HTML-koodin oikeaan ylälaitaan ilmestyy alla olevan näköinen Search eli hakutoiminto.


Etsi blogista alla oleva koodi:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div class='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if>

Koodi tuskin on samanlaisena sinulla blogisi HTML-koodissa, joten suosittelen etsimään HTML-koodistasi jotain yllä olevan koodin pätkää, ei koko koodia. Kirjoita searchiin esim. Blog feed links tai data='feedLinks'

 Kun olet löytänyt koodin, poista siitä tämä pätkä:
<b:include data='feedLinks' name='feedLinksBody'/>

ÄLÄ tallenna vielä, vaan klikkaa "Esikatsele mallia" -kohtaa. 
Rullaa alaspäin nähdäksesi, onko kohta poistunut blogistasi.
Jos on & blogger näyttää blogisi esikatselussa ihan normaalisti,
voit klikata "Tallenna" kohtaa. Jos jotain on mennyt pieleen,
blogger näyttää esikatselussa "ERROR" -juttua tai
jotain vastaavaa, jolloin sinun on korjattava joko
lisäämäsi muutokset TAI hylättävä poistamasi kohdat
"Peru muutokset" -kohdasta.

HUOMIO!
ÄLÄ IKINÄ TALLENNA HTML-KOODIA ENNEN ESIKATSELUA, SILLÄ
MUUTEN BLOGISI VOI MENNÄ IHAN PILALLE!
*kokemusta on...

xoxo, iltsu

"Palvelun tarjoaa blogger" pois

Koodi poistaa blogin alaosassa olevan "Palvelun tarjoaa blogger" -kohdan pois.

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

#Attribution1 {display: none;}

xoxo, iltsu

Kuvista kehykset pois

Lisää seuraava koodi CSS:ään:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: #ffffff;
border: 0px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .0);
}

 Toivottavasti toimi! Koodi poistaa siis kuvien varjostukset sekä kehykset/reunat.

xoxo, iltsu



Gadgetien välien pienentäminen

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

.widget {
    margin: 5px 0 0 0;
}

 Lilaksi värjättyä lukua voit muuttaa mieleisesi mukaan. 
Mitä pienempi luku on, sitä pienemmät välit gadgeteille tulee. 
Myös miinuslukuja voi käyttää.

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

Päivämäärän & otsikon keskittäminen

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS


Lisää yllä olevaan kenttään alla oleva koodi kokonaisuudessaan:

h3.post-title{
text-align:center;
}

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

 

Ja that's it, pitäisi toimia. Muista tallentaa!

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.


Kynsiblogini, jonka lopetin. 


 Kaverini Kiian lifestyleblogi.



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

Näin lisäät lukijapalkin

Lähes kaikki bloggaajat haluavat blogilleen lukijoita. Sen takia omaan blogiin kannattaa lisätä lukijapalkki, koska sitä kautta pääsee helpoiten liittymään blogin lukijaksi. Tässä postauksessa kerron, miten lukijapalkin saa lisättyä omaan blogiin.

HUOMIO! Joissain malleissa lukijapalkki on automaattisesti lisätty sivupalkkiin!

1. Mene hallintapaneelista ulkoasuun (aiemmin opittu). Klikkaa ulkoasussa "lisää gadget" -kohtaa.



2. Uusi ikkuna avautuu. Klikkaa sieltä kohtaa "Muita laajennuksia". Valitse sitten lukijat-kohta.



3. Kun olet lukijat-kohtaa klikannut, ikkunaan tulee seuraavanlainen kuva (ilman punaisia vihjejuttuja tietysti). Kuten kuvassa lukee, voit halutessasi muuttaa otsikkoa (alun perin se on muodossa "Lukijat) mieleisesi mukaan pyyhkimällä alkuperäisen tekstin pois. Sitä ei ole pakko muuttaa. Kun olet valmis, klikkaa oranssilla pohjalla olevaa "Tallenna"-kohtaa.
VALMISTA!


Alla oleva kuva havainnollistaa, miltä lukijapalkki näyttää.



Hope you got it!

xoxo iltsu

 

Favicon: Mikä, miten tehdä Paintilla & miten liittää blogiin

Ensimmäinen aiheemme on Faviconit. Favicon neliön muotoinen (korkeus & leveys tismalleen samat, esim. 134 x 134) ikoni, joka on määritelty internetsivulle. Alla oleva kuva havainnollistaa faviconit.


MITEN TEHDÄ: PAINT

Neuvon nyt, miten sellaisen voi tehdä Paintilla. Faviconin voi tehdä muillakin ohjelmilla, mutta itse tykkään tehdä etenkin tekstifaviconin Paintilla, joka on yleensä tietokoneella oleva valmisohjelma.

1. Avaa paint ja valitse "Muuta kokoa".


2. Avautuu ikkuna. Klikkaa itsesi Kuvapisteet-kohtaan. Ensimmäisenä klikkaa kohtaa "Säilytä kuvasuhde" alla olevan kuvan mukaan. Sen jälkeen muuta vaaka- ja pysty samankokoiseksi esim. kokoon 200.



3. Sitten klikkaa työkaluvalikossa olevaa A-kuvaketta, jolloin pääset kirjoittamaan tekstiä. Kannattaa valita mieleinen fontti ja fonttikoko. Mallissa olen käyttänyt fonttia Corbel ja kokoa 150.

4. Kuten varmaan huomasit, kirjain ei ole valkoisen pohjan keskellä. Se kannattaa siirtää keskelle, jolloin silmä lepää. Klikkaa kohtaa valitse -> suorakaiteen muotoinen valinta.


5. Rajaa suorakaiteella kirjain siten, että kirjaimen ympärille jää vähän valkoista tilaa. Sitten klikkaa hiiren oikeaa puolta ja kohtaa "Kopioi".



6. Tehtävänä on peittää kirjain, ja itse teen peittämisen alla olevan kuvan tavoin (voit myös klikata oikealla hiirellä "poista"-kohtaa). Valitse suorakaide tai pyöristetty suorakulmio, klikkaa "Täyttö"-kohdasta "Tasainen väri" ja varmista, että Väri 1 ja Väri 2 ovat valkoisia (= pohjan värisiä). Sitten vain vedä suorakulmio kirjaimen/kuvan päälle.


7. Klikkaa kohdasta liitä, jolloin kopioitu kirjain tulee näkyviin. Nyt voit vetää kirjaimen haluamallesi kohdalle. Suosittelen keskikohtaa.


8. Tadaa, valmista! B on keskellä! Sitten vain tallennat kuvan haluamaasi muotoon (itse suosittelen png- tai jpeg-muotoa).





MITEN LIITTÄÄ FAVICON BLOGIIN?

Kun olet tehnyt Faviconin, haluat varmasti liittää sen blogiisi. Suosittelen sitä todellakin, sillä bloggerin oma Favicon on tylsä ja kertoo siitä, ettei blogiin ole jaksettu nähdä vaivaa.

HUOMIO! Faviconin päivittymisessä voi kestää päiviä, jopa viikko!

1. Mene bloggerin hallintapaneeliin. Klikkaa blogisi nimeä.


 2. Klikkaa vasemmassa reunassa olevasta listasta Ulkoasua. Sen jälkeen klikkaa "Muokkaa"-kohtaa, joka on ympyröity punaisella.


3. Avautuu ikkuna, josta klikkaa "Selaa"-kohtaa.


4. Kun olet valinnut tekemäsi faviconin, klikkaa "Tallenna"-kohtaa ja valmista tuli!


Toivottavasti tajusitte, ja kommentoikaa ihmeessä, jos Faviconeista jäi jotain kysyttävää! Autan, jos osaan.

Aloitus

Moi kaikki! 

Halusin perustaa tällaisen "apublogin" bloggaajille, sillä rakastan blogin ulkoasulla leikittelemistä ja koodailuja. Haluan myös jakaa koodeja ja ulkoasuneuvoja niille, jotka eivät tiedä koodailusta ja ulkoasulla leikittelemisestä vielä mitään/ihan kaikkea. Blogissa on siis nimensä mukaisesti koodeja ja neuvoja bloggaamiseen, ulkoasuun jne.

Blogissa pyrin kertomaan asiat helpoimman kautta vetämällä ne rautalangasta. Minäkin olin vielä vuosi sitten sormi suussa etenkin koodeja käsitellessä, ja apublogeja lukemalla sain tuntumaa niistä. Itseäni kuitenkin aloittelijana harmitti erityisesti se, että neuvot kerrottiin mielestäni vaikeasti. Haluan ehdottomasti tässä blogissa kertoa asiat mahdollisimman ymmärrettävästi, jotta aloittelijatkin ymmärtävät asiat, joita täällä neuvon.

Ja kuka minä olen? 
Olen bloggaamista aktiivisesti harrastava 15-vuotias (1998) tyttö Kaakkois-Suomesta. Aloitin bloggailun heinäkuussa 2012 tietämättä koodeista mitään, minkä todellakin huomasi blogin laadussa. Reilun vuoden aikana olen kuitenkin oppinut omasta mielestäni melko paljon varsinkin koodailuista. Tällä hetkellä pidän lifestyleblogia Tähtiin kirjoitettu.

Mukavia lukuhetkiä! Toivottavasti blogista on apua! Ja muistakaa ihmeessä kommentoida, jos jokin jää epäselväksi!