Ide firkálhatsz :). A dobozod magassága attól függ, hogy mennyit írsz bele! Akár képet is illeszthetsz be!

         
 

Elég kacifántos címet sikerült neki adni :D. A demóban láthatjátok, hogy lényegében miről van szó. Ezt dobozt használhatjátok bármire, frissítések kiírására, de akár blogbejegyzéseknél is jól mutathat.
A használata egyszerű: fogod a kódot, bemásolod forráskódba, majd rendes szerkesztői nézetbe visszatérve kétszer kattintasz az általunk írt tartalomra. Ekkor megjelenik a szövegdoboz, amibe írhatsz, képet illeszthetsz be stb. Ugyanígy a cím és dátum megadásánál. (Mozzila esetén elég csak egyszer kattintani) Természetesen a fülecske mellé bármi más is írható. A szélességét is állíthatod akár a kódba piszkálás nélkül. Kattints a szürke részre, ekkor kijelöli, majd jobb oldalról húzd a bal oldal felé.

Aki pedig bele szeretne nyúlni a kódba: a kód két fő részből áll, a CSS-ből és a DIV-ből.

CSS:
Ez is két részből áll: commentbox és commentfooter. A commentboxnál adhatod meg a szövegdoboz háttérszínét (background-color: #ececec;), a szélességét (width: 450px;), illetve a margót, tehát, hogy hány pixelre legyen a tartalom a doboz szélétől (padding: 10px;). A commentfooternél lehet megadni a fület a backgroundnál. Ezzel a résszel nem kell foglalkoznod, kivéve, ha más színű dobozt használnál. Ebben az esetben mentsd le a fület, a szürke részt színezd át olyanra, amilyen színt megadtál a doboz hátterének, töltsd fel, s cseréld ki az url-t.

DIV:
A változatosság kedvéért két részből áll:
div class="commentbox": Itt megadhatod a magasságot (height), bár igazából felesleges, mivel a tartalomtól függően változik, illetve itt lehet megadni a tartalmat.
div class="commentfooter": itt adhatod meg azt a szöveget, ami a fülecske mellé kerül, a mi példánk szerint a címet és a dátumot.

Kód:
<style type="text/css">

.commentbox{
background-color: #ececec;
width: 450px;
padding: 10px;
}

.commentfooter{
background: url("//nevek.gportal.hu/portal/nevek/image/gallery/1270472934_47.png") 20px 0 no-repeat;
padding-left: 58px;
padding-top: 4px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
height: 18px;
}</style>

<div class="commentbox" style="height: 183px">Ide firkálhatsz :). A dobozod magassága attól függ, hogy mennyit írsz bele! Akár képet is illeszthetsz be!<br />
<br />
<img alt="" src="//nevek.gportal.hu/portal/nevek/image/gallery/1203235841_13.png" />&#160;&#160;&#160; &#160;<img alt="" src="//nevek.gportal.hu/portal/nevek/image/gallery/1203235936_70.jpg" />&#160; &#160;&#160; <img alt="" src="//nevek.gportal.hu/portal/nevek/image/gallery/1216926542_07.gif" /><br />
&#160;</div>
<div class="commentfooter">Cím: demó. Dátum: 2010.04.05.</div>