Un produs Blogger.

Creaza 4 coloane sectiuni in josul paginii ( footer bar ) de blog blogspot

Dai dovada de simpatie?

Iti place acest post?


Marea majoritate a sabloanelor au 1,2 sau 3 coloane in josul paginii de blog blogspot ( footer bar ).Mai jos am postat modificarea creata intr-un sablon de la o singura sectiune la 4 sectiuni petru adaugarea de obiecte gadget.Dupa cum se observa am adaugat sablonului in loc de o casuta pentru adaugarea unui obiect gadget 4 casute pentru adaugarea de obiect gadget.
Aceasta modificare o poti face si tu pentru sablonul tau daca doresti mai mult spatiu pentru widget-uri sau mai multe obiecte gadget-uri in blogul tau.Sunt doar cativa pasi de urmat pentru aceasta adaugare.

Pasul [1] Intra in contul tau de blog blogger.com >> Aspect >> Editati HTML si bifeaza casuta din colt dreapta al sablonului in dreptul caruia scria : "Extindeţi şabloanele control".

Pasul [2] Acum cauta una din liniile de cod sau asemanatoare ( footer-wrap, footer, footer-end etc... )

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Pasul [3] Inlocuiti linia de cod gasita la pasul 2 cu acest cod :

<div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='Widget1' type='Text'/>

</b:section>
</div>

<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='Widget4' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Widget3' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Widget2' type='Text'/>
</b:section>
</div>


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

Pasul [4] Cautati aceasta linie de cod :

]]></b:skin>

Pasul [5] Adaugati acest cod inaintea liniei de cod CSS gasita la pasul 4:

#footer-column-container { border: .3px dotted #cccccc;}

.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}

.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}

.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}

.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}

.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

Pasul [6]


Pasul [7] Salvati.

Din partea casei:

0 comentarii:

Trimiteți un comentariu

Advertisements

Advertisements