Сделайте свой блог полной шириной, с левой боковой панелью и правой боковой панелью с помощью шорткодов

 

Сегодня мы узнаем, как сделать сообщение в блоге Blogger на всю ширину, сдвинуть боковую панель справа налево и наоборот. Это очень продвинутое руководство, и вы не можете найти его больше нигде в Интернете. После выполнения этого руководства вы получите свободу выбора этих трех вариантов, и вы можете переключиться на любой стиль без каких-либо знаний в области кодирования. Вы можете активировать любой стиль, добавив шорткод в свой пост или редактор страницы, Полная ширина, левая и правая боковые панели в блоге. Наслаждайтесь !!

Добавление HTML-скрипта 

Это самая важная часть урока, и вы должны делать ее очень осторожно. В шаблоне найдите тег </body> и прямо над ним вставьте следующую кодировку HTML

<script type="text/javascript">
  /*<![CDATA[*/
// jquery replacetext plugin https://github.com/cowboy/jquery-replacetext
(function(e){e.fn.replaceText=function(t,n,r){return this.each(function(){var i=this.firstChild,s,o,u=[];if(i){do{if(i.nodeType===3){s=i.nodeValue;o=s.replace(t,n);if(o!==s){if(!r&&/</.test(o)){e(i).before(o);u.push(i)}else{i.nodeValue=o}}}}while(i=i.nextSibling)}u.length&&e(u).remove()})}})(jQuery);
   var s = "[full_width]";
    var o = "[left_sidebar]";
    var u = "[right_sidebar]";
    $(".post *").replaceText(s, "<style>@media screen and (min-width: 980px){.item #main-wrapper{width:100% !important;max-width:100%!important;float:none!important;border-right:0!important;border-left:0!important}.item #sidebar-wrapper{display:none;}.item #main-wrapper #main{margin-left:0!important;margin-right:0!important}}</style>");
    $(".post-body *").replaceText(o, "<style>@media screen and (min-width: 980px){.item #main-wrapper{float:right!important;border-right:0!important;margin-right: 0px !important;}.item #sidebar-wrapper{float:left!important;padding-left:0!important;}}</style>");
    $(".post-body *").replaceText(u, "<style>@media screen and (min-width: 980px){.item #main-wrapper{float:left!important;border-right:0!important;margin-right: 0px !important;}.item #sidebar-wrapper{float:right!important;padding-left:0!important;}}</style>");
 /*]]>*/
</script>

Теперь сохраните свой шаблон и перейдите на страницы.

Примечание: виджет работает на jquery, поэтому вам необходимо установить плагин jquery, если вы еще не установили его.

Шаг 2 ( добавление шорткодов ) - самый важный !!
Теперь это самая важная часть учебника, и вы должны делать это очень осторожно. Перейдите в панель управления blogger> Опубликовать / Страницы> Отредактируйте существующие или добавьте новые.
В содержимом публикации / страницы добавьте следующий код в область содержимого.

Столб полной ширины;

Перейдите в раздел "Страницы" или "Сообщения"> "Новая страница" или "Сообщение".
В содержимом новой страницы / содержимом сообщения после добавления заголовка страницы / сообщения добавьте код [full_width] в область содержимого страницы.

Левая боковая панель;

Перейдите в раздел "Страницы" или "Сообщения"> "Новая страница" или "Сообщение".
В содержимом новой страницы / публикации после добавления заголовка страницы / публикации добавьте код [left_sidebar] в область содержимого страницы.

Правая боковая панель;

Перейдите в раздел "Страницы" или "Сообщения"> "Новая страница" или "Сообщение".
В содержимом новой страницы / содержимом сообщения после добавления заголовка страницы / сообщения добавьте код [right_sidebar] в область содержимого страницы.
Теперь нажмите кнопку публикации и проверьте опубликованную страницу, чтобы увидеть недавно добавленный виджет . ;)

Примечание: - Некоторые шаблоны не поддерживают этот виджет

Заключение

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