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

Търсене

Breaking

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

публикациите в две колони
Здравейте, приятели. Когато започнем да работим с 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

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

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