torstai 7. tammikuuta 2016

Esiin tuleva navigaatiopalkki hiiren vietäessä päälle

Heippa! Tänään kerron teille koodin, joka poistaa blogista navigaatiopalkin, mutta kun hiiren vie blogin yläreunaan navigaatiopalkin paikalle, se ilmestyy. Hah, olenpa hyvä selittämään näitä asioita :D

Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit:

#navbar-iframe {
opacity: 0.0;
filter: alpha (opacity = 0, FinishedOpacity = 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

#navbar-iframe:hover {
opacity: 1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}


Koodi on "liukuva", eli navigaatiopalkki ei tule esiin töksähtäen, vaan transition-efektinä.

keskiviikko 6. tammikuuta 2016

Suosittujen tekstien (Popular posts) eteen numero

Heippa! Tänään kerron teille, miten saatte bloginne suositut tekstit numeroitua. Alla havainnollistava kuva.


Ihan ekaksi, sulla pitää olla Suositut tekstit -gadgetti blogissasi. Jos sulla ei sellaista vielä ole, mene Ulkoasu -> Lisää gadget -> Suositut tekstit. Sieltä sitten ruksitat itsellesi mieleiset vaihtoehdot.


Tämän jälkeen mene Malli > Mukauta > Lisäasetukset > Lisää CSS. Lisää alla olevat koodit (violetilla) boksiin. Äläkä pelästy, vaikka koodit näyttävät heprealta - avaan teille koodin kustomointimahdollisuuksia :)

#PopularPosts1 h2{
margin-bottom:0px;
font: 20px  black;

font-family: corbel;
font-weight: bold;
text-align:center;
}


Nyt on kyseessä h2 eli gadgetin otsikko. Punaisella olevat arvot ovat otsikon fonttiin liittyviä: 20px on koko, corbel on fontti ja black on fontin väri. Voit muuttaa noita jokaista kohtaa, laittaa esimerkiksi 20px:n kohdalle 15px, muuttaa fontiksi handleen ja muuttaa värin heksakoodimuotoon (#). Täältä löydät värejä ja täältä bloggerin lukemia fontteja. Jos haluat boldata eli lihavoida otsikon, pidä tuo pinkillä värjätty rivi, mutta jos et halua boldausta, poista rivi koodista. Center taas kertoo, että otsikko on keskellä - jos haluat otsikon vasempaan reunaan, laita centerin tilalle left ja jos haluat sen oikeaan reunaan, laita centerin tilalle right.


#PopularPosts1 ul{
counter-reset:li;
padding:10px;
}


Tästä koodinpätkästä ei kannata mitään muuttaa, mutta jos haluat kokeilla, voit muuttaa paddingin arvoa 10.

#PopularPosts1 li{
width: 250px;
}


Voit muuttaa widthiä eli widgetin leveyttä mieleiseksesi.

 #PopularPosts1 ul li{
position:relative;
display: block;
padding: 0.6em 0.2em 0.6em 2.1em;
margin: 0.5em 0;
background: #F3F3F3;
border-radius: 0.7em;
transition: all 0.3s ease-out;
}


Punaisella oleva heksakoodi on värikoodi, joka määrää widgetin taustan värin. Tässä esimerkissä #F3F3F3 vastaa vaaleanharmaata. Täältä voit lukea lisää blogin tekstin väreistä.


#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: static;
top: 50%;
margin: -1.4em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 18px;
color: white;
background: black;
border: 0.2em solid #fff;
box-shadow: 2px 3px 5px grey;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute; 
left:0;
transition: all 0.3s ease-out;
}


Tämä koodi on itse "numeropallojen" kustomointia varten. Vihreällä olevaa numeron kokoa voi muuttaa: mitä isompi luku, sitä isompi numero. Colorin arvo white kertoo numeron värin, joka siis on tässä koodissa (ja postauksen alun kuvassakin näkyy) valkoinen. Boldattu black kertoo numeron taustan eli mustan.

#PopularPosts1 ul li:hover{
background: lightgrey;
color:white;
}


Tämä koodi kertoo, miltä gadget näyttää, kun hiiri viedään päälle. Ylhäällä oleva kuva havainnollistaa tätä hover-efektiä (ympäröity punaisella). Koodin sininen lightgrey kertoo siis, että hiiren vietäessä päälle tausta muuttuu vaaleanharmaaksi eli vähän tummemmaksi kuin koodin #f3f3f3. Punainen white taas kertoo, että itse teksti muuttuu mustasta vaaleaksi.

#PopularPosts1 ul li a{
font: 17px corbel;
color: black;
display:block;
min-height:25px;
font-weight:bold;
text-transform: uppercase;
}


Tämä koodi taas pätee itse gadgetin tekstien otsikkoon (esimerkkikuvassa esim. Sidebar kuvat muokkaus). Punaiset arvot (17px corbel black) kertovat taas fontista - voit siis muuttaa tekstien otsikon väriä, kokoa ja fonttia. Pinkki font-weight on taas sama kuin ensimmäisen koodin sama rivi, jonka voi siis halutessaan poistaa, mikäli ei halua boldausta tekstien otsikkoon. Text-transformin arvo uppercase taas kertoo, että teksti on kirjoitettu CAPS LOCKILLA. Jos haluat otsikon olevan normaali (Esiin tuleva navbar eikä ESIIN TULEVA NAVBAR), korvaa uppercase sanalla capitalize.

***

Tää oli tässä, toivottavasti tästä oli apua :)!