Сегодня мы узнаем, как сделать сообщение в блоге 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] в область содержимого страницы.
Теперь нажмите кнопку публикации и проверьте опубликованную страницу, чтобы увидеть недавно добавленный виджет . 😉
Примечание: — Некоторые шаблоны не поддерживают этот виджет
Заключение
Поздравляю !! Вы сделали это. теперь вы узнали, как сделать свой блог полной шириной, с левой боковой панелью и правой боковой панелью с помощью короткого кода . Посетите свой блог и проверьте этот замечательный виджет вживую. Надеюсь, вам понравился этот урок. Если вам понравилось, поделитесь им с друзьями.
