Online oldalgenerátor - Online Page Generator

http://www.creatingonline.com/webmaster/html_generator.htm
Ezen az oldalon találhattok egy olyan ingyenes eszközt, mellyel kódolás nélkül tudtok különböző oldalfelépítéseket csinálni. Ezzel megszerkesztitek az új oldalt, kimásoljátok a kódot, és HTML írásmódban bemásoljátok az oldal tartalomrészébe.
A generátor Explorerben működik jól, ebben használd. Némi angoltudás szükséges.

Újdonság - Új oldal hozzáadása

A legfrissebb újdonság az, amit a Wordpress felhasználók régóta megtehetnek, azaz új oldalakat hozhatunk létre a Blogger blogokban is, maximum 10-et. Ezt a lehetőséget már régóta várják a bloggerek, nagyban növeli a blog tartalmának, szerkezetének rugalmasságát, mert nemcsak bejegyzésoldalt készíthetünk.
Ha átmegyünk a Blogger in Draftba, (így tudsz bemenni) akkor az Irányítópult - Bejegyzések fület választva megjelenik egy Oldalak szerkesztése választási lehetőség is. Itt hozhatunk létre új oldalakat, a posztoktól függetlenül, akár statikus tartalommal is, illetve teljesen más formai kinézettel, mint a bejegyzésoldalak.

Az oldalak nem jelennek meg a Feed-ben, így továbbra is csak a blog bejegyzésoldalait fogja továbbítani a feliratkozottaknak. Létrehozhatsz így különböző űrlapoldalakat, saját magadról egy bemutatkozó oldalt, archívum oldalt, képgaléria oldalt, linkajánlót stb., a lehetőségek száma végtelen.

