10+ виджетов популярные сообщения для Blogger с миниатюрами

Виджеты "Популярные сообщения"

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

Есть много разных способов настроить ваш виджет популярные сообщения. Привлекательный виджет сообщений поразит ваших читателей. Это также увеличит вероятность получения большего количества кликов в вашем блоге. Что снизит показатель отказов вашего блога и повысит рейтинг Alexa. Добавить и настроить виджет популярные сообщения очень просто. Просто следуйте моим инструкциям.

Как добавить виджеты популярные сообщения- для Blogger?

Прежде всего, я покажу вам, как добавить виджет популярные сообщений по умолчанию в ваш блог-Blogger, а затем я покажу вам, как его настроить

1. Войдите в свой аккаунт блогера и перейдите в раздел « Дизайн ».

2. Перейдите в раздел боковой панели и нажмите ссылку « Добавить гаджет ».

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

4. Теперь пришло время настроить виджет. В этом разделе конфигурации вам будет предложено выбрать наиболее просматриваемые посты вашего блога. Сколько постов вы хотите показать с миниатюрой и фрагментом страницы или без него. Различный популярный дизайн постов требует другой конфигурации, поэтому пока оставьте его по умолчанию. Я покажу, что нужно для конфигурации каждого виджета позже. Добавьте виджет популярные сообщения, нажав кнопку « Сохранить ».

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

Виджеты Популярные сообщения для Blogger:

Виджет Популярные сообщения стиль 1:

Блог Ornate генерирует этот виджет популярных сообщений . Этот красивый и адаптивный виджет. Это означает, что вам не нужно изменять ширину вашего виджета, чтобы соответствовать боковой панели вашего блога. Я дал 6 различных эффектов наведения изображения на этот виджет. Нажмите здесь, чтобы получить пошаговую инструкцию по добавлению этого виджета: Виджет Популярные сообщения для Blogger с эффектом 6 Hover!

Виджет Популярные сообщения стиль 2:

Код:

.sidebar .PopularPosts ul {padding: 0;} .sidebar .PopularPosts ul li:first-child{max-height: 100%;width: 100%;opacity: 0.5;} .sidebar .PopularPosts ul li:nth-child(even){margin-right: 2%;} .sidebar .PopularPosts ul li {float: left;position: relative;width: 49%;overflow:hidden;padding: 0px !important;max-height: 120px;opacity: 0.4; box-sizing: border-box;margin-bottom: 2%; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;} .sidebar .PopularPosts ul li:hover {opacity: 1;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {height: 100%;width: 100%;object-fit: cover;box-sizing: border-box;padding:0;} .sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {opacity: 1;visibility: visible;} .sidebar .PopularPosts .item-title a {background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);color: #fff;position: absolute;text-align: center;text-decoration: none;font: 13px 'Oswald', sans-serif; right: 0;left: 0;bottom: 0%;padding: 100px 10px 10px;visibility: hidden;opacity: 0;} .sidebar .PopularPosts .item-snippet {display: none;}

Это виджет в стиле сетки для Blogger. Он генерируется helplogger. Этот виджет имеет отличный эффект для изображения. Этот виджет очень стильный и привлечёт больше посетителей. Заголовок ваших сообщений будет виден, если читатели наводят курсор мыши на изображение. Фрагмент будет скрыт для этого популярного виджета сообщений, поэтому лучше всего снять флажок «фрагмент» при настройке виджета.

Виджет Популярные сообщения стиль 3:

Код:

.widget .widget-item-control a img {background: none;height: 20px !important;width: 20px !important;border: none;padding: none;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;-ie-box-shadow: none;} .sidebar .PopularPosts .widget-content ul li {overflow: hidden !important;height: 73px !important;list-style-type: none !important;list-style: none;padding: 0px 0px 0px;} .sidebar .popular-posts ul {list-style-type: none !important;padding-left:0px !important;} .sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li:before {float: right;display: inline-block;position: relative;list-style-type: none;color: #000;background: rgba(247, 247, 247, 1);box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);counter-increment: popcount;content: counter(popcount,decimal);font-size: 15px;font-weight: normal;line-height: 20px;right: 1px;top: 0px;z-index: 999999999999;padding: 0px 6px 1px 5px;border: solid #B5B5B5;border-width: 0px 1px 1px 1px;border-radius: 0px 0px 7px 7px;} .sidebar .PopularPosts .item-thumbnail {float: left;margin: 0px!important;} .sidebar .PopularPosts img {overflow: hidden !important;height: 72px;width: 72px;margin-right: 0px;padding-right: 0px !important;} .sidebar .PopularPosts .item-title a:hover {background: #f6f6f6;color: #000;} .sidebar .PopularPosts .item-title a {display: block;text-decoration: none;font-family: "Oswald",sans-serif;font-weight: normal;font-size: 14px;padding: 10px 30px 0px 78px;background: #EAEAEA;height: 62px;color: #6E6E6E;border-bottom: 1px solid #cccccc;line-height: normal;transition: all .4s ease-in-out;}

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

Конфигурация:

перейдите в раздел « Тема » и нажмите кнопку « Редактировать шаблон ».
Найдите раздел « </head> » и вставьте этот код прямо перед ним.

Виджет Популярные сообщения стиль 4:

Код:

.sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li {list-style: none !important;float: left;font-family:'Oswald',Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;} .sidebar .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: #e2e2e2;top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}

Этот виджет популярные сообщения довольно сильно отличается от других, потому что этот виджет основан на двух столбцах. Этот виджет будет показывать популярные посты вашего блога с миниатюрой и заголовком над ней. Подсчет сообщений доступен в этом шаблоне. Это означает, что наиболее посещаемый пост получит ранг 1 остальные в том же духе. Миниатюры покажут эффект увеличения при наведении мыши.

Конфигурация:

Для обеспечения высокого качества изображения вы должны добавить этот фрагмент кода непосредственно перед закрывающим тегом « </body> » вашего шаблона. Просто зайдите в Тема > Изменить HTML и найдите закрывающий тег </body> . Вставьте код JavaScript прямо над тегом body.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var boi = 150; $('#PopularPosts1').find('img').each(function(n, image){ var image = $(image); image.attr({src : image.attr('src').replace(/sBd{2,4}/,'s' + boi)}); image.attr('width',boi); image.attr('height',boi); }); }); //]]></script>

