Blogod a Facebookon - Blog import to Facebook

A Facebook Amerikából indult el, olyan ismeretségen alapuló közösségi oldal, amelyhez meghívó nem szükséges. Mára elterjedt a világ más részein is, és a felhasználók száma óriásivá nőtt, kb. 400 millió. Kézenfekvő hát, hogy a blogunkat itt is elérhetővé tegyük és ezzel látogatóink számát növeljük. Ehhez a Feed (hírcsatorna) elérésünket fogjuk használni. Ezen keresztül tudjuk ugyanis a blogunk tartalmát (a kinézetét nem) továbbítani.
Alapértelmezettként minden Blogger blog Feed-címe a következő:
http://sajatoldalad.blogspot.com/feeds/posts/default
Ha viszont beállítottuk a Google fiókból elérhető Feedburnert, akkor az onnan kiolvasható feed-címet használjuk.

A blog Facebook-on való megjelenítése a következő módon valósítható meg. (A magyar nyelvű Facebookon is megtalálod a megfelelő parancsokat a tutorial alapján.)

Menj be a Facebookba. A Home oldalon ezt látod:

Nem kell megírnod a feljegyzést, csak alul kattints a gombra.

Ezzel készen is vagy. A blogod tartalma rendszeresen importálódik a Facebookba is. Ha az alapértelmezett feed-címet használtad, akkor a teljes tartalom olvasható lesz, vagyis a Facebookon olvassák el a posztokat és nem a blogodban. Ha viszont Feedburneres címed van, és ott beállítottad, hogy csak egy kedvcsináló összefoglaló menjen ki a feedben, akkor a teljes posztot az érdeklődők a blogodban olvashatják el. A Facebookon az összefoglaló alatt meg fog jelenni egy link is, amely az eredeti poszthoz vezet el.

Ha már nem akarod tovább importálni a blogposztokat, akkor tedd ezt:

Ilyenkor az eddig behozott posztok megmaradnak, de újabbak már nem fognak jönni. A régieket is kitörölheted egyenként, ha úgy tetszik.

Webmaster tools - Webmestereszközök

Ha belépsz a Google fiókodba (Saját fiók), akkor láthatsz egy linket, amely a Webmestereszközök nevet viseli. Ez az eszköz a webhelyed optimalizációjában nagyon sok segítséget nyújthat. Csak néhány példa:
- megmutatja az oldaladra visszamutató linkek listáját
- kulcsszó analízist tesz lehetővé
- beállíthatod, mely oldalakat indexelhetik a keresőrobotok (robots.txt)
- optimalizálhatod az oldal betöltődésének sebességét
- megtekintheted, hogyan látja az oldalad egy keresőrobot
stb.

A webhelyed felvétele a Webmestereszközökbe a következő módon lehetséges:

Kattints a Saját fiók - Webmestereszközök linkre

Menj be ide: Irányítópult - Elrendezés - HTML-kód szerkesztése

Visszamutató link ellenőrzés - Backlinks check

A backlink vagy visszamutató link olyan hivatkozás, amely egy másik oldalról a te oldaladra mutat. Ilyen link többféle módon jöhet létre.

1. Egy weboldalon rád hivatkoznak.
2. Kommentelsz egy oldalon, és a nicknevedre a te oldalad címe van linkelve
3. Te magad hozol létre egy az oldaladra mutató hivatkozást egy másik weboldalon = trackback.
4. Gyűjtőoldalon szerepelteted a blogod. Ezek az oldalak megjelenítik a blogod tartalmát Atom vagy RSS Feed-en keresztül. A feed azt jelenti, hogy közvetítődnek a posztok és a kommentek a blogodból, de csak a tartalom, a blogod dizájnja nem, azok felé akik kérik ezt = feliratkozás. A közvetítés úgynevezett hírcsatornákon történik (Atom, RSS). A blogtartalom frissüléséről üzenetet lehet küldeni a feedolvasó számára, általad vagy az olvasó által meghatározott időszakonként (óránként, naponta, stb.). Egy robot ilyenkor megnézi az oldalad, és ha van új poszt vagy megjegyzés, frissíti a hírcsatornában a tartalmat. Az értesítés küldését a hírcsatorna felé pingelésnek nevezzük.
5. Linkcsere. Megegyezel egy másik weboldallal, hogy te elhelyezel nálad egy az ő oldalára mutató linket, cserébe ő is hivatkozik rád a saját oldalán.

