Multiple coloana pentru subsolul blogger

Acest nou widget poate deveni coloana de trei, patru sau coloană, cu cât mai multe coloane cum doriţi.
În continuare acest widget nou subsol are unele efecte mari CSS adăugat acesta, care face chiar mai bine.
Prima a se vedea un demo să ştie ce e atat de diferite despre ea.
Vezi Widget de la partea de jos a blog-ul Demo următoarele,


 Demonstraţie live 

Cum se face ? 

În primul rând, vom adauga codul CSS pentru şabloane Blogger şi apoi HTML.

1. Du-te la Blogger> Design> Editare HTML
2. Backup dvs. de şabloan
3. Cautati acest cod (Ctrl+F)  ]]></b:skin>
4. Doar de mai sus de ]]></b:skin> paste codul de mai jos,




/*----- Multiple coloana pentru subsolul  blogger -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}


5. Acum, caută </body> şi lipiţi codul de mai jos, chiar deasupra </body>



<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar4' preferred='yes'> 
</b:section> 
</div>

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


 6. Salvaţi şablonul dvs. şi aţi terminat!