Látható/rejtett szöveg oldalsávban- Show/hide text

A read more kapcsán tárgyalt kis scriptet az oldalsávban is használhatjuk arra, hogy kattintásra előbújó szöveget, formot stb. tegyünk oda. A blogom oldalsávjában látható Iratkozz fel emailben widgeten láthatod működés közben.





Kérj új modult, válaszd a HTML/javascript lehetőséget.
Ezt írd bele:

<style>.commenthidden {display:none}
.commentshown {display:inline}</style>

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden"; } 
else { whichpost.className="commentshown"; }
} </script>

<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">
Kattintandó szöveg vagy kép</a><div class="commenthidden" id="UNIQUE NAME">
<p>
Ide kerül az a rész, amelyet elrejteni akarsz
</div>

UNIQUENAME helyére beírtam emailrss
Kattintandó szöveg lett: +/- Kattints!
Az elrejteni szánt részbe bemásoltam azt kódot, amelyet a Feedburner adott a blogomhoz.

Read more másképp - Show/hide

Lilianyja kérdezte, hogyan lehet úgy read more beszúrást készíteni, hogy csak a poszt eleje látszódjék, és a read more-ra kattintva megjelenjen a többi része is, anélkül, hogy eltávoznánk a főlapról. Nos találtam egy cikket, amelyben van egy kis javascript, a segítségével megtehetjük ezt. Elrendezés - HTML-kód szerkesztése Ctrl+f Írd be a keresőablakba: /b:skin Keresd meg:

]]></b:skin>

Szúrd be ELÉ ezt a CSS kódot:

.commenthidden {display:none;}
.commentshown {display:inline;}

Most keresd meg ezt:

</head>

Szúrd be ELÉ ezt a javascriptet:

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden"; } 
else { whichpost.className="commentshown"; }
} </script>

Mentsd el a sablont. Most menj ide: Irányítópult - Beállítások - Formázás Keresd ezt: Bejegyzéssablon Az ablakba szúrd be ezt a kódot:

<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">
Read more...</a><div class="commenthidden" id="UNIQUE NAME"><p>
Ez a posztnak az a része, amelyet elrejteni akarsz</p></div>

A pirossal jelzett részt nevezd el tetszésed szerint (pl. a neved), és a Read more... szöveg helyére írj egy neked tetsző kifejezést, vagy linkelj be egy readmore képet a helyére így:

<img src="http://kepeleresiutja.jpg" />

Mentsd el a változtatást. Így használhatod: Kérj Új bejegyzést, válts HTML írásmódra. Ezt fogod látni az ablakban:

<a aiotitle="click to expand" href="javascript:togglecomments('wiselady')">Read more...</a><div class="commenthidden" id="wiselady">
<p>
Ez a posztnak az a része, amelyet elrejteni akarsz</p></div>

Írd elé azt, amiről azt akarod, hogy látszódjék. Írd a piros rész helyére azt, amit elrejteni akarsz. Kép beszúrásához átválthatsz Írás módba is. Azaz:

Ez a posztnak az a része, ami látszódik.
<a aiotitle="click to expand" href="javascript:togglecomments('wiselady')">Read more</a><div class="commenthidden" id="wiselady">
<p>
Ez a posztnak az a része, amelyet elrejteni akarsz</p></div>

Ezután változtasd meg a Unique name részt is - ez ebben a példában a wiselady szó. Tehát mindegyik posztnál más legyen az azonosító, de egy poszton belül ugyanaz. Számot is használhatsz.
A tesztblogomon láthatod működés közben is: Show/hide javascript
Vigyázat! Aki ezt a megoldást használja, annak nem kell alkalmaznia a jump-link módszert!
Eredeti cikk:
http://www.blogosys.com/2008/12/expand-or-collapse-post-link-script.html

Kéthasábos poszt - two column post

Látványossá tehető egy-egy poszt, ha a szöveget két hasábon írjuk.
Nagyon jól használható az oldalak készítésekor is. Példát láthatsz erre ennek a blognak az archívum oldalán.





Így néz ki:

