Kyseessä on siis tekstin otsikon linkin hover-efekti; kun hiiren vie
otsikon päälle, teksti alleviivautuu keskeltä reunoille.
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS
Lisää CSS:ään alla oleva 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;
}
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;
}
Siniseksi värjättyä heightin arvoa muuttamalla isommaksi viivan
paksuus kasvaa, ja numeroa muuttamalla pienemmäksi viivasta
tulee ohuempi.
Punaiseksi värjätty koodin osa on taas värikoodi, jonka tilalle
voit muuttaa jonkin koodin täältä.
Jos haluat efektin kaikkiin linkkeihin, poista jokaisen koodin
alusta kohta h3.post-title.
xoxo iltsu
Pöö taas :) Löytyiskö apua, miten esim. sinä saat life-style blogissasi kuvista vielä suuremmat? siis jos vertaat minun ja sinun blogisi kuvia, miten saat niistä niin _isot_? :O
VastaaPoistahttp://anniihhh.blogspot.fi/
pöö :) kiva kun linkkasit blogisi, niin ymmärrän paremmin tuon kokoasian!
Poistamutta siis sä käytät ilmeisesti blogissas kuvan kokona erittäin suurta? meikäläinen lataa kuvat flickrin kautta alkuperäisessä koossa, jonka mä olen muuttanut paintissa 800:aan :-)
tässä vielä oheinen postaus paintissa kuvan koon muuttamisesta kuvavihjeillä;
http://blogikoodeja.blogspot.fi/2013/10/kuvan-koon-muuttaminen.html
& sitten tietysti, jos lataat kuvat bloggerin kautta, niin kliksutat kuvaa & valitset "alkuperäinen koko" :-)
kysy ihmeessä, jos jäi vielä kysyttävää!(:
blogistas on ollu ihan sikana apua uuden blogin ulkoasun suhteen ja heitänki kysymyksen et sattuisitko tietää miten saa otsikon taustan mustaks ja tekstin valkoseks? :)
VastaaPoistavoi kun kiva kuulla! :)
Poistamillaista taustaa tarkoitat? sellaista, jossa vain tekstillä on tausta? se on itse asiassa melko helppo juttu :) menet vain mallin suunnittelutyökaluun -> lisäasetukset -> päivämääräotsikko. sieltä sitten klikkailet tekstinvärejä ja taustavärejä mieleisiksesi. jos siis tätä tarkoitit :) ?
sillai et blogitekstin otsikon tausta väri on musta ja se itse otsikkon teksti on valkosella, en tiiä osasinko vieläkään selittää tarpeeks hyvin :DD
Poistaoho, ymmärsin kysymyksesi ihan väärin :D siis tarkoitat tekstin otsikkoa, et päivämäärää, sori kauheesti!
Poistavilkasin sun blogia, niin siellä kyllä oli otsikon taustavärinä musta ja teksti valkosella? vai onks toi päivämäärä siun otsikkono blogissas? no mutta kuitenki, tällein se menee:
1. Malli -> mukauta -> lisäasetukset -> lisää css
2. Lisää CSS:ään alla oleva koodin pätkä:
.post-title { background-color: #c9c9c9;
muuta #-merkin jälkeinen numerokirjainyhdistelmä joksikin mieleiseksesi HTML-color codeksi, joita löytyy esim. täältä: http://html-color-codes.info/
rullaat sivua tarpeeksi alaspäin, kunnes tulet väripaletin kohdalle, jonka nimi on HTML Color Picker. sieltä sitten valitset mieleisesi värin ja lisäät #-merkin jälkeen.
toivottavasti tästä oli apua!(:
osaatko muuten sanoa mistä johtuu tai pikemminki miten saan korjattua ton että mulla on noi postaukset vähän "päälekkäin"? :D
VastaaPoistahttp://henna-emilian.blogspot.fi/
mmm... en ole varma, ymmärsinkö asiaasi :D pystytkö selittämään vielä uudelleen a) missä kohdassa juttu on blogissasi b) ja mikä juttu. vai ymmärsinkö ihan väärin, siis että haluaisit sellaisen efektin? vai siis sen pois? :D
Poista// toivottavasti saat jotain selkoa tästä mun sepostuksesta - meinaan on aivot viikonloppuhuollossa :--D
niin siis sain sen jo pois ja se oli silleen et mul meni blogitekstit päälekkäin jostain syystä
Poistaokei, hyvä :-)
Poistavoitko tehä postauksen siitä, miten saa gadgettien otsikot keskitettyä? :) Sun blogista on mullekkin ollu tosi paljon apua, koska html koodit ei mulla toimi. Tosin ei ihan kaikki sunkaan neuvomat jutut toimi, mutta luulisin että vika on ihan minussa. Mutta yksi mikä mua harmittaa kun ei toimi, on se postauksien erotin. Tein kaiken mitä sanoit ja kokeilin moneen kertaan, mutta ei vaan tapahdu mitään.. Et varman osaa auttaa, koska en osaa selittää paremmin, mutta taidan joku päivä yrittää vielä kerran.
VastaaPoistaJos ehdit, niin voisitko vilkasta mun blogin ja antaa jotain pikku vinkkejä siihen (siis ulkoasuun)? :)
http://vilmajakamujasaga.blogspot.fi/
oii, kiva kuulla, että musta on ollu sullekin apua! :) joo, teen ihan pian postauksen gadgettien otsikon keskittämisestä, kiitti vinkistä!(:
Poistaharmi, ettei kaikki koodit toimi, nimittäin mulla toimii :( eikä kyse välttämättä ole susta, voi olla kyse myös mallista tms. :) mutta aina kannattaa yrittää ainakin 3 kertaa & tarvittaessa muoksia koodeja. :)
SIITÄ EROTIN-DIVIDERISTÄ: oothan varmasti tehnyt kaiken oikein? lisännyt koodin kokonaisuudessaan css:ään, ilman, että olisit poistanut jotain merkkiä (paitsi niitä punaiseksi laitettuja)? jos yksikin piste tai aaltomerkki puuttuu, koodi ei välttämättä toimi.
tosin vika voi olla myös osoitteen valitsemissa, jos olet ladannut kuvasi photobucketiin. suosittelen, että luet alla olevan postauksen huolella:
http://blogikoodeja.blogspot.fi/2013/10/vahan-photobucketista.html
ja kopioit linkin sitten sieltä laatikosta, niin kuin ohjeissa mainitaan (musta paksunnettu kappale: "Jos sinun pitää kopioida kuvan linkki" tämän (alaotsikko): "MITEN KUVA GADGETIIN TAI POSTAUKSEEN?" alla) :--).
toivottavasti saisit koodit toimimaan ja erotin-homma onnistuisi! mulla nimittäin kävi aluks photobucketin kanssa sama homma linkkiä kopioitaessa, ettei koodi toiminut, koska olin kopsannut sivun linkin osoitekentässä :D mutta siitä laatikosta ne pitää kopsia(:
Sitten niitä vinkkejä sun blogiin yms. :):
- Toi banneri & facivon on tosi kivoja!
- Tykkään kanssa hillitystä ulkoasustas, se on niin siisti ! (:
- Pyöristetyistä kulmista ehdottomasti plussaa :) niistä näkee koodailua, tietty positiivista!
noi olikii vahingossa positiivisia juttuja, ei vinkkejä :D mutta alla sitten niitä pikkuvinkkejä;
- YouTube-palkin toivoisin olevan yhtä leveä kuin blogin kuvien leveyden :)
- ja keskitetty postausten otsikko olis kanssa kiva :)
muuta nyt ei oikeen tuu mieleen :D yleisvaikutelmaan mukava blogi!
Miten saan ne pysymään?
VastaaPoistaKiitos, kun teet näitä apupostauksia! ♥ Onko sulla jotain koodia, millä saisin sen viivan lähemmäksi tekstin otsikkoa?
VastaaPoista♥: http://tildahytonen.blogspot.fi/
Anteeksi, en tajunnut laittaa samaan kommentiin, minkä äsken laitoin, että olisko myös vinkkejä miten saisin tekstin otsikon pysymään ihan normaalina tekstinä niin, että, kun hiirellä menee tekstin otsikon päälle (ja se viivaus tulee siihen alle), se ei muutu vinoksi. Löytyiskikö mitään vinkkejä siihen?
VastaaPoista♥: http://tildahytonen.blogspot.fi/