» » Гаджет "Популярные статьи" на Blogspot

Гаджет "Популярные статьи" на Blogspot

популярные сообщения
В прошлой статье я предложила вам изменить в блоге стиль виджета Популярных постов. Сегодня продолжаю эту тему дальше. 
Предлагаю посмотреть ещё один красивый виджет. Он найден на сайте allbloggertricks.com.
Установите, если он ещё у вас не установлен, гаджет Популярных сообщений. Заходим в Дизайн → Добавить Виджет → Популярный пост. Включите показ картинок и текста в гаджете. 

Меняем стиль

Меняем стиль
Заходим в Тема → изменить HTML. В шаблоне находим тег ]]></b:skin> тег и чуть выше него вставляем следующий код.
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
max-height: 180px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
height: 100%;
max-height: 190px;
overflow: hidden;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail:after {
content: counter(popularcount, decimal);
counter-increment: popularcount;
float: left;
font-size: 14px;
list-style-type: none;
padding:10px;
position: absolute;
top: 0;
z-index: 4;
background: #e84c4c;
color: #fff;
}
.sidebar .PopularPosts .item-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px 'Playfair Display', serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 80px;
width: 80%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font-size: 13px;
text-align: center;
background: #e84c4c;
color:#fff;
}
Поменять в коде можно:
Красным выделила цвет квадратика с цифрой и подложки с анонсом статьи.

Далее, находим в шаблоне тег </body> и выше него вставляем.
<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
$(document).ready(function(){
 $('.PopularPosts img').each(function(){
  var srcUrl = $(this).attr('src');
  $(this).attr('src', srcUrl.replace('default', 'maxresdefault'));
 });
});
//]]>
</script>
Сохраняем шаблон.

Ваши комментарии:

Комментарии со спамом удаляются.