Така че днес ще създадем долен колонтитул с три колони, за да поставим допълнителни притурки в тях и ще зададем стиловете им, подходящи за нашия дизайн.
Така изглежда един обикновен долен колонтитул в темите на Blogger. Скучно, самотно и не е красиво.
Ще коригираме ситуацията и ще я направим по-изразителна и интересна.
Как да направите долния колонтитул в 3 колони?
Инсталиране
Стъпка 1. Отидете на административния панел на блога ➔ раздел Тема ➔ променете HTML. Намерете затварящия маркер </ 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 style='clear: both;'/> </div> </div>
Стъпка 2. Търсим и реда ]]></b:skin>. Пред него добавяме този код, за да зададем стиловете.
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#00868B;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
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;
color:#53868B;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#00868B;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
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;
color:#53868B;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
Настройки
Какво можем да променим тук, за да е в унисон с дизайна ни?
➤background:#00868B; е общият фон на долния колонтитул;
➤в син цвят са маркирани границите, фон и ширина на полетата;
➤color:#53868B; е цветът на заглавията на притурките и размер на шрифта;
➤Ако освободите въображението си и добавите още стилове може да се получи и вариант, в който вместо background:#00868B; е добавено фоново изображение - background:url(адрес на изображението);
➤Можете да добавете и рамка със заоблени ъгли;
border:5px solid #DEDEDE;
border-radius: 50px 50px 0px 0px;
Като краен резултат ще имате долен колонтитул с три допълнителни колони за притурки.
Как искате да изглежда долния колонтитул решавате само вие. Кодовете са готови, а останалото е въпрос на вкус.
За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Няма коментари:
Публикуване на коментар