A backlinkek (bármennyire nem szép dolog is) a weboldal fontosság (pagerank) növelésének a keresők számára a legfontosabb eszköze még ma is. Ezért mindenki szeretné tudni, hogy hány külső hivatkozás mutat az oldalára. Erre többféle lehetőség is adódik.

1. Online backlink ellenőrzők. Ezek közül egy egészen jó és hiteles:
   http://www.domain-pop.com/
   Weboldalanként csoportosítva láthatjuk a linkeket. Megadja a Google és a Yahoo által számontartott külső hivatkozások és az általuk indexelt oldalak számát is.
2. Másik lehetőség, ha a Google és a Yahoo keresőből közvetlenül lekérdezzük a linkeket:
   A lekérdezés módja:
   Írjuk be a keresőablakba:
   site: sajatoldalam.blogspot.com
   Ekkor az indexelt oldalakról kapunk információkat
   link: sajatoldalam.blogspot.com
   Ekkor a linkekről láthatunk listát.
   
   Fontos tudni, hogy a Google a valódi külső linkeknek csak nagyon kicsi hányadát adja meg, ennek az okát csak a magasságos Google tudja. Viszont a Yahoo szemérmetlenül megmutatja az összes oldaladra mutató linket.
   Példaképpen említem, hogy a http://hungariancook.blogspot.com/ oldalra vonatkozóan a Google 128 linket válaszol, míg a Yahoo 20654 linket ad meg. A Google tehát csupán a 6%-át mondja meg a valóságos linkeknek!
3. A harmadik lehetőség, hogy a Saját fiókon belül elérhető Webmestereszközökhöz fordulunk. Ehhez azonban be kell állítanunk a bloghoz ezt az eszközt. Ezek után a valós linkeredményeket kirészletezve tanulmányozhatjuk.

5 füles oldalsáv widget - 5 tabbed content widget by Bloganol

Az oldalsávomban található egy widget, amelyen fülek vannak, és a füleken különböző tartalom. Én ezzel alakítottam ki a profilom, sok információ kis helyen elfér. Ezt a widgetet ezen a helyen találtam:
http://www.bloganol.com/2008/03/5-tabbed-content-widget-for-blogger.html
Nincs más teendő vele, mint az oldalsávhoz kérni egy HTML/Javascript modult, belemásolni az alábbi kódot, és a pirossal jelzett részeken átírni a fülek feliratát, a kékkel jelzett részek helyére pedig bemásolni az egyes fülek tartalmát, ami bármi lehet, szöveg, HTML kód, kép, widget, linkek stb.
A widget 380 pixel széles.
Természetesen a fülekből törölhetünk, a színeket megváltoztathatjuk, a szélességet is csökkenthetjük. Ehhez CSS tudás szükséges.

<!– widget by Bloganol.blogspot.com –>
<script language=”JavaScript” type=”text/javascript”>
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById(‘tt’+i);
tr = document.getElementById(‘dd’+i);
ta = document.getElementById(‘aa’+i);
if(t==i){
if(t==1) ts.className=”Tab1″;
if(t==2) ts.className=”Tab2″;
if(t==3) ts.className=”Tab3″;
if(t==4) ts.className=”Tab4″;
if(t==5) ts.className=”Tab5″;
ta.className=”srchlinksel2″;
ts.style.borderBottom=”1px solid #FFFFFF”;
tr.style["display"]=”block”;
tr.style["visibility"]=”visible”;
}
else{
ts.className=”tb2″;
ta.className=”srchlink2″;
ts.style.borderBottom=”1px solid #B5D6EF”;
tr.style["display"]=”none”;
tr.style["visibility"]=”hidden”;
}
}
}
</script>

<!– CSS Begin //–>

<style type=”text/css”>.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#EEF5FB’,EndColorStr:’#D9E9F6′);BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#DEFFC6′,EndColorStr:’#B7E4A2′); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#EEF5FB’,EndColorStr:’#DEEFF7′); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#4A84AD’,EndColorStr:’#00426B’); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#FFFFFF’,EndColorStr:’#A5DEDE’); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#FEDFB3′,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #fedfb3
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#B39DFE’,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #b39dfe
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#F6FE9D’,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #f6fe9d
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#FEAF9D’,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #feaf9d
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#9DFEA5′,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #9dfea5
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>
<!– CSS End //–>
<!– Widget Code Ends Here –>

<!– widget by Bloganol.blogspot.com –>

