За блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Петък 4 април 2025 г.

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

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

Ще се опитаме да приложим този стил в 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;}

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

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

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

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

Коригиране


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

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

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

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

BGtop

5 коментара:

  1. Емилия Лельова9:39

    Много беше интересно. Ще изпробвам. Ако имам нужда от помощ, ще пиша.

    ОтговорИзтриване
  2. Благодаря за отзива. Ще помогна, ако се затруднявате. Поздрави!

    ОтговорИзтриване
  3. Емилия Лельова6:31

    Направих го, не ме затрудни, благодаря за помощта!

    ОтговорИзтриване