Lorem ipsum nam labores scripserit te, an qui quas mundi accusamus. Aliquid graecis ancillae cu nec, vix fuisset mediocrem salutandi at, sea ubique discere verterem at. Percipit lobortis accommodare sea ne, pro odio graece nominati at. Per ea vide oportere, ad ullum gubergren reprimique nec, his dicat quaeque commune no. Cu mei nisl meliore volumus. Ei quod verterem rationibus duo, ei etiam fabellas vix, ad eos docendi scaevola lobortis.

Ut semper phaedrum deserunt nam, ea sit modus aliquip nominati. No eos alia habemus commune, nulla dolorum eligendi ut eum, eum minim viderer recusabo et. Sit at noluisse ocurreret, quot assum utroque vel te, omnis consulatu eu mel. Sumo novum noluisse per te, clita fabulas scriptorem ut pri, vel ne labore atomorum interesset. Scripta alterum docendi ad per, dolores blandit singulis et pri.

A megvalósítása:
A posztot HTML módban írd. Másold be ezt a kódot. A piros részekbe tetszőleges tartalmat tehetsz.

<div style="float: left; width: 45%;">
Ide jön a bal hasáb tartalma
</div>
<div style="float: right; width: 45%;">
Ide jön a jobb hasáb tartalma
</div>

Ha elgondolkodunk rajta, akkor még sok alkalmazási területet találhatunk az ilyen elrendezéshez. Neked is van ötleted?

Vízszintes oldalnavigáció - régi Minima sablonban

Már volt róla szó ebben a cikkben, hogyan kell a fejléc alatt vízszintes oldalnavigációs sávot létrehozni. Ezt a lehetőséget ugyanis a frissített Minima sablon már tartalmazza. Nem olyan régi az a lehetőség, hogy a bloggerben is lehet oldalakat létrehozni, és ehhez felfrissítették a Minima sablont is.
Mit tegyünk azonban, ha mi még ez előtti sablont használunk, és nincs kedvünk sabloncserébe fogni? A régi sablonból ugyanis hiányzik a fejléc alatti modul hozzáadása doboz, ahová az oldalak modult elhelyezhetnénk.
Nos, jó hírem van, egyszerű megoldani a dolgot.

Elrendezés - HTML-kód szerkesztése - Vezérlősablonok kibontása

Ctrl+f
Írjuk be a keresőablakba: crosscol-wrapper
Ezt találjuk:

<div id='crosscol-wrapper' style='text-align:center'>
      <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

Csak annyi a dolgunk, hogy a no szót yes szóra átírjuk.

<div id='crosscol-wrapper' style='text-align:center'>
      <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
      </div>

Mentsük a sablont.
Az Elrendezés fülön megjelent a Modul hozzáadása doboz a fejléc alatt.
Innentől ugyanúgy kell csinálnunk mindent, mint ahogy ebben a cikkben olvasható.

Betűméret növelése

Nagyon sok blogger használja az alapsablonokat. Ezekkel az a gond, hogy régiek, és még olyan monitorfelbontásra készültek, ami akkor volt használatos (pl. 600x800). Azóta viszont rengeteget változtak a monitorok, sokkal nagyobb felbontásban is nézhetik a blogodat. Mondom nézhetik, de nemigen olvashatják, mert a betűk nagyobb felbontásban már nagyon apróak. Ezt a gondot még a mostanában készült sablonokon is tapasztalhatjuk.
Nem minden sablon alkalmaz egyforma megoldásokat a betűméretek megadására, de az alább ismertetett módszer sok sablonnál alkalmazható.

Minden résznek megadják az alap betűnagyságát - body, header, sidebar, blogtitle, description, postfooter stb.
Ezt általában a következő módon: x-small, small, medium, large, x-large.
A változóknál pedig beállíthatjuk, hogy ennek az alap nagyságnak hány %-át akarjuk.

Változtassuk meg most az oldal (body) betűnagyságát.

Keressük meg a kódban ezt a részt:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Az x-small az alap nagyság, ezt írjuk át small értékre.
Ettől még számottevő változást nem érzékelünk, az alapot eggyel megnagyobbítottuk.

Most keressük meg ezt a részt (a kód elején van):

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Amit a default mögött látunk, az a szokásos, azaz a formázás nélkül látható alapérték (100%), amit a value mögött látunk, az az, amit mi akarunk, hogy legyen (100%). A % érték azt mondja meg, hogy az alap betűnagysághoz képest (small) hány % nagyságú betűk legyenek.
Írjuk át a value mögötti értéket pl. 130 %-ra

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 130% Georgia, Serif">

Mentsük a sablont, és nézzük meg, mekkora lett a betűnagyság. Ha jónak találjuk, rendben, ha nem jó, akkor kísérletezzük ki, hány %-ot kell beírnunk, hogy jól olvasható betűnagyság legyen.

Ugyanezzel a módszerrel lehet pl. a post-title, vagy a post-footer stb. betűnagyságait is megnövelni.

Ha sikerrel jártatok, írjátok meg!

Vízszintes navigáció - Minima sablonban

A Bloggerben létrehozott oldalak elhelyezése kétféle módon szokásos. Függőlegesen az oldalsávban vagy vízszintesen a fejlécben, vagy a fejléc alatt.








Most a vízszintes navigációt mutatom meg, Minima sablon esetén.

Ugye hogy milyen könnyű volt?

Blogteszt különböző bőngészőkben - Browsers test

Egy online eszközt ajánlok arra, hogy meg tudd nézni, hogyan látják a blogodat különböző operációs rendszerekkel, különböző böngészőkkel és képernyőfelbontásokkal.

http://browsershots.org/

Felül láthatók az operációs rendszerek: Linux, Windows, Mac OS és BSD.
Alattuk a rajtuk futtatható böngészők neve verziószámmal.
Pipálással kiválaszthatod, hogy melyik böngészőre vagy kíváncsi.
A legalsó részen legördülő ablakokból választhatsz monitor felbontást (képernyő szélesség pixelben), illetve még mást is (milyen színfelbontást használ, milyen Java fut az olvasód gépén, van-e flash lejátszó)

Ha mindezt kiválasztottad, akkor a legfelső ablakba gépeld be a megvizsgálandó honlap címét. Használd a http:// előtagot is és / jellel zárd.
Pl.:
Enter URL here:   http://www.bloggerbloggerek.blogspot.com/
Majd nyomd meg a Submit gombot

A screenshot-ok elkészülése jelentős időt vesz igénybe, már 10 böngésző kiválasztásával is kb. 30 perc.
Addig olvass híreket :)
Közben a képernyőn folyamatosan láthatod mennyi idő van még hátra, mennyi készült már el, és amelyik screenshot már kész, az folyamatosan meg is jelenik.

Ha letelt az idő, akkor olvasd el mennyi töltödött le. Van, amelyiket elutasított a szerver. Hogy ennek mi az oka, ki lehet nyomozgatni, de még így is sok információhoz jutottál.
A screenshotok alatt találsz egy linket is, ahol letöltheted az egészet, és tanulmányozhatod.

Videa video beszúrása a bejegyzésbe

Kérdést kaptam:

Olyan gondom van, hogy nem tudok videót közzétenni a blogomon a bejegyzésben, mert kiírja, hogy hibás html kód. A nézetnél viszont megjelenik, de a múltkor közzétettem egyet, és teljesen szétcsúszott a blog tőle, törölnöm kellett.

Ha találunk egy nekünk tetsző videot a videa.hu-n, akkor a video alatt az alsó Beágyazás sorban lévő kódot kell kimásolni. Ez pl. így néz ki:

<object width="448" height="366">
<param name="movie" value="http://videa.hu/flvplayer.swf?v=mG1jZNuRaO3iKdgc" />
<param name="allowscriptaccess" value="always" />
<param name="allowFullScreen" value="true" />
<embed width="448" height="366" 
src="http://videa.hu/flvplayer.swf?v=mG1jZNuRaO3iKdgc" 
allowscriptaccess="always" allowfullscreen="true" 
type="application/x-shockwave-flash" /></object>
<br /><a href="http://videa.hu/videok/film-animacio/regi-reklamok-45-sebaj-jovunk-bajusz-retro-takarito-mG1jZNuRaO3iKdgc" title="Régi reklámok 45 -Sebaj jövünk">szólj hozzá: Régi reklámok 45 -Sebaj jövünk</a>

Váltsunk Írás fülről HTML fülre, szúrjuk be a kódot a bejegyzésbe.
Figyelmeztetés jelenik meg, hogy hibás a kód.
Módosítsuk az előző kódban pirossal jelzett részt erre a pirossal jelzett részre:

<object width="448" height="366">
<param name="movie" value="http://videa.hu/flvplayer.swf?v=mG1jZNuRaO3iKdgc" />
<param name="allowscriptaccess" value="always" />
<param name="allowFullScreen" value="true" />
<embed width="448" height="366" 
src="http://videa.hu/flvplayer.swf?v=mG1jZNuRaO3iKdgc" allowscriptaccess="always" allowfullscreen="true" 
type="application/x-shockwave-flash" ></embed></object><br /><a href="http://videa.hu/videok/film-animacio/regi-reklamok-45-sebaj-jovunk-bajusz-retro-takarito-mG1jZNuRaO3iKdgc" 
title="Régi reklámok 45 -Sebaj jövünk">szólj hozzá: Régi reklámok 45 -Sebaj jövünk</a>

A beszúrt video szélességét a posztoknak a sablonban megadott szélessége határozza meg. Ha nincs annyi helyünk, mint amit a width mögötti szám mutat, akkor csökkentsük ezt a számot, de a magasságot is (height) csökkentenünk kell ezzel arányosan, hogy a video ne torzuljon.
Pl. itt a szélesség 448, a magasság 366.
A szélességet 300-ra akarjuk venni.
Számítsuk ki mennyi: 300/448
Azt kapjuk: 0,67
Akkor a magasságot 0,67x366=250-re kell módosítanunk. Tehát:
width="300" height="250"
Mind a két helyen módosítsuk a szélesség és magasság értékeket!

Ingyenes tárhely

Egy remek tárhelyet rendelhetsz hozzá a Blogger blogodhoz, mérete 1 GB. Itt tárolhatod a sablonodhoz tartozó képeket, a letöltésre szánt fájlokat és a sablonodhoz használt javascripteket, melyekkel egészen bonyolult dolgokat is csinálhatsz a blogoddal.

http://www.mydatanest.com/home.php

Get a free online accounts in 40 seconds... gombra kattints
Válaszd a Basic, always free alatt a Sign up gombot.

Basic
ALWAYS FREE
For light users
3 Collaboration Folders
Online Office Suite
No File Revision History
2 GB Online Storage
50 MB File Uploads
10 GB Monthly Transfer
Standard Support

Töltsd ki a kötelező mezőket, válaszd ki az emailcímed ki láthatja, fogadd el a Terms of use részt
Create
Már kész is!
OK gomb
Bejelentkezés

Menj be a shared mappába, és készítsd el a saját mappájaidat. A létrehozott mappára kattintva abban is készíthetsz mappát (Add subfolder)

Most kattints a Home parancsra

Ha már feltöltöttél egy fájlt, akkor a My files menüpontban tekintheted meg. Oldalt láthatod a mappáidat. Egyszerű húzással beleteheted a neked tetszőbe. Még meg kell tudnod az elérési útját, miután elhelyezted a megfelelő mappában. Menj a mappába, ott megtalálod a fájlt.
Jobb egérgomb - Tulajdonságok
Az URL mögött megtalálod az elérési utat, amelyet kimásolsz, és ezzel hivatkozhatsz (linkelhetsz) az adott fájlra.

Tallózd ki a megfelelő mappát, ahol dolgozni akarsz. Töltsd fel a fájlt, vagy törölj, vagy tudd meg a kódját.
Azokat a mappákat, melyeket a blogodhoz használni szeretnél állítsd shared és hidden beállításra. Amiket meg akarsz tartani magadnak, legyenek private módra állítva.

Innentől már magad is ki tudod tapasztalgatni, nem részletezem.

Szövegdoboz - Text box

Akár bejegyzésbe, akár az oldalsávba elhelyezhetünk olyan szövegdobozt, amely adott szélességű és magasságú helyet foglal el, és a benne lévő szöveget az oldalsó és alsó gördítősávval olvashatjuk el. A leggyakoribb alkalmazások egyike, amikor a bejegyzésbe kódrészleteket helyezünk el, és ezeket dobozokba rakjuk.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Elkészítése nagyon egyszerű:
Bejegyzésben:
Válts HTML írásmódra.
Kattints rá: Bejegyzés beállításai
A HTML-sortörések szerkesztése-nél válaszd ki:

<br /> kódok használata

Majd írd be:

<textarea cols="30" name="textarea" rows="5" wrap="VIRTUAL">
   Ide jöhet a szöveg.
</textarea>

Oldalsávban:
Kérj egy HTML/Javascript modult, s abba másold a fenti kódot. Így hosszabb szöveget is elhelyezhetsz kevesebb helyen.

A doboz szélességét a cols mögötti számmal tudod változtatni a rows mögötti szám pedig megadja, hogy hány sor magas legyen.

Ne feledd, ha másik posztot írsz, válts vissza a <br /> kódok használatáról újra az Enter lenyomására.

Kapcsolódó cikkek - Related posts

Minden post alatt megjelenő 5 elemű felsorolás, mely az adott cikkhez kapcsolódó más cikket ajánl.

Irányítópult - Elrendezés - HTML-kód szerkesztése - Vezérlősablonok kibontása

Ctrl+f

Írd be  </head>

Közvetlenül ELÉ szúrd be ezt a kódot:

<style>
#related-posts { 
float : left; 
width : 540px; 
margin-top:20px; 
margin-left : 5px; 
margin-bottom:20px; 
font : 11px Verdana; 
margin-bottom:10px; 
} 
#related-posts .widget { 
list-style-type : none; 
margin : 5px 0 5px 0; 
padding : 0; 
} 
#related-posts .widget h2, #related-posts h2 { 
font-size : 20px; 
font-weight : normal; 
margin : 5px 7px 0; 
padding : 0 0 5px; 
} 
#related-posts a { 
text-decoration : none; } 
#related-posts a:hover { text-decoration : none; } 
#related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { 
display : block; 
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycM-cqP9EM8Iv63PtBKAQTmkZqH6c1MvmnBCGWZfP5U2Gpo2AblEt0St1KTmFFZ5jtRAyI6qkPUePkwkjao7OGHRtF_iWl3aKvyq3hSpHFf3apF2LQSPam5Nh0JdzkCOSEJGtUNVMoxY/") no-repeat 0 0; 
margin : 0; 
padding-top : 0; 
padding-right : 0; 
padding-bottom : 1px; 
padding-left : 21px; 
margin-bottom : 5px; 
line-height : 2em; 
border-bottom:1px dotted #cccccc; 
} 
</style> 
<script src='http://nora-papp.extra.hu/blogger/js/related_posts_hack.js' type='text/javascript'/>

Most írd be a Ctrl+f keresőbe: post-footer-line
Ebből akár többet is találsz, ez sablonfüggő, van amelyikben az első van csak.:
post-footer-line-1
post-footer-line-2
post-footer line-3

Ez a rész így néz ki:

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
    ...
    </div>
    <div class='post-footer-line post-footer-line-2'>
    ...
    </div>
    <div class='post-footer-line post-footer-line-3'>
    ...
    </div>
</div>

A lényeg, hogy az utolsó után a jelzett részbe szúrd be a következő kódot

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
    ...
    </div>
    <div class='post-footer-line post-footer-line-2'>
    ...
    </div>
    <div class='post-footer-line post-footer-line-3'>
    ...
    </div>

Ide szúrd be a kódot

</div>

Ezt kell beszúrni:

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font>
<font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/> </b:if>
</b:loop> 
</font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Ebben van egy 5-ös szám. Ha ezt átírod, az ajánlott cikkek számát változtathatod. A Kapcsolódó cikkek: szavakat is átírhatod neked tetszőre.
Mentsd el a sablont.
A widgetet nálam láthatod a cikk alatt működés közben.

Kreatív blogger

Elismerést kaptam, és örültem neki. "egy ember" ítélte nekem, akinek nagyon érdekes és tartalmas blogjai vannak (itt és itt), úgy látom, rendszeres olvasóm. Köszönöm neki.
Cserébe 7 dolgot kell elárulnom magamról:
1. szenvedélyem a web (blog, honlap, design, programozás stb.)
2. szeretek főzni
3. szeretek fotózni
4. jópár gyerekem is van
5. imádom a könyveket is, rengeteget olvastam, kevésbé rengeteget olvasok
6. szemüveges vagyok és alacsony
7. szőke nő vagyok (eleve is, meg még rá is segítek) :D