<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td align=”middle” onclick=”st2(‘1′)” height=”22″ id=”tt1″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid” width=”70″
class=”Tab1″><a id=”aa1″
class=”srchlinksel2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB1 felirat
</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(‘2′)” height=”22″ id=”tt2″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”47″
class=”tb2″><a id=”aa2″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB2 felirat
</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(‘3′)” height=”22″ id=”tt3″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”62″
class=”tb2″><a id=”aa3″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB3 felirat
</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(‘4′)” height=”22″ id=”tt4″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”48″
class=”tb2″><a id=”aa4″
class
=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB4 felirat
</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(‘5′)” height=”22″ id=”tt5″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”52″
class=”tb2″><a id=”aa5″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB5 felirat
</b></font></a></td></tr>
<tr>
<td colspan=”9″>
<div style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px;
BORDER-BOTTOM: 0px”
><!– Main Headlines Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″ height=”5″>
<tbody>
<tr>
<td height=”5″></td></tr></tbody></table>
   <font color=”#797979″ class=”f10″
>
<!– wmlheadline begin –>
<!– TDate Begin –>
<!– Date Begin –>
Browse Items</font>
<!– Date End –>
<!– TDate End –>
<div id=”dd1″ style=”BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB1 tartalma
</font></td>
</tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table></div><!– Main
Headlines End //–></div>
<div id=”dd2″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– News Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB2 tartalma
</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– News End
//–></div>
<div id=”dd3″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Business Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB3 tartalma
</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– Business End
//–></div>
<div id=”dd4″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Movies Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB4 tartalma
</font></td>
</tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– Movies End
//–></div>
<div id=”dd5″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Sports Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB5 tartalma
</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td
height=”4″></td></tr></tbody></table>

<!– Widget Code Ends Here –>

Újdonság - sablontervező

Ha a Blogger in Draft-on keresztül lépsz be, akkor az Irányítópultban új elemet fedezhetsz fel. Az Elrendezés fülre kattintva új opciót találsz a jobb oldalon: Sablontervező.

Mielőtt kipróbálod, készíts egy mentést a sablonodról (és a tartalomról is ). Ezután nézd végig a 4 menüpontot:
Sablonok
Háttér
Elrendezés
Speciális

Alul látod a mintát, és azt, hogyan fog kinézni a blogod az egyes módosítások után.
Sok mindent megváltoztathatsz, és nem kell a kódban matatnod. Nagy előnye továbbá, hogy anélkül változtathatsz a sablonodon, hogy a widgeteket elveszítenéd az oldalsávból, és nem kell újra rakosgatnod őket a változtatás után. Csak megnyomod az Alkalmazás a blogon gombot, és kész is vagy. Ha nem nyomod meg ezt a gombot, akkor anélkül kísérletezhetsz a különböző formázásokkal, hogy a blogod valójában megváltozna. Ha megváltoztattad, de mégis jobb volt a régi, akkor az elmentett sablonodat kell visszaállítanod.
Az elrendezés alatt az oldalsávok számát és helyzetét is megváltoztathatod.
Ha letöltöttél valahonnan egy egyéni sablont, akkor nem biztos, hogy a sablontervező minden változtatást el tud rajta végezni, ekkor ezt kiírással tudatja.
Nem részletezem, mindenki kipróbálással könnyen megértheti a működését. Ez a rövid Blogger video is segíthet.

Vizszintes navigáció Minima sablonhoz - Horizontal linkbar

A Minima fejléce alá vagy fölé tehetsz egy vízszintes sávot, amelyre linkeket rakhatsz. Ezek a linkek bárhova mutathatnak, egy másik blogodhoz, vagy a statisztika oldalra, belépés a Bloggerbe stb. a lehetőségek száma végtelen.
Ez a linksáv nem azonos a vízszintes oldalnavigációval, azt ettől függetlenül működtetheted, ahol az általad létrehozott oldalakhoz (pl. statikus tartalmakhoz) vezetnek linkek.
Ezen a tesztoldalon láthatod működés közben mindkettőt, itt pedig élesben is megnézheted a linksávot, a fejléc alá vannak elhelyezve, felül a linksáv, alatta az oldalak navigációs sávja.
Ebben a blogban is van ilyen sáv, itt az egyes címkék vannak rálinkelve (sablon, Widget, HTML, ...).
Ez a sáv nemcsak Minima sablonba illeszthető, hanem más sablonokba is beleteheted.

Irányítópult - Elrendezés - HTML-kód szerkesztése - Vezérlősablonok kibontását NE jelöld be

