Blogin muokkaus

Tältä sivulta löydät monenlaisia blogin muokkaus vinkkejä. Olen itse löytänyt ohjeet/vinkit/koodit netistä/muista blogeista.

Jos teillä on jotain tiettyjä juttuja, mitä haluaisitte etä kerron tai teillä on jotain kysyttävää, niin kommenttiboksi on vapaasti käytettävissänne. Sinne vain nakkaatte kysymyksenne, niin autan parhaani mukaan.

JOS ETSIT JOTAIN TIETTYÄ, KÄYTÄ HAKUKONETTA PAINAMALLA CTRL+F JA KIRJOITA KENTTÄÄN ETSIMÄSI

Hyviä ja ilmaisia muokkaus ohjelmia: Canva / Crello / Polarr / Befunky

Täältä löydät taustoja blogiin: Vintage Backgrounds / Blogger Backgrounds

CSS-koodit


CSS-koodien paikan löydät

 1. Teema 2. Mukauta 3. Lisäasetukset 4. Sivun teksti (nuoli alaspäin -> avautuu palkki) 5. Lisää CSS 6. Tallenna-nappi

HUOM! Valmistautukaa siihen, että joudutte lisäämään koodin uudelleen, eli kun olette liittäneet koodin ja tallentaneet, koodi ei välttämättä näy boksissa, vaan joudutte lisäämään sen taas. Olettehan tarkkanna, ettei koodi ole boksissa kahta kertaa (tällöin koodi ei välttämättä toimi).

Bannerin keskittäminen

Koodi:

.header-outer {

margin-left:90px;

}

Vaihtamalla luvun 90, saat laitettua bannerin sellaiselle kohdalle, mihin itse sen haluat.

Otsikon ja päivämäärän keskittäminen

Otsikon koodi:

h3.post-title{

text-align:center;

}

Päivämäärän koodi:

.date-header {

text-align:center;

}

Välilehtien keskittäminen

Koodi:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

Kuvien kehykset pois

Koodi:

.post-body img, .post-body .tr-caption-container, .Profile img,

.Image img, .BlogList .item-thumbnail img {

    border: 0px;

    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);

    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);

    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);

    border-radius: 0px 0px 0px 0px;

    background: none;

}

Harmaat pallot pois blogin alaosasta

Koodi:

.blog-pager {
  background: none;
}

Gadgettien otsikoiden keskittäminen

Koodi:

h2 {
text-align: center;
}

Postauksen alatunnisteen ja toimintojen keskittäminen

Alatunnisteen koodi:

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

Toimintojen koodi:

.reactions-label {
margin-left:146px;

}

Muuttamalla lukua 146, saat siirrettyä toimintoja haluamaasi kohtaan.

Blogin kulmien pyöristäminen

Koodi:

.content-inner {
border-radius: 100px;
}

Muuttamalla lukua 100, saat säädettyä pyöreyttä sellaiseksi, kuin sen itse haluat.

Postauksen otsikon alleviivaantuminen, kun viet hiiren otsikon päälle

Koodi:

h3.post-title a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}

h3.post-title a:after {
content: '';
display: block;
margin: auto;
height: 2px;
width: 0px;
background: transparent;
transition: width .7s ease, background-color .7s ease;
}

h3.post-title a:hover:after {
width: 100%;
background: #c9c9c9;
}

Tummenttua numeroa 2 suuremmaksi, viiva muuttuu paksummaksi, kun taas numeroa pienentämällä viiva muuttuu kapeammaksi.

Linkin kursivoituminen, kun viet hiiren linkin päälle

Koodi:

a:hover{
font-style: italic;
}

Postauksen otsikkoon letter spacing-efekti
Kirjainten välin suureneminen, kun viet hiiren postauksen otsikon päälle

Koodi:

h3.post-title a:hover {
letter-spacing: 0.2em;
}

0.2 lukua suurentamalla kirjainten väli suurenee. Poistamalla kohdan a:hover, efekti on pysyvä, eikä muutu vain hiiren vietäessä päälle.

Bannerin ja tekstin otsikon välin pienentäminen
Jos olet poistanut päivämäärän

Koodi:

h3.post-title{
margin-top: -30px;
}

Muuttamalla lukua -30 suuremmaksi tai pienemmäksi, voit muuttaa väliä. Luku voi olla positiivinen tai negatiivinen.

Bannerin ja päivämäärän välin pienentäminen

Koodi:

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

Voit muuttaa lukua -15 samalla tavalla, kuin kohdassa 13.

Tekstin otsikon ja päivämäärän välin pienentäminen

Koodi:

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

Voit muutta kohtaa -15 samalla tavalla, kuin kohdissa 14 ja 13.

Kommentoijien kuvat pyöreiksi

Koodi:

#comments .avatar-image-container img {
border: 0px solid #FFF;
}
.avatar-image-container, .avatar-image-container img {
width: 42px !important;
max-width: 42px !important;
height: 42px !important;
max-height: 42px !important;
padding: 0 !important;
border: 0px;
-webkit-border-radius: 42px;
-moz-border-radius: 42px;
-khtml-border-radius: 42px;
border-radius: 42px;
.comments .continue {
border-top: 0px solid #999999;
}

Muuta

Bannerin tausta on harmaa, miten sen saa pois?

Tämä ongelma on ratkaistu tuossa tuokiossa. Kun olet lataamassa banneria, et lataakkaan kuvaa JPG:nä vaan PNG:nä.

Blogger muuttaa kuvat huonolaatuisiksi tai oudoiksi

Tähän on sama ratkaisu kuin edellisessä, eli lataa kuvat PNG:nä. Jos kuvat ovat jonain muuna tiedostona, kannattaa muokata kuvia hieman ja tallentaa sitten PNG muodossa. Tämä ei välttämättä auta paljoakaan, mutta kannattaa edes kokeilla.

Miten sanavahvistuksen saa pois?

Asetukset-> Kommentit-> Lukijan kommentin captcha-kuvake -> Vaihda palkki harmaaksi

Päivämäärän muodon muokkaaminen

1. Asetukset-> 2. Muotoilu-> 3. Päivämäärän ylätunnisteen muoto-> 4. Valitse haluamasi muoto-> 5. Tallenna

Kopioinnin esto

Eli kun joku yrittää kopioida esim. tekstiäsi, näytölle tulee ilmoitus "NO COPY" tai valitsemasi teksti

Ulkoasu-> Lisää gadget->HTML/JavaScript-> Liitä koodi-> Tallenna-> Tallenna asettelu

Koodi:

<script language=javascript> var message="NO COPY!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>

Voit muuttaa kohtaa "NO COPY!" haluamaksi tekstiksi, mutta älä poista "-merkkejä. Voit muuttaa sen esim. "ÄLÄ KOPIOI!" tai "Tiesitkö, että koipioiminen on väärin" tai ihan minkälaiseksi vain haluat.

Gadget ilman otsikkoa

Jos haluat gadgetin, johon ei tule otsikkoa, laita otsikko kohtaan  <!-- -->