Maga az oldalszerkesztés egyébként pontosan úgy néz ki, mintha egy bejegyzést írnánk, a cím az oldal címe lesz, a tartalomrészbe pedig tetszés szerint HTML kódot írhatunk, kialakítva az új oldalt.
Konkrét például szolgál ennek a blognak a Kapcsolat oldala, amelyben egy interaktív űrlapot helyeztem el. Az űrlapot online formkészítővel készítettem (http://opendir.hu/form vagy Google Docs), és a kész kódot bemásoltam az oldal tartalom részébe.

Az új oldal készítésének menete:

Blogger in Draft irányítópult - Bejegyzések - Oldalak szerkesztése - Oldal létrehozása
A cím részbe írd be az oldalad nevét. Rövid, ha lehet egyszavas címet adj.
Válts át HTML írásmódra, és a tartalomrészbe írd azt a kódot, amely az új oldaladhoz tartozik. Ha szerkeszteni fogod még, akkor csak mentsd el, ha kész, akkor nyomd meg az Oldal közzététele gombot.
Meg kell még jelenítened az oldalaid listáját valahol. Ezt lehet pl. a fejléc alján vízszintes irányban, vagy az oldalsávban függőlegesen. Válaszd ki, melyik elrendezést szeretnéd.
Ezután menj az Elrendezés fülre. Válaszd ki azt a helyet, ahol az oldalak listája megjelenjen. Header vagy Oldalsáv. Válaszd a Modul hozzáadása opciót, a felugró ablakból válaszd az Oldalak modult, alakítsd ki az oldalak sorrendjét (húzással), végezd el a beállításokat, Mentés. Mostantól látható lesz az oldalak listája.

A Blogger in Draft irányítópult

A hagyományos Blogger irányítópult helyett lehetőségünk van egy másik irányítópult használatára is: ez pedig a Blogger in Draft.

Ezt úgy érhetjük el, ha nem a hagyományos címen (http://www.blogger.com/home/) jelentkezünk be, hanem a http://draft.blogger.com/ címen. Ekkor ezt találjuk:

Itt olyan dolgokat próbálhatsz ki, amelyek újdonságnak számítanak, de még ún. bétaverziók, azaz eléggé megbízhatóak már, de még tesztelés alatt állnak.

Ha tetszik, akár állandóra is átállíthatod erre a módra az irányítópultodat (az enyém ilyen mindig), ehhez be kell jelölnöd ezt a négyzetet:

A pipa kivételével bármikor visszatérhetsz az eredeti irányítópulthoz is. Amit a Blogger in Draftban készítettél, továbbra is látható lesz a blogodban, viszont módosítani nem fogod tudni, mert egyes lehetőségek ott nem fognak látszani.
Ha csak időnként akarsz bekukucskálni, akkor azt a draft.blogger.com címen való bejelentkezéssel teheted meg.

Újdonság - Fájltárolás a Google Docs-ban

Már volt róla szó, hogy a blogírás egyik alapvető feltétele, legyen egy online tárhelyünk, ahová fájlokat tölthetünk fel. Sok blogcsinosításhoz használnunk kell javascript fájlokat, tárolnunk kell a sablonunkhoz tartozó képeinket, képeket szeretnénk belinkelni a cikkekhez, letölthető fájlokat akarunk a blogba tenni stb.
A legjobb természetesen, ha mindezt a Google fiókon belül meg lehet csinálni.

A képek tárolásához megfelel a Picasa webalbum, de egyéb fájltárolás eddig csak a Webhelyek-ben volt lehetséges. Azonban kissé nehézkes ez a módszer.
Most a Google azt az újdonságot vezette be, hogy a Google fiókon belüli Dokumentumok (Google Docs) alkalmazásban bármilyen fájl feltöltését lehetővé tette, és viszonylag egyszerűen használhatjuk is innen a fájljainkat. Ha bejelentkezel a Bloggerbe, és a Saját fiók lehetőséget választod, a Dokumentumok-ra kattints. Ez az alkalmazás nagyon jó különböző formátumú dokumentumok online szerkesztéséhez is - erről most nem ejtek szót - de ahogy beléptél, már látható is az üzenet az új fájltárolási lehetőségről. Rögtön ott találod a Feltöltés gombot is. Nyomd meg.
Válaszd a Feltöltendő fájlok kiválasztása lehetőséget.
Tallózd ki a feltöltendő fájlt.
Nyomd meg a Feltöltés megkezdése gombot.
A fájl feltöltődik, mostantól használhatod, csak az elérési útját (URL) kell megtudnod. Ez is nagyon könnyű:
Kattints a feltöltött fájl nevére
A felugró ablakban válaszd a Megosztás lehetőséget.
A legördülő menüből válaszd A link kérése a megosztáshoz opciót.
Jelöld be a
A linkkel rendelkezők közül bárki megtekintheti (nincs szükség bejelentkezésre) jelölőnégyzetet (a szerkesztést ne).
Másold ki a
A link megosztása e-mailben vagy azonnali üzenetben: szöveg alatti ablakocskából a fájl URL címét.
Nyomd meg a Mentés és bezárás gombot

Iniciálé - Drop caps, first letter

Ebben a posztban az első betű nagyobb és más színű, mint a többi. Ezt főleg az úgynevezett újságstílusú honlapokon alkalmazzák.

Lehetséges azonban szavak kiemelése is ezzel a módszerrel. Megváltoztathatod a stílust, színt, betűnagyságot, betűtípust is.

Bejegyzések szerkesztése - HTML-kód szerkesztése módra váltsd át az Írás módot.
Így kell beírnod:

<span style="color: #a64d79; float: left; 
font-size: 200%; padding-bottom: 0px; padding-left: 0px; 
padding-right: 2px; padding-top: 0px;">E</span>bben 
a posztban...

Ezután válts át az Írás módba, jelöld ki a megnagyobbított betűt vagy szót, az eszköztárban lévő parancsokkal megváltoztathatod a színét, stílusát, típusát, nagyságát tetszés szerint.

A legnépszerűbb posztok - Popular posts

Ez a modul az oldalsávban megjeleníti a 10 legtöbb kommentet kapott posztjaid listáját, a cím mögött zárójelben megjeleníti a kommentek számát is. Ennek a blognak az oldalsávjában láthatod működés közben.
Irányítópult - Elrendezés - Modul hozzáadása
Válassz HTML-Javascript fajtájút.
A címet töltsd ki, amire szeretnéd, a tartalom részbe másold a következő kódot:

Apróság: keret nélküli linkek

Legtöbb sablon olyan, hogy ha rákkattintasz egy linkre, akár kép, akár szöveg, akkor a kattintás ideje alatt a link egy szaggatott vonallal bekereteződik. Ez számomra zavaró, ezért el szoktam tüntetni. Nagyon egyszerű elérni ezt.

Minima sablon szélesítése

Kérdés:

Szeretném szélesebbre széthúzni a hasábokat, egyrészt a teljes sablon két szélét, másrészt a hasábok közti margótávolságot is. Elég sokat próbálkoztam, de nem sikerült megtalálnom a megfelelő megoldást.:-( Ebben tudnál nekem segíteni? Mit és milyen értékekre, a HTML kódokon belül hol kellene átírnom?

Az alap Minima áll a fejlécből, és az alsó részből. Az alsó részen belül van egy fő terület (a posztoké) és egy oldalsáv. A fő terület és az oldalsáv között pedig van egy-egy üres sáv.
A három hasábos Minima annyiban tér el ettől, hogy 2 oldalsáv van, és ennek megfelelően két üres sáv.
Példánkban egy 3 hasábos sablont szélesítünk meg, 900 pixelről 1000 pixelre. Az oldalsávok balról és jobbról vannak, a posztok területe középen. Ha a számítás menetét végignézed, akkor a kéthasábost is könnyedén meg tudod szélesíteni.
Irányítópult-Elrendezés-HTML kód szerkesztése

A szélességet a width mögötti szám adja meg. A dobozokon belül körben üresen maradó hely nagyságát a padding mögötti szám.
Keresd meg ezeket a részeket:

Fejléc doboza:

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid #ffffff;
}

Alsó rész legkülső doboza:

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

Ennek a kettőnek egyformának kell lenni. Most 900 pixel, a képernyő 1024 széles (általában), én 1000-1010 értékre írnám át.

Az alsó részen belül:

A középső rész doboza:

#main-wrapper {
width: 460px;
float: left;
margin:0px 10px 0px 0px;
word-wrap: break-word; /* fix for long text 
breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text 
content breaking IE sidebar float */
}

Oldalsáv doboza (mindkettő ilyen széles, egyszerre változik):

.sidebar-wrapper {
width: 205px;
float: left;
margin:0px 10px 0px 0px;
word-wrap: break-word; /* fix for long text 
breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text 
content breaking IE sidebar float */
}

Ha most tanulmányozod, akkor 205+205+460=870 az egész 900.  900-870=30
ennyi marad a két távolságra (15-15) az oldalsávok és a középső rész között. De az outer-wrappernek van még jobbról-balról 10-10 pixel paddingja is, ezért marad 5-5 pixel az üres sávokra.

Tehát pl.:
Az egész legyen 1000 széles.
A két "szünet" legyen nagyobb 20+20=40
Az oldalsávok csökkenjenek egy kicsit: 190+190=380
Mivel az alsó rész legkülső dobozában van 10px padding is (körben), ezért ez a jobb és a baloldalon erre nem engedi rátenni az oldalsávokat. Ez összesen 20px.
Akkor a középső rész szélessége nőjön:
380+40+20=440 1000-440= 560

Tehát példánkban:

#header-wrapper {
width: 1000px;

#outer-wrapper {
width: 1000px;

#main-wrapper {
width: 560px;

.sidebar-wrapper {
width: 195px;

Másik bloghoz másik profil - ugyanabban a Google fiókban

Kérdés:

3 kislány, én meg egy férj írta...
Kedves Wise Lady!
Lehet, hogy már írtál erről de ne találom.
Kérdésem, hogy hogyan lehet más a profil leírásom, ha egy második, de teljesen más témájú blogot szeretnék nyitni. Nem akarom, hogy ugyanaz a bemutatkozó szöveg jelenjen meg az újban oldalt. Lehet két blog de különböző profil leírással?
Köszönöm ha válaszolsz
Ágnes

Gördülő szöveg- vagy képdoboz

A blogom oldalsávjában Képeimből címmel egy gördülő doboz látható, amelybe szöveget és képet is rakhatunk. Oda teheted, ahová csak tetszik. A szöveges változatot a blog alsó sávjában nézheted meg működés közben.
A következő módon készül:

Irányítópult-Elrendezés.
Modul hozzáadása, a  HTML és Javascript modult válaszd
Töltsd ki a címet, a tartalomhoz pedig másold be ezt a kódot.

<div class="textwidget"><marquee 
align="left" direction="up" height="200" 
onmouseout="this.start()" onmouseover="this.stop()" 
scrollamount="2" width="105">

1. szöveg vagy kép
2. szöveg vagy kép
3. szöveg vagy kép
4. szöveg vagy kép
5. szöveg vagy kép
stb.
</marquee>
</div>

A doboz szélességét a width a magasságát a height mögé írt szám átírásával változtathatjuk.

Képeket csak internetes tárhelyről helyezhetünk el, ezt kell beírni:

<img src="http://aképelérésiútja" width="100" />

Képek elhelyezése a Picasa webalbumból:

Menj be a Google fiókodba, válaszd a Picasa webalbumokat. Keresd meg a képet, kattints rá.
Oldalt találod ezt: Link ehhez a fotóhoz. Kattints rá.
A kép beágyazása alatt található ablakból másold ki, ami ott van. Egy ilyen kódot kapsz:

<table style="width:auto;"><tr><td>
<a href="http://picasaweb.google.com/
lh/photo/UU9Lo4rzLFVME8A6yCDLzQ?authkey=Gv1sRgCNDem6L32dbIbA&feat=
embedwebsite"><img src="http://lh3.ggpht.com/_pHfsk7ExMQA/
ShhUgUCN4cI/AAAAAAAAA1A/C3jPYy5fxzc/s144/
joghurttorta.jpg" />
</a></td></tr><tr><td style="font-family:arial,sans-serif; 
font-size:11px; text-align:right">
Származási hely: <a href="http://picasaweb.google.com/
wiselady131/AnyaFoztje?authkey=Gv1sRgCNDem6L32dbIbA&feat=
embedwebsite">Anya főztje</a></td></tr>
</table>

A pirossal jelzett részt tartsd meg, a többit töröld ki.
Ezután gépeld bele az alább pirossal jelzett részt, és a számot úgy add meg, amilyen szélesre akarod a képet.

<img src="http://lh3.ggpht.com/_pHfsk7ExMQA/ShhUgUCN4cI/
AAAAAAAAA1A/C3jPYy5fxzc/s144/joghurttorta.jpg" width="100" />

Azt, hogy melyik irányba gördüljön, ebben a kódrészletben adhatod meg:
direction"up"

up felfelé
down lefelé
left balra
right jobbra
Írd át a neked megfelelő szóra az idézőjelek közötti részt.