Szúrjuk be a kódot oda, ahol az utolsó #header ...  részt találjuk. Pl. ha ez az utolsó, akkor ez után:
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Ide szúrjuk be a következő kódot.

#linknavbar {
background: #666;
width: 900px;
height: 30px;
color: #FFF;
margin: 0;
padding: 0;
}
#linknav {
margin: 0;
padding: 0;
}
#linknav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#linknav li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#linknav li a, #linknav li a:link, #linknav li a:visited {
color: #FFF;
display: block;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#linknav li a:hover, #linknav li a:active {
background: #888;
color: #FFF;
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#linknav li:hover, #linknav li.sfhover {
position: static;
}

Most keressük meg lejjebb ezt a részt:

<div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Anya főztje tartalom (fejléc)' type='Header'/>
</b:section>
    </div>
 
         Ide szúrjuk be a kódot

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='menű' type='PageList'/>
</b:section>
      </div>

Ezt kell beszúrni:

<div style='clear:both;'/>

    <div id='linknavbar'>
      <ul id='linknav'>
        <li>
          <a href='#'>Link1</a>
        </li>
        <li>
           <a href='#'>Link2</a>
        </li>
        <li>
           <a href='#'>Link3</a>
        </li>
        <li>
           <a href='#'>Link4</a>
        </li>
      </ul>
    </div>

<div style='clear:both;'/>

MENTSÜK a változtatásokat! Így fog kinézni:

<div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Anya főztje tartalom (fejléc)' type='Header'/>
</b:section>
    </div>
 
<div style='clear:both;'/>

    <div id='linknavbar'>
      <ul id='linknav'>
        <li>
          <a href='#'>Link1</a>
        </li>
        <li>
           <a href='#'>Link2</a>
        </li>
        <li>
           <a href='#'>Link3</a>
        </li>
        <li>
           <a href='#'>Link4</a>
        </li>
      </ul>
    </div>

<div style='clear:both;'/>

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='menű' type='PageList'/>
</b:section>
      </div>

A linksáv  használata:

A # kereszt helyére jön a hivatkozott URL cím, a Link1 szöveg helyére pedig az a szöveg, amit akarunk, hogy kiírva legyen. Pl.:

<a href='http://bloggerbloggerek.blogspot.com'>Blogger help</a>

Ebben a kódban 4 link van, de többet is (kevesebbet is) tehetünk. Ehhez csak annyit kell tennünk, hogy annyiszor ismételjük ezt a részt (vagy kitöröljük)

<li>
   <a href='#'>Link1</a>
</li>

ahány linket szeretnénk.

A kód formázása:
Igazítsuk a linksávot a saját sablonunkhoz. Ehhez 4 fontos dolgot kell beállítanunk.

1. A linksáv szélessége
2. Sáv alap háttérszíne
3. Háttérszín és betűszín az egér rámutatásakor illetve kattintáskor
4. A link betűszíne

#linknavbar {
background: #666;   Ez a linksáv háttérszín kódja
width: 900px;           Ez a linksáv szélessége
height: 30px;
color: #FFF;             Ez a linkek alapbetűszíne (ezt nem muszáj módosítanod)
margin: 0;
padding: 0;
}

#linknav li a:hover, #linknav li a:active {
background: #888;   Ez a háttérszín rámutatáskor
color: #FFF;            Ez a betűszín rámutatáskor
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}

#linknav li a, #linknav li a:link, #linknav li a:visited {
color: #FFF;  A link alap betűszíne már kilinkelt állapotban
display: block;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}

Blog megosztása az IWIW-en

http://iwiw.hu/megosztas/buttons.html

Válaszd ki a megfelelő gombot.
Másold ki a kódot. Alakítsd át a kódot a blogom oldalsávjában található HTML átalakítóval. Másold ki az átalakított kódot.
Irányítópult - Elrendezés - HTML-kód szerkesztése - Vezérlősablonok kibontása
Ctrl+f
Írd be: class="post-footer"
Illeszd be az átalakított kódot és mentsd a sablont.

Az iwiwes kódot zárd bekezdés zárójelbe, és így illeszd be, különben hibaüzenetet kapsz sablonmentéskor.

<p>
  Ide jön az iwiw-kód
</p>

Ha már betetted az AddThis megosztásgombot is, és az iwiwest is szeretnéd, akkor csak tedd őket egymás alá.
Nálam így néz ki ez a rész:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><a class='addthis_button_compact' href='http://www.addthis.com/bookmark.php?v=250&username=wiselady'>Megosztás</a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_facebook'/>
<a class='addthis_button_myspace'/>
<a class='addthis_button_google'/>
<a class='addthis_button_twitter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=wiselady' type='text/javascript'/>
<!-- AddThis Button END -->
<!-- iWiW Button BEGIN -->
<p><script> 
function iwiwshare_click() {u=location.href;t=document.title;window.open('http://iwiw.hu/pages/share/share.jsp?u='+encodeURIComponent(u)+'&amp;t='+encodeURIComponent(t),'iwiwshare','toolbar=0,status=0,location=1, width=650,height=600,scrollbars=1');return false;}
</script></p>
<p><a href='http://iwiw.hu/pages/share/share.jsp?u=<url>' onclick='return iwiwshare_click()' target='_blank'><img alt='' border='0' src='http://static.iwiw.hu/common/image/share/b-megosztas-az-iwiwen-d.gif'/></a></p>
<!-- iWiW Button END -->

Blog megosztás közösségi oldalakon - Bookmark and sharing

Egy nagyon egyszerű módszerrel egy olyan gombot adhatsz a blogodhoz, melynek segítségével a legnépszerűbb közösségi oldalon megoszthatják a posztodat az olvasók, ha érdekesnek találták.







Menj erre az oldalra: AddThis

Válaszd az 1.2.3 lehetőséget. Ha megfelel, akkor nyomd meg a Get your button gombot. Vannak viszont egyéb lehetőségek is, ha ilyet szeretnél, akkor viszont a More options-ra kattints. Mi most haladjunk erre.

Válaszd ki a neked megfelelő megjelenést. Ha azt is szeretnéd tudni, hogy az elhelyezett megosztó gombon keresztül hányan osztották meg a cikkedet, válaszd a statisztika lehetőséget, és regisztrálj.

Most megkaphatod a kódot. Vagy az oldalsávba, vagy a posztok alá teheted. A posztok alá érdemesebb, hisz inkább egy-egy cikket osztanak meg, olyat, amelyet érdekesnek találtak.

Itt, ebben a lépésben elkanyarodhatsz egy olyan irányban, hogy profi beállításokat tegyél. Mi most csak egyet nézünk, ez pedig az, hogy a widgetünk magyar nyelvű legyen. Kattints a Customize AddThis parancsra.

Kattints a Language lehetőségre

Válaszd a Hungarian opciót, majd válaszd felül a Get AddThis parancsot. (Ha van kedved, tanulmányozhatod a további beállításokat is az oldalsó részen.)

Válaszd: Get the code
Másold ki a kódot. Menj be ide:
Irányítópult - Elrendezés - HTML-kód szerkesztése, jelöld be a vezérlősablonok kibontása négyzetet.
Ctrl+f írd a keresőablakba: div class="post-footer"
A kimásolt kódot illeszd be az alábbi helyre, és mentsd el a sablont.

Most keresd meg a beillesztett kódot a HTML-ben. Ilyet találsz:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><a class='addthis_button_compact' href='http://www.addthis.com/bookmark.php?v=250&username=wiselady'>Megosztás</a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_facebook'/>
<a class='addthis_button_myspace'/>
<a class='addthis_button_google'/>
<a class='addthis_button_twitter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=wiselady' type='text/javascript'/>
<!-- AddThis Button END -->

Írd át a SHARE szót magyar szóra, pl. Megosztás
Mentsd el a sablont.

Így fog kinézni:

A blogomban láthatod működés közben is.

Képek egyéni méretezése - Custom picture-size

Ha az új típusú szövegszerkesztőt használod, akkor a képek feltöltésekor a képek méretezéséhez ebből a 4 lehetőségből választhatsz: kicsi - közepes - nagy - nagyon nagy
Ha átváltasz HTML szerkesztő módra, akkor a képek kódjában rendre ezeket az értékeket találod ezekhez a méretekhez:
kicsi s200
közepes s320
nagy s400
nagyon nagy s640

Létezik egy ötödik méret is, a 800 px - s800 szélességű kép, de ezt már nem kínálja fel neked, te azonban megvalósíthatod, ha HTML szerkesztés módban kézzel átírod.
Ezek az értékek a képek szélességére utalnak, és pixelben vannak megadva. Pl. a közepes méretezésű kép az 400 px széles. Azt, hogy mekkora szélességű kép fér el a posztban az szabja meg, hogy a blogon a posztoknak fenntartott sávot a sablonban mekkora szélességűnek adták meg. Ez általában 600 px körüli érték szokott lenni, de van, hogy ennél kisebb, a nagyobb ritkán fordul elő.

