Да разположим публикациите в две колони

Здравейте, приятели. Когато започнем да работим с Blogger не искаме да се ограничаваме само до стандартната опция за разположение на публикациите. Напоследък става популярен вариантът публикациите да са „Винаги отгоре“. WordPress предлага теми в стил мрежов изглед, където публикациите на главната страница са подредени в няколко колони.

1. Подготовка
2. Задаване на стиловете CSS

Ще се опитаме да приложим този стил в Blogspot и то само благодарение на познанията ни за CSS свойствата.

Подготовка

Първо трябва да променим някои настройки на публикациите в блога.

◾Да премахнем датата на публикуване от настройките на главната страница;

◾Броят на публикациите да променим на четен;

Задаване на стиловете CSS

Пред </head>  в  Тема ➔ Редактиране на HTML кода вписваме:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type="text/css">

.post-outer {

margin: 0 25px 25px 0;

width: 40%;

height: 500px;

float: left;

overflow: hidden;

position:relative;

}

.post-body img {width: 280px;}

.post object, .post embed {width: 150px; height: 120px;}

.blog-pager { clear:both; }

</style>

</b:if>

◾Където width – е ширината, height - височината, margin - отстъп. Тези значения редактирайте по ваше усмотрение;

◾Не забравяйте да добавите елемента "Прочетете повече", тъй като чрез тази опция само скрива текста от читателя, а ние трябва да го отрежем и да контролираме броя на знаците, така че да пасва;

◾Тук можем да внесем и други параметри, като „обвиване“ на изображението с текст;

.post-body img {width: 100px; float: left; height: 100px; padding: 0 10px 0 0;}

◾Ако изображението ви е под определена височина, то няма да се показва, затова се опитайте се да го поставяте веднага след заглавието;

◾Последна стъпка: трябва да настроите ширината на публикациите спрямо страничните колони. Главната страница ще изглежда още по-впечатляваща, ако премахнете от нея страничните колони, като:

-Скриете всички притурки от главната страница;

-Увеличете ширината на публикациите: Тема ➔ Персонализиране ➔ Коригиране на ширините;

Ето как ще изглежда.

Въпроси отзиви и мнения, моля в коментарите.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на: