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>

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


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

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

8 Коммент.

Оставить комментарий
avatar
Стас Денежный
октября 20, 2015

Шикарно смотрится. Спасибо

Ответить
avatar
Шаблоны для Blogger
октября 20, 2015

Да, сейчас это самый свежий и ходовой виджет популярных сообщений для blogger. И вскоре мы планируем опубликовать еще парочку интересных вариантов.

Ответить
avatar
Трисс
декабря 10, 2015

Подскажите, установил этот виджет, но картинки на нем почему то размытые, что нужно сделать?

Ответить
avatar
Шаблоны для Blogger
декабря 10, 2015

Трисс, размытые они из-за того что, второй код Javascript был поставлен некорректно. Если Вы все сделали так, как указано в описании, в таком случае попробуйте второй код разместить перед </head>

Ответить
avatar
Трисс
декабря 10, 2015

Всё получилось, спасибо!

Ответить
avatar
Шаблоны для Blogger
декабря 10, 2015

Не за что, всегда рад помочь, обращайтесь.

Ответить
avatar
Ольга Чикурова
ноября 13, 2016

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

Ответить
avatar
Шаблоны для Blogger
ноября 13, 2016

Демо вариант можете просмотреть на этом блоге - demo.bloggertheme9.com/2015/11/blue-theme.html

Ответить