Вы можете удалить выделенную строку jquery, если ваш шаблон уже содержал это, иначе никаких изменений в этом коде не требуется.

Виджет Популярные сообщения стиль 5:

Код:

.sidebar .popular-posts ul {counter-reset: popcount;padding: 0;margin: 0;} .sidebar .popular-posts ul li {float: left;position: relative;overflow: hidden;list-style: none !important;border: 0;height: 130px;width: 100%;font-family: "Oswald",sans-serif;font-weight: bold;margin: 2px;padding: 0px !important;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {display: block;float: left;width: 100%;height: 130px;padding: 0;transition:1.0s;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;padding-bottom: 0;z-index: 999;right: 0;left: 0;bottom:0;} .sidebar .PopularPosts .item-title a {display: block;background: rgba(32, 32, 32, 0.77);font-family: "Oswald",sans-serif;font-weight: bold;font-size: 16px;line-height: normal;color: #FFFFFF;text-transform: capitalize;padding: 10px 0px 5px 10px;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;content: counter(popcount, decimal);position: absolute;list-style-type: none;background: rgba(255, 252, 8, 1);float: left;color: #000;line-height: 20px;font-size: 14px;padding: 0px 8px 1px 1px;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;border: solid #FFF;top: 0;z-index: 4;}

Это еще один красивый, виджет популярные сообщения- для Blogger. Этот виджет будет отображать изображения вашего популярного поста, а заголовок будет виден поверх изображений. Эффект увеличения доступен при наведении мыши. Этот виджет будет упорядочивать все популярные посты вашего блога и обеспечивать рейтинг, размещая номера на каждом посте.

Виджет Популярные сообщения стиль 6:

Код:

.popular-posts ul{padding-left:0px;} .popular-posts ul li {list-style-type: none;background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDeEmD2wYdYBYoduQiR7VGKDw1c6yOxRVrNjSH2kaJiCjnZXZXTB-C7BGoUMT6GVON7DXNALLlDNCZR3DUiipXIsHL7l8yszPowe3wXC2Ba2oovtMVPbcOV5LkGJZmg6KMF6NrokrSrN7/s1600/bo-pp-arrow.gif) no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} .popular-posts ul li:hover {border:1px solid #6BB5FF;} .popular-posts ul li a:hover {text-decoration:none;} .popular-posts .item-thumbnail img {border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}

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

Виджет Популярные сообщения стиль 7:

Код:

#PopularPosts1 ul{width:290px;counter-reset:li;left:-7px;padding:8px 0px 1px;list-style:none;} #PopularPosts1 li{left:5px;width:95%;position:relative;margin:0 0 10px 0;padding: 3px 2px 0 17px;} #PopularPosts1 ul li{position:relative;display:block;margin: .5em 0;*padding: .2em;background:#ddd;padding: .4em .2em .4em 1em;transition: all .3s ease-out;border-radius: .3em;text-decoration: none;} #PopularPosts1 ul li:before{position:absolute;background:#FB8835;color:#fff;content: counter(li);counter-increment: li;margin: -1.3em;left: 0;top: 50%;width: 2em;border: .2em solid #fff;height: 2em;border-radius: 2em;font-weight: bold;font-size: 15px;text-align: center;line-height: 2em;box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;-webkit-box-shadow: 0 8px 5px -7px #888;transition: all .3s ease-out;} #PopularPosts1 ul li:hover:before{transform: rotate(360deg);} #PopularPosts1 ul li:hover{background: #eee;} #PopularPosts1 ul li a{min-height:25px;color:#444;display:block;font: 14px Georgia, serif;text-decoration:none;text-transform:uppercase;text-shadow: 0 -1px 2px #fff;} #PopularPosts1 ul li a:hover{color: #444;}

Этот виджет популярные сообщения с вращающимся эффектом числа рядом с миниатюрой. Это еще один простой и чистый виджет популярные сообщения. Этот виджет очень прост в установке. Просто скопируйте код CSS и вставьте его в шаблон Blogger. Тогда виджет покажет свою магию.

Виджет Популярные сообщения стиль 8:

Код:

.popularposts{line-height:1.6;color:#fff;font-size:100%;border-radius:5px 5px 0 0;} .popular-posts{font-size:100%;line-height:1.6;border-radius:0; color:#fff} .popular-posts a{color:#fff} .popular-posts a:hover{color:#fff} .PopularPosts ul{counter-reset:popcount;list-style:none;padding:0;margin:0;} .popular-posts ul li:before{counter-increment:popcount;list-style-type:none;margin:10px 15px 0 5px;padding:0.3em 0.8em;content:counter(popcount);color:#fff;font-size:16px;position:relative;border:1px solid #fff;border-radius:100%;float:left;} .PopularPosts li{background:none;list-style:none;display:block;text-transform:uppercase;padding:10px 18px;margin:0;clear:both;overflow:hidden;border-bottom:none;font:13.5px/140%;} .PopularPosts li a{text-decoration:none} .PopularPosts li:hover{background:#0FB9BB} #PopularPosts1 .widget-content{margin-bottom:-2px;padding:0px 0 0 17px;} .PopularPosts ul li{padding:3px 7px;border:none} .PopularPosts ul li:nth-child(1){margin-right:0;background-color:#F48067;} .PopularPosts ul li:nth-child(2){margin-right:0;background-color:#2ba6e1;} .PopularPosts ul li:nth-child(3){margin-right:0;background-color:#718397;} .PopularPosts ul li:nth-child(4){margin-right:0;background-color:#11b7b5;} .PopularPosts ul li:nth-child(5){margin-right:0;background-color:#d9ba71;} .PopularPosts ul li:nth-child(6){margin-right:0;background-color:#d9ba71;} .PopularPosts ul li:nth-child(7){margin-right:0;background-color:#2ba6e1;} .PopularPosts ul li:nth-child(8){margin-right:0;background-color:#718397;} .PopularPosts ul li:nth-child(9){margin-right:0;background-color:#11b7b5;} .PopularPosts ul li:nth-child(10){margin-right:0;background-color:#d9ba71;}

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

Виджет Популярные сообщения стиль 9:

Код:

.PopularPosts .item-thumbnail {margin-right: 10px;margin-bottom: 0;box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;border-radius: 50%;-webkit-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;-moz-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;-webkit-border-radius: 50%;-moz-border-radius: 50%;} .PopularPosts ul li img {border-radius: 50%;width: 50px;height: 50px;background: #333;padding-right: 0;-webkit-border-radius: 50%;-moz-border-radius: 50%;} .PopularPosts .widget-content ul li {background: #00aeef;} .PopularPosts ul li a {display: block;color: #fff;padding: 12px;line-height: 20px;font-family: Arial,serif;font-weight: 500;font-size: 15px;} .PopularPosts .widget-content ul li+li {margin: 0 10px 0 0;transition: all 0.4s ease;-moz-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;} .PopularPosts .widget-content ul li+li+li {margin: 0 20px 0 0;} .PopularPosts .widget-content ul li+li+li+li {margin: 0 30px 0 0;} .PopularPosts .widget-content ul li+li+li+li+li {margin: 0 40px 0 0;} .PopularPosts .widget-content ul li:hover {opacity: 0.8;-moz-opacity: 0.8;-webkit-opacity: 0.8;} .PopularPosts .widget-content ul li:nth-child(2n+1) {background: #222;}

Этот прекрасный виджет полностью отличается от других виджетов. Этот виджет очень привлекателен, поэтому он увеличит вероятность получения большего количества кликов от ваших читателей. Для добавления этого виджета на ваш сайт достаточно нескольких кликов. Он поддерживает топ-5 популярных постов вашего сайта.

Конфигурация:

Выберите вариант миниатюры изображения.

Снимите флажок с фрагментом.

Отображение до 5 сообщений для оптимального результата.

Виджет Популярные сообщения стиль 10:

Код:

.PopularPosts .item-snippet{display:none} .PopularPosts .item-title{padding:0 5pxfont-weight:700;padding-bottom:.2em;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts ul{overflow:hidden;list-style:none;background:#fff;padding:5px 5px 0;margin:0;border-top:none} .PopularPosts ul{list-style:none;margin:0;color:#64707a} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{background:none;list-style:none;margin:0;padding:0;border:none;outline:none} .PopularPosts ul li img{display:block;float:left;background:#fafafa;margin:0 10px 0 0;height:60px;width:60px;overflow:hidden;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1} .PopularPosts ul li:before{font-family:fontawesome;content:'f005f005f005f005f005';display:inline-block;position:absolute;color:#30AEE1;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'f005f005f005f005f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005f123';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005f005f006';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005f005f123f006';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005f005f005f006f006';opacity:.75} .PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'f005f005f123f006f006';opacity:.7} .PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'f005f005f006f006f006';opacity:.75} .PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'f005f123f006f006f006';opacity:.7} .PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'f005f006f006f006f006';opacity:.75} .PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'f123f006f006f006f006';opacity:.7}

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

Сценарий:

Перейдите в раздел « Тема > Редактировать HTML » и найдите открывающий тег « <head> ». Вставьте замечательный скрипт шрифта сразу после <head> и нажмите « Сохранить шаблон ».

Конфигурация:

Снимите флажок «Фрагмент».

Выберите «Эскиз изображения», и вы сможете отобразить до 10 популярных сообщений.

Виджет Популярные сообщения стиль 11:

Код:

.sidebar .popular-posts ul {padding: 0;margin: auto;}
.sidebar .popular-posts ul li {list-style: none !important;float: left;position: relative;overflow: hidden;margin: 0 5px 5px 0;padding: 2px; border: 1px solid #f5f5f5;}
.sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;}
.sidebar .PopularPosts ul li img {float: left;display: block;height: 85px;padding: 0;}
.sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);}
.sidebar .item-title {display:none !important;}
.sidebar .item-title a {display:none !important;}

Это виджет в стиле галереи для блога Blogger. Небольшой фрагмент кода и небольшая конфигурация могут изменить популярность вашего блога и представить его по-другому. Если вам нужно показать красивую популярную галерею сообщений с привлекательным эффектом наведения, просто вставьте этот код.

Конфигурация:

Установите флажок «Эскиз изображения».

Снимите флажок « Фрагмент ».

Отображение до 9 популярных сообщений для оптимального результата.

Как добавить CSS для виджета популярные сообщения?

Вы выбрали какой-либо стиль из списка выше? Я думаю да. Итак, теперь вопрос в том, как добавить этот код CSS в шаблон Blogger. Эта процедура очень проста. Просто следуйте этим шагам:

Примечание: перед редактированием вы должны знать, как сделать резервную копию шаблона блоггера и восстановить его?

1. Перейдите в раздел « Тема » и нажмите кнопку « Изменить HTML » в шаблоне блога .

2. Теперь найдите код « <b:skin>» . Разверните его, если он еще не раскрыт. Теперь перейдите в конец раздела CSS и найдите « ]]></b:skin> »

3. Вставьте выбранный код CSS прямо над « ]]></b:skin> ».

4. Нажмите кнопку « Сохранить шаблон ».

5. Теперь зайдите в свой блог, чтобы увидеть, работает ли виджет правильно или нет

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

Cancel