Blogger стильный виджет популярные сообщения


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

В панели управления зайти в раздел Шаблон - Изменить HTML здесь ищем CSS код нашей стандартной версии виджета популярных сообщений, для этого жмете клавиши CTRL+F в поисковом окошке пишите Popular post и найденный код написанный синим цветом естественно относящийся к виджету удаляете. Затем ищем код ]]></b:skin> перед которым вставляем следующий код:

/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:100%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

Если вы не хотите, чтобы каждое изображения ваших сообщений имело свой отдельный окрас код выделенный желтым можете не копировать.

Дальше ищем код </body> перед которым нужно вставить следующий код:

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

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


Коммент.

BLOGGER: 8
Loading...
Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Blogger стильный виджет популярные сообщения
Blogger стильный виджет популярные сообщения
Новый виджет 2015 года популярные сообщения для блога на blogspot. Как установить?
https://3.bp.blogspot.com/-CStnMDRukKk/Vd7WGWbxEbI/AAAAAAAAhNQ/7o2XzUFw3us/s400/blogger%2B-%2B%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B6%25D0%25B5%25D1%2582%2B%25D0%25BF%25D0%25BE%25D0%25BF%25D1%2583%25D0%25BB%25D1%258F%25D1%2580%25D0%25BD%25D1%258B%25D0%25B5%2B%25D1%2581%25D0%25BE%25D0%25BE%25D0%25B1%25D1%2589%25D0%25B5%25D0%25BD%25D0%25B8%25D1%258F.jpg
https://3.bp.blogspot.com/-CStnMDRukKk/Vd7WGWbxEbI/AAAAAAAAhNQ/7o2XzUFw3us/s72-c/blogger%2B-%2B%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B6%25D0%25B5%25D1%2582%2B%25D0%25BF%25D0%25BE%25D0%25BF%25D1%2583%25D0%25BB%25D1%258F%25D1%2580%25D0%25BD%25D1%258B%25D0%25B5%2B%25D1%2581%25D0%25BE%25D0%25BE%25D0%25B1%25D1%2589%25D0%25B5%25D0%25BD%25D0%25B8%25D1%258F.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/08/vidzhet-populjarnye-soobshhenija.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/08/vidzhet-populjarnye-soobshhenija.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy