Többen is megkerestek, hogy szeretnének kisebb-nagyobb változatásokat blog.hu-s blogjukban, de ködös a dolog. Leírom röviden mit hol lehet a legegyszerûbben változtatni, és hogyan tudjuk saját hirdetésünket elhelyezni. Valóban egyszerű, bárki nekiállhat, ha mégis elakadna vagy nincs türelme ezzel játszani, írjon nyugodtan.

Elsőnek javaslom hogy csinálj egy "biztonsági mentést", copy-zd ki azt a kódrészletet amin épp variálsz, és mentsd el valahova, hogy vissza tudd másolni ha nagyon elcsesznéd a kódot. Mindig valami egyszerű szövegszerkesztőt (notepad-ot) használj, Word-öt NE.

Hirdetés, akármi az Oldalsávon:

Megjelenítés / Oldaldobozok

Adjunk hozzá oldalunkhoz egy Html text dobozt, ebbe kerül majd hirdetésünk, akármink.
Katt a szerkesztésre, a címhez beírhatod a létrehozandó box nevét (hirdetés, én-fotóm, stb) a szöveghez kerül a html-kód.

Ha egy képet szeretnél, akkor szokás szerint töltsd fel az img v. images mappádba, majd pötyögd/copyzd be a következô sort a szöveghez:

<img src="hirdetes.jpg" alt="Kattints" width="150" height="150" />

A pirossal jelölt helyre másold be a képed url-jét, add meg a méretét, majd nyomj egy mentést. Kész.

Háttérszín megváltoztatása:

Megjelenítés / aktiv sablonod / CSS / body

A body kódrészlet valami ilyesmi általában:

body {
color:#FFFFFF;
margin-top: 0px;
font-family:Verdana, Helvetica, Sans-serif, Arial;
font-size: 12px;
text-align:left;
margin:0;
padding:0px 0 20px 0;

}

Itt simán a color melletti 6 karakterbôl álló színkódot kell megváltoztatni, legegyszerûbb photoshopban kiválasztani a kívánt színt és kimásolni onnan a hexadecimális kódot, de ha nincs photoshop akkor sincs baj.

Háttérkép beillesztése:

A képet töltsd fel a sablonod images vagy img mappájába, ha a listában megjelenik kattints rá, majd az URL-re mégegyszer, ezután a címsorból a https://m.blog.hu....hatter.jpg linket másold ki valahova, késôbb kelleni fog. (Fontos, hogy az m.blog-os címet használd, mással nem mûködik.)

Belépsz / megjelenítés / CSS / Body

Ide kell beszúrni a következô sort: background:url('img/sajathatterkep.jpg');
A két ' közé másold be az elôbb kicopyzott címét a háttérképednek, valahogy így:

body {
background:url('https://m.blog.hu/at/atjaro/skins/atjaro/img/sajathatterkep.jpg');
color:#FFFFFF;
margin-top: 0px;
font-family:Verdana, Helvetica, Sans-serif, Arial;
font-size: 12px;
text-align:left;
margin:0;
padding:0px 0 20px 0;

}

Hogy nagyobb monitoron is jól nézzen ki, érdemes beállítani hogy vízszintesen ismétlôdjön a háttérkép, ezt a: background-repeat: repeat-x; sorral teheted meg, ha az x-et y-ra változtatod, értelemszerûen függőlegesen fogja ismételni.  A kódunk most már valahogy így néz ki:

body {
background:url('img/patternbg_stars.jpg');
background-repeat: repeat-x;
color:#FFFFFF;
margin-top: 0px;
font-family:Verdana, Helvetica, Sans-serif, Arial;
font-size: 12px;
text-align:left;
margin:0;
padding:0px 0 20px 0;

}

Még rengeteg opció lehetséges, például fixre is állíthatod a hátteret a
background-attachment: fixed; sorral, ekkor görgetésnél a háttérkép álló helyzetben marad. Használhatsz tapétát (patternt) is, ami az egész oldalon vízszintesen és függôlegesen is ismétlôdik,  ekkor csak simán a repeat parancsot használd:

background-repeat: repeat;

Fejléc megváltoztatása:

A metódus ugyanaz mint a háttérképnél, de ezt a CSS-ünkön belül a Page header ablakban tudjuk módosítani:

div#pageHeader {
     background: url(http://atjaro.blog.hu/media/skins/sajatsablon/img/header.jpg);
     background-repeat: no-repeat;
     width: 952px;
     height: 170px;
    }
 

Ha a olyan sablonnal dolgozunk amiben alapból van fejléckép, és az új más méretű, akkor  adjuk meg itt a helyes méretet is.

Jó szórakozást!