Lehetőség van azonban a képek egyéni méretezésére is. Én pl. rendszeresen használok 500 px szélességű képeket, ilyet pedig nem lehet választani.
Először fel kell töltened a képet, amelynek legalább akkorának kell lennie, mint amekkora méretben meg akarod jeleníteni. Ha kisebb, és te nagyítod, akkor romlik a kép minősége (kontúrélesség, élek simasága, kockássá válhat stb.). Tehát nagyobb lehet, kisebb nem. Általában a sokkal nagyobb méret sem jó, mert a túl nagy képek erősen lelassítják a blog betöltődését, az olvasó pedig nem szereti a lassú lapokat. A blogba szánt képeket ezért feltöltés előtt egy képszerkesztő programmal érdemes átméretezni, kb. akkorára, mint amekkorában szeretnéd is megjeleníteni.
Ha átméretezted és feltöltötted, akkor válaszd a 4 lehetőségből azt, amelyik eggyel nagyobb, mint amekkorában a képet látni akarod. Pl. 500 px szélességnél én a nagyon nagy méretet szoktam választani.
Válts át HTML szerkesztés módra, keresd meg a kép kódját. Valami ilyesmit fogsz látni (különböző böngészőkben lehet némi eltérés, de a lényeg egyformán fog kinézni.)

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7ncYZcEPoYP97bGeZWHlNmtSaZnluyfUm4Y4Dfify_Yl1u8S5qvYHwCzIsqzNs8-OyQDe_FPNlvfZfMuEa2r0_-jDw9SHyIuUrVpittHVFoJJ6I4zf3_2UXSVeIuosXfdw382zQ3CbbK/s1600-h/chicks.jpg" 
imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; 
margin-right: 1em;"><img border="0" height="480" kt="true"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7ncYZcEPoYP97bGeZWHlNmtSaZnluyfUm4Y4Dfify_Yl1u8S5qvYHwCzIsqzNs8-OyQDe_FPNlvfZfMuEa2r0_-jDw9SHyIuUrVpittHVFoJJ6I4zf3_2UXSVeIuosXfdw382zQ3CbbK/s640/chicks.jpg" 
width="640" /></a></div>

A width="640" részt írd át - ez a kép szélessége - amekkorára te akarod, pl. width="500"
A height="480" részt - ez a kép magassága - pedig töröld ki. Ez azért kell, hogy a kép arányai ne torzuljanak el, ha csak a szélességet adod meg, akkor a magasságot magától hozzá fogja igazítani, ha viszont nem törlöd ki, akkor arra a magasságra állítja be, ami be van írva, és így aránytorzulás jöhet létre.
Az s640 rész pedig nagyobb legyen, mint az általad megadott képszélesség.
Tehát így néz majd ki:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7ncYZcEPoYP97bGeZWHlNmtSaZnluyfUm4Y4Dfify_Yl1u8S5qvYHwCzIsqzNs8-OyQDe_FPNlvfZfMuEa2r0_-jDw9SHyIuUrVpittHVFoJJ6I4zf3_2UXSVeIuosXfdw382zQ3CbbK/s1600-h/chicks.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" kt="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7ncYZcEPoYP97bGeZWHlNmtSaZnluyfUm4Y4Dfify_Yl1u8S5qvYHwCzIsqzNs8-OyQDe_FPNlvfZfMuEa2r0_-jDw9SHyIuUrVpittHVFoJJ6I4zf3_2UXSVeIuosXfdw382zQ3CbbK/s640/chicks.jpg" width="500" /></a></div>

Cím, képaláírás

Szalagos farsangi fánk

Ha a Blogger in Draft irányítópult van nálad beállítva, akkor a poszt írásakor lehetőséged van a képekhez feliratot, képaláírást készíteni. Ez azzal az előnnyel jár, hogy a képaláírás a képpel együtt mozgatható. A felirat hozzáadásának módját a képen láthatod. A feliratot bármikor megváltoztathatod.

Húsvéti fejlécek - free easter headers

Ezeket a képeket a fejlécbe teheted, miután kiegészítetted azzal a szöveggel, amivel akartad. Lehet a Blogcím és leírás mögé is tenni őket.
A kiválasztott képre kattints rá, majd jobb gomb - kép mentése módszerrel töltheted le őket.
A képek mindegyike 980 px széles.