torstai 15. joulukuuta 2016

Luukku 14: Hyviä CSS-koodeja



Mitä?
Blogikoodit ovat erilaisia koodeja, joita voi lisätä CSS.ään tai HTML:ään. Itse käytän lähinnä vain CSS:ää, sillä omasta mielestäni se on helppokäyttöisempi. 
Mistä?
Koodeja löytää paljon erilaisilta sivustoilta, kuten blogeista, joista on tarkoitus kopioida koodeja. Yksi tällainen ja oma suosikkini näistä on varmaankin suomalainen Blogikoodeja-sivusto.

Miksi?
Koodien ideana on muokata blogin ulkoasua kivemmaksi ja saada siitä juuri omanlaisensa näköinen. Blogikoodien avulla voi tehdä pieniä sekä isompiakin muutoksia blogiin. Omassa blogissanikin on tälläkin hetkellä varmaan yli 20 erilaista koodia sekä muita samankaltaisia muokkauksia.

Miten?
Esimerkiksi CSS:ään koodin voit lisätä näin:
Blogger.com -> Malli -> Mukauta -> Lisäasetukset -> Lisää CSS




Muutamia hyviä koodeja kopioitavaksi:





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

.date-header {

text-align:center;
}




Kuvien reunuksilla tarkoitan valkoisia reunoja tai outoa varjostusta kuvan ympärillä

.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);
}





.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}





Linkin takaa löytyy suuri määrä erilaisia koodeja, joide avulla voit kehystää tai alleviivata halutun kohteen.

.post-title{
border-bottom: 2px dashed grey;
}






.sidebar {
text-align: center;
}





(samankaltainen kuin edellinen koodi)

#ArchiveList{
text-align: center;
}






.content-inner { 
margin-top: -30px; 
}





Linkkiä klikkaamalla löytyy myös muita efektejä kuviin.



.post-body img:hover {
opacity:0.2;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{

opacity:1;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;






a:hover{
font-style: italic;
}




.post-body img{
margin-left: -10px;
}





Ohjeen näet linkkiä klikkaamalla.





Ohjeen näet linkkiä klikkaamalla.






Koodin ja sen kustomoinnin ohjeet näet linkkiä klikkaamalla.



Toivottavasti näistä oli edes jollekkin apua!

Ei kommentteja:

Lähetä kommentti

- Kivat kommentit piristävät aina päivää :)
- Asiallinen kritiikki ja palaute ovat sallittuja.
- Ilkeät kommentit poistetaan!