Blogger, как разделить текст сообщения на колонки?

Здравствуйте постоянные и новые читатели, блогеры и вебмастера. В данной публикации я подготовил очень интересный и простой урок по сообщениям и страницам блоггера, возможно не для всех он будет полезным, но во всяком случае надеюсь, что для многих сегодняшняя статья принесет большую пользу. Не так давно, я просматривал блог своего заказчика, который он хотел модернизировать и при этом в его постах я заметил, что свои тексты он пишет и на русском и на английском языках. Колонка текста по русски с левой стороны и колонка переведенного с русского на английский с правой стороны. В общем довольно интересно получилось. 

Так  же многие блогеры хотят таким способом задать газетный вид своему блогу. Вот пример того, как будет выглядеть ваш текст после того, как зададите ему функцию деления на столбцы.

Как разделить текст сообщения на колонки

Пока что я предлагаю вам простой вариант деления текста на два и больше столбцов с помощью CSS.

Для того, чтобы установить на свой блог эту функцию вам нужно в разделе Тема - Изменить HTML перед тегом ]]></b:skin> вставить следующий CSS код:

.cronos
{
   -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

Сохраняете шаблон и после того, как напишите статью переключаете редактор Сообщения и Страницы на HTML перед началом текста вставляете <div class='cronos'>а в конце текста пропишите </div>. После чего можете опубликовать статью.

Как разбить сообщение на несколько страниц

Что делать, если ваша статья получилась очень объемной и отпугивает читателей? Есть несколько решений того, как упростить подачу контента:
  • Всегда разбивайте текст на маленькие абзацы
  • Используйте виджет Содержание статьи
  • Используйте Спойлер 
  • И последний вариант разделите ваше сообщение на несколько страниц 

Сейчас я покажу вам, как разделить сообщения на несколько страниц, каждая их которых будет иметь свой номер. Для начала добавьте CSS, так же, как в случае с делением текст на колонки:

.contentin,.pagenum br{display:none}.numpage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagenum{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagenum .buttonn{background:#ff6e00;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagenum .buttonn:hover,.pagenum .buttonn:active{background:#333;color:#fff}.buttonn.numpage,.buttonn.numpage:hover{background:#333;color:#fff}

Теперь найдите закрывающий тег </body> и вставьте перед ним скрипт:
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
function get_n(dalam){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===dalam)return void 0===o[1]||o[1]}$(document).ready(function(){var dalam=get_n("dalam");$(".contentin").hide(),void 0===dalam?$(".split_1").show():$(".split_"+dalam).show();var o=$(".contentin").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagenum").append($('<a href="'+t+"?dalam="+i+'" class="buttonn n'+i+'"> '+i+" </a>"))}else $(".pagenum").hide();void 0==dalam&&$(".buttonn.n1").toggleClass("numpage"),dalam==dalam&&$(".buttonn.n"+dalam).toggleClass("numpage")});
//]]>
</script>
</b:if>

Сохраните настройки Темы. 

Теперь откройте публикацию, которую нужно разделить и для каждой страницы используйте HTML:
<div class="contentin split_1">
Текст 1 страницы
</div>

<div class="contentin split_2">
Текст 2 страницы
</div>

<div class="contentin split_3">
Текст 3 страницы
</div>

<div class="contentin split_4">
Текст 4 страницы
</div>

<div class="contentin split_5">
Текст 5 страницы
</div>
После, разместите в конце статьи еще два HTML блока:
<div class="numpage">
</div>
<div class="pagenum">
</div>
Опубликуйте или обновите сообщение и проверьте результат. Если ничего не отображается попробуйте подключить библиотеки jquery.

Переходим к просмотру видео:



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

2 Коммент.

Оставить комментарий
avatar
Руслан Хайгошев
мая 24, 2018

А как сделать разделение между сообщениями. У меня они идет в два столба, но впритык друг к другу. Левле сообщение примыкает к правому.

Ответить
avatar
Mark Korvin
мая 24, 2018

Подберите другой шаблон, где сообщения отображаются нормально.

Ответить