7 embernek kell továbbadnom, és értesíteni őket. De mivel a matematika is a szakmám, tudom, hogy így egy kör alatt végigfut a díj, s mindenkihez eljut. Nem is nagyon találtam olyat, aki mástól már meg ne kapta volna.
Így csak egy bloggernek adom tovább: Szilmarillának, aki szerintem nagyon kreatív blogger.

Betűméret - fontsize widget

Ezt a kódot egy HTML/Javascript modulba másolhatod, és elhelyezheted pl. az oldalsávban vagy a fejlécben. Segítségével az olvasód megváltoztathatja a betűméretet a könnyebb olvashatóság érdekében.
Így működik, próbáld ki:
 X-small   Small   Medium   Large   X-Large 

Kérj egy HTML/Javascript modult, és másold bele ezt a kódot. A Small, Medium... szavakat tetszés szerint átírhatod, vagy csak egy A betűt írsz, vagy XS S M L XL karaktereket, stb.

 XS   S   M   L   XL 

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span style="font-size: xx-small;"> XS </span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='0.8em'"><span style="font-size: x-small;"> S </span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.0em'"><span style="font-size: small;"> M </span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.2em'"><span style="font-size: large;"> L </span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.4em'"><span style="font-size: x-large;"> XL </span></a>

Blogger limitek

A blogod tárhelyigényét 3 fő dolog határozza meg.

• A posztok és a kommentek szövegének mérete
• A felhasznált fájlok mérete - képek, javascriptek
• A bloghoz rendelt email fiók kapacitása

Ezekből az utolsó 2, ami jelentős, ezt így tudod megnézni. A Gmail: kb. 7 GB,  a Picasa 1 GB tárhelyet biztosít.
Az első, azaz a szövegek olyan pici méretűek, hogy ebből a szempontból gyakorlatilag korlátlan lehetőséggel rendelkezel. A Blogger Helpből azonban megtudható erről is néhány információ:

Blogok száma: Korlátlan.
Hozzászólások száma: Korlátlan.
Posztok száma: Korlátlan. Viszont az egyes posztoknak van mérethatára. A túl nagy posztoknak az egyes lapok mérete szab határt.
Oldalak egyenként: 1 MB
A blog leírás (ami a fejlécben szokott lenni) max. 500 karakter
A profilod: max. 1200 karakter
Tagok száma: korlátlan
Kedvencek: max. 20 elem, egyenként max. 60 karakter

Azt lehet tehát mondani, hogy a posztok és hozzászólások méretével átlagos felhasználás mellett nem nagyon kell törődnünk.
Előfordulhat, hogy a főoldalunk átlépi az 1 MB-os határt, ilyenkor a főoldalon megjelenített posztok számát csökkentsük.
Ha az archívum oldal lépi át ezt a korlátot, akkor pedig ajánlott a hetenkénti archívumot havonkéntira állítani, vagy pedig külön archívum oldalt készíteni. A méretkorlát átlépése ugyanis a blog betöltődés jelentős lassulását okozza.

Google tárhely mérete

Itt tudod megnézni, mennyi tárhely kapacitásod van még. A Gmail és a Picasa állapotát mutatja.
Menj be a Google fiókodba, majd gépeld be a böngészőbe ezt a címet:

https://www.google.com/accounts/ManageStorage

Linklista másképp - linkek új ablakban

Egy olvasó írta:

"...kérlek segíts nekem, a linklista beállításai ablakban mit kell beírnom és hová, hogy az ajánlott linkek új ablakban nyíljanak meg."

A linklista modul kódját nem tudjuk módosítani, a modul tartalmát nem tudjuk kimásolni, pedig bizonyos problémák esetén jó lenne, ha megtehetnénk.
Egy ilyen probléma pl. az, ha el akarjuk érni, hogy a linkjeink új ablakban nyíljanak meg.

Ehhez először is a linklistát készítsük el, de ne a linklista modullal, hanem bejegyzésben.

Új bejegyzés - Írás mód
Írjuk be a szöveget, jelöljük ki, nyomjuk meg a Link parancsot, gépeljük be az URL-t
Enter
Ezt mindaddig folytassuk, míg a lista összes eleme nincs kész.
Ekkor mentsük el a bejegyzést piszkozatnak.
Váltsunk át a bejegyzésnél most HTML módra
Ilyeneket fogunk látni:

<a href="http://hungariancook.blogspot.com">Anya főztje</a>
<a href="http://bloggerbloggerek.blogspot.com">Blogger's bloggers</a>
<a href="http://hucook.blogspot.com">Hungarian Cook</a>

Ezt a kódot másoljuk ki.
Elrendezés - Modul hozzáadása - HTML/Javascript
Másoljuk a belsejébe a linklistát, mentsük a sablont.

Az elkészítéshez használt piszkozati bejegyzést most már törölhetjük. Az így elkészített lista akkor is jól jöhet, ha sablont akarunk cserélni, és sok linklistánk van. Így egyszerűen elmenthetjük a tartalmukat, majd sabloncsere után visszamásolgathatjuk  HTML/Javascript modulokba. Ha azt szeretnénk, hogy a linklista elemére kattintva a hivatkozás új ablakban nyíljon meg, akkor csak ilyen módon készített listával tudjuk ezt elérni, a következő módon: egészítsük ki a kódot a piros részekkel.

<a href="http://hungariancook.blogspot.com" target="_blank">Anya főztje</a>
<a href="http://bloggerbloggerek.blogspot.com" target="_blank">Blogger's bloggers</a>
<a href="http://hucook.blogspot.com" target="_blank">Hungarian Cook</a>

Még szebbé tehetjük a linklistát, ha elkészítés után (még a bejegyzésben) átváltunk Írás módra, és a lista minden elemének elé kattintva megnyomjuk a felsorolás gombot. Visszaváltunk HTML módra, kimásoljuk a kódot és beletesszük az oldalsávba egy HTML/Javascript modulba. A legtöbb sablon ugyanis tartalmaz valamilyen felsorolásjelet, és az meg fog jelenni a lista minden eleme előtt.

<ul>
<li><a href="http://hungariancook.blogspot.com/">Anya főztje</a></li>
<li><a href="http://bloggerbloggerek.blogspot.com/">Blogger's bloggers</a></li>
<li><a href="http://hucook.blogspot.com/">Hungarian Cook</a></li>
</ul>

Fájl elérési útja - URL

Ahhoz, hogy a bloghoz használhassunk egy fájlt, először is kell egy tárhely, ahol tartjuk, és kell egy link, ahogyan hivatkozhatunk rá. Azaz meg kell tudnunk a fájl elérési útját (URL). Több cikkben is leírtam már, hogyan lehet megtudni pl. a Picasa albumban vagy a Google tárhelyen vagy a Google Docsban tárolt fájljaink elérési útját. Ezek a linkek ugyanis elég bonyolultak és hosszúak, csupa betű és szám.
Most egy nagyon egyszerű módszert adok meg az URL kiderítésére. Ez a módszer minden esetben működik, bárhol is tároljuk az adott fájlt.

• Tallózzuk ki a tárolási helyen azt a fájlt, melynek az elérési útjára vagyunk kíváncsiak.
• Menjünk a fájlnév fölé és nyomjunk jobb egérgombot.
• Válasszuk a Tulajdonságok parancsot.
• A felugró panelen az URL szó mögött olvashatjuk az elérési utat
• Jelöljük ki, és másoljuk a vágólapra.
• Ezzel az URL-lel hivatkozhatunk a fájlra a blogunkban.

IP kitiltás, bannolás - IP address ban

Ezen a honlapon megtehetjük, hogy bizonyos IP címről érkezőt kitiltunk a lapunkról

http://toolator.com/ban
  
baloldalt: create account
emailben kapsz megerősítő linket, kattints rá
kapsz egy újabb emailt, ebben lesz a jelszavad, ezzel lépj be az oldalra
Baloldalt találod:
Navigational Menu
Block an IP
 

