Blog 3 oszlopossá tétele / 3 column blog

Íme, hogyan is teheted blogodat 3 oszlopossá az átláthatóság kedvéért.

(Minima sablon beállítása szükséges hozzá.)

Mielőtt bármit is ügyködsz a sablonodban (Elrendezés -- Html-kód szerkesztés) érdemes elmenteni a jelenlegit a Teljes sablon letöltése link rákattintásával.

Ha nem vagy biztos a dolgodban és nem szeretnél sokat változtatni a sablonodon, akkor tedd az egész Outer-Wrapper alatti részt /**/ közé, és alatta szúrd be a következőt:

Keresd meg a következő részt -- Outer-Wrapper és írd át erre:

#outer-wrapper {<br /> width: 880px;<br /> margin:0 auto;<br /> padding:10px;<br /> text-align:left;<br /> font: $bodyfont;<br /> }<br /> #main-wrapper { /* a fő oszlop szélessége */<br /> width: 800px;<br /> float: left; <br /> margin-left: 50px; /* a bal oldali és a középső oszlop közötti kihagyás */<br /> word-wrap: break-word;<br /> overflow: hidden; <br /> }<br /> #sidebar-wrapper { /* a jobb oldali oszlop szélessége */<br /> width: 200px;<br /> float: right;<br /> word-wrap: break-word; <br /> overflow: hidden; <br /> }<br /> #left-sidebar-wrapper { /* a bal oldali oszlop szélessége */<br /> width: 140px; <br /> float: left; <br /> word-wrap: break-word;<br /> overflow: hidden;<br /> }

Majd keresd meg a következőt (Ctrl+F és alul keletkezett keresőmezőbe másold be és enter, megkeresi):

<div id='main-wrapper'>

E sor fölé másold be ezt:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/></div>

Ehhez a beállításhoz érdemes a fejlécben levő kép méretét is átvariálni:

#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

Előnézetben megnézheted, de a változást addig nem fogod látni, amíg nem mented el a módosításodat.

Mentés után:

Elrendezés -- Oldalelemek
A bal oldalon látható egy új oszlop. Itt Modul hozzáadása és bármit áttehetsz a jobb oldali oszlopból, illetve új elemet is hozzáadhatsz.

Kellemes szerkesztgetést és jó munkálkodás!:*)

Az eredeti bejegyzést itt találod.

If you'd like to change your template into 3 column template go here.