Eli tästä alkaa blogin muokkaamiseen liittyvä sarja! Nähään mitä tapahtuu, mutta ensimmäisenä ois semmonen pieni infopaussi ennen mitään muokkausjuttuja, että:
- Tiedot voi olla virheellisiä/toimimattomia. Kaikki tehtävä htmlmuokkaus perustuu mulla netistä ohjeiden lukemiseen, niistä oppimiseen ja puhtaaseen kokeiluun.
- Jos jokin menee pieleen, en vastaa seurauksista. Mä en ole vastuussa siitä että joku kaataa bloginsa vahingossa.
- Tää on aika näppärä neuvo: testaamalla oppii. Ja mitä enemmän muokkaa htmlää, sitä enemmän siitä alkaa jotain perusjuttuja tajuamaan.
- On kans ihan kätevää luoda testausblogi sen oikeen blogin vierelle, että sinne voi ensin testaa mitä tekee ja sen jälkeen siirtää toimivat jutut copypastella oikeeseen paikkaan omaan blogiin ja sumplia lisää jos tarve. Jos tekee testiblogin, se alkumalli on aika näppärää olla samanlainen kuin oman blogin malli.
- Netistä löytyy kaikkea jännää ja paljon eri vaihtoehtoja samaan asiaan, google on ystävä.
- Käytän ite vanhempaa blogimallia, sitä joka on otettu käyttöön 2006, en siis aivan uusinta mallia. Uusinta mallia en ole vielä oikeastaan edes kokeillut säätää.
- Oman blogini alkustage on Darren Delayen Denim, eli ensimmäinen vaihtoehto Denim -ulkoasun valikosta. Miksi? Sillä sivupalkki jatkuu postauspalkin kanssa kokonaan alas asti. Musta se on semisti esteettisemmän näköstä, mutta oma maku jokasella.
Pari hyödyllistä nettisivua aiheen tiimoille
- Colorpicker - helppokäyttöinen värivalitsin josta saa näppärästi napattua värikoodit talteen ulkoasua muokkaillessa
- Photobucket - toimiva kuvahostpalvelu, jonne saa kuvat talteen ulkoasua muokkaillessa.
- W3schools - hyviä ohjeita asiaan liittyvä, älykätevä!
Eli näin. Seuraavassa postauksessa ois tarkotus alottaa joistain ihan perushötöstä.
Kiinnostaa nähä paljon anonyymiranttausta saan näistä postauksista ;)
Lista tehdyistä postauksista aiheeseen liittyen:
Lista tehdyistä postauksista aiheeseen liittyen:
- Mainbar ja sidebar
- Header, taustakuva & Värit, fontit osa 1
- Värit, fontit osa 2
- Määreitä
- Navigointipalkin poisto
PS // Osa teistä varmaan lukee Millin blogia, Dream Catcher's Landia? Milli pyys mua vähän auttamaan asiassa, meinaan se muutti blogin osotetta hieman fiksumpaan muotoon, joka siis on nykyään http://dcsland.blogspot.com ! Eli edellinen blogiosote laserlights.blogspot.com on vanhentunu, ja sen kautta blogiin ei enää pääse.
Let me use, use, use, use up tonight
Give me your your your your your your mind
♥
SASSE
19 kommenttia:
kiittooss!♥
Malla: olehjuvaa!
KIITOS! Ei hitto, en ois todellakaan selvinny ilman näitä sun neuvoja :-D Viimein oli aikaa ja kiinnostusta värkkäillä ulkoasua ja sain ensimmäistä kertaa mieleisen. Jos vielä osaisit neuvoo kuin saada toi navigointipalkki poikkeen niin oisin happyhappy!
Ainiin ja sit piti vielä kysyä, että miten tuon "Tämän kirjoitti teille Sasse , kun kello oli 14:10" -kohdan voi poistaa tai miten sitä voi muokata!
Henna: Tämän kirjoitti teille blablabla kohtaa voi muokkailla menemällä Ulkoasu -> Sivuelementit -> Blogitekstit -> Muokkaa. Ja oon tyhmä ja en tajunnu navigointipalkkikysymystä, mut ainakin sitä voi muokkaa samaa kautta ku ylläolevaa, menemällä vaan kohtaan Navigointipalkki
Tota navigointipalkkia voi vaan muuttaa erilaiseksi muttei poistaa tuota kautta :-( Mut kiittikiitti taas!
nyt tulee tämmönen tyhmä kysymys en tajuu ku tota ku pitää siirtyy html-koodiin mitä se tarkotttaa?:D:D:D::D anteeks tämmönen
Ano Blogger.com -> Malli -> Muokkaa HTML-koodia
Miten kuvien reunukset saa pois?
Miten kuvien välit saa pienemmäksi, siis jos laittaa monta kuvaa peräkkäin niin niiden välit on pienet?
niin ja vielä tämä, että miten tämän contet barin saa tälleen läpinäkyväks mut sillee et täs on kumminki joku väri:D?
Ano 1 & 2. Kuvien reunukset pois: .post img, table.tr-caption-container {
margin: -4px;
padding: 0px;
border: 0px solid $borderColor;
-> eti toi .post img kohta ja kopioi siihen noi samat asetukset.
3. Contentin "vaalea läpinäkyvä tausta" on itseasiassa sama taustapattern muokattuna vaan vaaleammaksi kuin kokonaistaustan pattern. Kuitenkin onnistuu luomalla esim photoshopissa layer, johon laveeraa vaikka 50% läpinäkyvyydellä jotain väriä, tallentaa .png muotoon ja asettaa contentin ja sidebarin taustakuvaksi repeatilla.
Miten saa silleen blogissa että ne kuvat tummenee ku laittaa hiiren siihen kohalle?:) Jos tiiät nii selitä sillee tarkasti et miten ja nii ku en vielä oikee osaa::D
Ano Elikkäs. Tässä ohje, ota vain *-merkit pois kaikista väleistä. Mene html-koodiin ja etsi vaikka ctrl + f komennon avulla <*/head> tagi. Löytyy aika alhaalta koodista. Sitä ennen liität tämän koodinpätkän:
<*style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
<*/style>
Näin. Sitten sun pitää aina kuvia liittäessäsi mennä postauksessa HTML-koodi -muotoon ja muuttaa kuvakoodeihin tagi class="linkopacity". Eli esim näin:
Tästä: <a href="http://i38.photobucket.com/albums/e137/SoScrip/blogi/header.jpg" imagea......
Tähän: <a class="linkopacity" href="http://i38.photobucket.com/albums/e137/SoScrip/blogi/header.jpg" imagea......
ja näin kuvista saa läpikuultavia kunnes hiiren vie päälle. Tadah.
voikko selittää tarkemmin ku en oikeen ymmärtänyt?:D en löytäny sieltä sellaista kohtaa kuin <*/head> ja en tajunnu oikee muutenkaa ku en oo koskaa käyttäny nuita html juttuja:/ muistin ottaa ton * merkin siitä välistä
Ano <*/head> löytyy Footer kohtaa alempaa, ]]><*/b:skin> kohdan alta. En osaa tarkemmin selittää. Ja siis ennen <*/headia> kopioit ja liität ton ritirimpsun tosta. Sitte teet postauksen ja lisäät siihen kuvan. Sen jälkeen postauksen luonnissa vaihdatkin kohtaan "HTML". Siellä teet muutokset siihen kuvakohtaan niinkuin selitin aiemmin. Oon pahoillani mut en osaa purkaa tätä tän enempää palikoiks, jos ei aukee ni ehdotan vähän testailemaan perushtml & css juttuja ensin ja sit kokeilla uudestaan.
kiitti tosi paljo näistä ! mulla ois vielä pari kysymystä, jos mitenkää viittisit neuoa, nii ois tosi ihana !
1. miten saa tekstin ja kuvat samoille kohille ? kun mun blogissa teksti jää aina vähä vasemmalle. näin > http://sanni-justmemyselfandi.blogspot.fi/
2. miten saa hiireen jonku eri kuvan ku ton nuolen ?
3. miten saa blogin otsikon sivulle ? niinkuin tässä http://meri-neversaynever.blogspot.fi/
4. miten saa tekstin otsikon keskelle ?
5. miten saa päivämäärään tausta värin ?
KIIIITOS JO ETUKÄTEEN !
sanni Tässäpä vastauksia ja (* = >)
1. Ihan padding tai margin siellä jossain kusee. Kylläkin sun postauksessa yks kuva näyttäs olevan sivussa. Koitappa olla keskittämättä postauksen luontivaiheessa kuvia? Varmista myös ettei kuvilla oo borderia.
.post img, table.tr-caption-container {
margin: -4px;
padding: 0px;
border: 0px solid $borderColor;
tämmönen kohta määrittelee niitä mulla.
2. <head*
<style type="text/css"*<!--
a:hover {cursor:url("custom.cur"), pointer}
--*</style*
</head*
Elikkä, etit noi <head* tagit sun blogistas ja siirrät koodinpätkän siihen. Sitten custom.cur tilalle haluamas kursorin linkki (en oo testannu mutta pitäisi toimii, tuu naputtaa jossei toimi)
3. Tossa on sivupalkkiin heitetty kuva. Elikkä lisäät vaan sivupalkkiin Custom HTML/CSS ja siihen <center*<img src="kuvanlinkki" /*</center*
4. .post-title kohdan alle (ennen } -merkkiä) lisäät kohdan text-align:center;
5. .date-headerin alle background color:#tähän heksadesimaali nroina esim 000000;
Lähetä kommentti