Feloldani az IP cím blokkolását a View Blocked IP`s alatt tudod, amit szintén a Navigational Menu alatt találsz.
Fontos! Olyan IP címet nem tilthatsz le, ami az AOL-t használja!

Szerkesztő ceruza - Quickedit pencil

Ezt az ikont a posztnál látjuk, ha be vagyunk jelentkezve, így rákattintva azonnal szerkeszteni tudjuk a posztot.
Az ikon megjelenítésének módja:

Irányítópult - Beállítások - Látható legyen a "Bejegyzések szerkesztése" ikon? - Igen

Irányítópult - Elrendezés - Posts (vagy Blogbejegyzések)
A felugró ablakban pipáld be:
"Bejegyzés szerkesztése" ikon megjelenítése

Van olyan eset, hogy a fenti műveletsor után sem jelenik meg a ceruza ikon. Ennek az az oka, hogy olyan sablonod van, melyből a hozzátartozó kódrészlet hiányzik, így azt neked kell elhelyezned.

Irányítópult - Elrendezés - HTML-kód szerkesztése - Vezérlősablonok kibontása - Ctrl+f

Írd be a keresőablakba (felül van): <span class='post-icons'>
Ha megtaláltad a kódban, akkor utána szúrd be ezt a sort:

<b:include data='post' name='postQuickEdit'/>

Pl. így nézhet ki ez a rész:

<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
</span>

Mentsd el a változtatást.

Ha egyáltalán nem találtad a post-icons kifejezést, akkor szúrd be az egész fenti részt pl. ez alá:

<div class='post-footer-line post-footer-line-1'/>
   ide
</div>

Ha benne találtad az előbbi kódot, vagy beszúrtad már, akkor egészítsd ki a pirossal jelzett résszel is:

<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
        <b:if cond='data:post.editUrl'>
         <span expr:class='"item-control " +   data:post.adminClass'>
          <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
          <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
          </a>
         </span>
        </b:if>
</span>

Valahol megjelenik a ceruzaikon. Ez attól függ, nálad a programíró hova tette az ikonok helyét. Ha egy kicsit tanulmányozod ezt a részt, esetleg még a helyét is meg tudod változtatni, és oda teszed, ahova szeretnéd (poszt elé, utána stb.). Erre már részletes leírást nem adok, mert ez nagyon sablonfüggő.

Contact form Online

A sok elérhető űrlapszerkesztő közül ezt az egyszerűen kezelhetőt ajánlom.
http://www.emailmeform.com/
Először regisztrálnod kell, a Sign up-ra kattintva teheted meg. Azonnal kapsz az emailcímedre egy megerősítő linket. Ha erre rákkattintasz, már bent is vagy a szerkesztőben.
Válaszd a jobboldali listából, azaz a Control panelről: Create new form
A szerkesztő innen lépésről lépésre érthetően végigvezet a formkészítés lépésein.

Kapcsolat - Contact form

Egy egyszerű Kapcsolat űrlap elkészítési módját adom itt meg. Számtalan ingyenes online formgenerátort találsz a neten, melyekkel magad is készíthetsz űrlapokat. Ez az űrlap az általad megadott emailcímre küldi el az üzenetet, és te emailben tudsz válaszolni rá.
Készíts egy új oldalt. Add meg az oldal nevét, válts HTML írásmódra és a tartalomrészbe másold be azt a kódot, melyet készítettél.
Én így készítettem el az űrlapot:


(A tutoriálképek kattintásra nagyobbak lesznek!)

Menj a Saját fiók-ba, és válaszd ezt: Dokumentumok (Google Docs)

Új létrehozása - Űrlap

Töltsd ki, ahogy itt látod:

Jöhet a következő: Rakd a 2. mintakérdés fölé a kurzort:

Ezt is töltsd ki, nyomd meg a Kész gombot.

Kérj új elemet, válaszd a Hosszabb szöveg típust.

Ezt is töltsd ki így, majd nézd meg, mit csináltál eddig.:

Válassz hátteret:

Nézd meg, hogyan néz ki most.

Most megerősítő üzenetet készítünk, ezt látja az, aki elküldte az üzenetet. Írj, amit szeretnél.

Ezt a részt is töltsd ki:

Most kérjük ki a kódot:

Másold ki az ablakból, és illeszd be az oldalad tartalomrészébe HTML írásmódban.

Add meg a szélességet. Ne legyen szélesebb, mint a posztok. Általában 500 pixel körüli érték. A width mögötti számot módosítsd. Add meg a magasságot is. Ha nem elég magas, akkor dobozszerűen jelenik meg, egy oldalsó gördítősávval. A height mögötti számot módosítsd.

Az űrlapod a mentéssel eltárolódott a Dokumentumokban, bármikor szerkesztheted, változtathatod, kódot kérhetsz.