Thursday, September 8, 2011

Pisut blogitegemise trikke

1. POSTITUSE TAUSTA ÜMARAD NURGAD

Mind huvitasid mõned siinsetest standard template'dest erinevad võimalused ja ma otsisin selle kohta netist juhendeid. Need ma ka leidsin. Alustuseks postituse tausta ümarad nurgad.
Et anda ümarad nurga POST taustale, paste see järgnev kood sellisesse kohta
nagu allpool kirjeldatud

Vali siit ülalt DESIGN,
siis TEMPLATE DESIGNER,
siis ülalt vasakult menüüst ADVANCED
ja lõpuks järgneva menüü viimane, ADD CSS
(Muuseas sinna lisad ka muud CSS vigurid, mida taha oma blogi muutmiseks kasutada)

div.post-outer {

-moz-border-radius: 16px; /*Firefox*/

-webkit-border-radius: 16px; /*Safari & Chrome*/

-khtml-border-radius: 16px;

border-radius: 16px; /*Standard CSS3 declarations & IE9*/

}

Välja näeb see CSS koodi lisamise koht Bloggeris selline:












Mis puudutab nurkade kumerust, siis tunne end vabalt pikslites määratud numbri muutmisel.

Lisaks võid kasutada ka häid CSS koodide genereerimise saite:
http://border-radius.com/
Väga lihtne ja näed kohe tulemuse ära. Muudkui copy/paste saadud kood ja ongi kõik.
Teine sait annab rohkem erinevaks otstarbeks mõeldud koode.
http://css3generator.com/


2. ENDA PISIPILDI RAAMI JA VARJU EEMALDAMINE (või muutmine)

See on võibolla pisut keerulisem, aga täiesti teostatav. Igaks juhuks soovitan järgida kõiki ette tulevaid juhiseid. Eriti neid mis soovitavad sisu enne tagavaraks ära salvestada.

Oma pisipildi raami ja varju ärakaotamine
pluss pisipildi taustavärvi muutmine läbipaistvaks.
Mina tegin seda selleks, et saada suvalise kujuga pisipilti.
(eelnevalt peab transparentsus muidugi juba png's olemas olema)
Neid siin näidatud muudatusi tuleb teha juba HTML koodis.
Koht ise on umbes koodi keskel.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0px;

 background: transparent;
  border: none;

  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);


Koht Bloggeri koodis näeb välja selline.


Nonii, esialgu aitab kah.
Eks proovige ja katsetage.

No comments:

Post a Comment