В данной публикации я покажу вам, как настроить, оптимизировать и стилизировать виджет популярных сообщений в блоге на Blogger.
Настройка виджета популярные сообщения
По умолчанию в настройках гаджета стоит отметка отображать публикации за прошедший год. В таком случае и посетителям и поисковым ботам будут показываться одни и те же сообщения. И в этом нет ничего плохого, но можно сделать в несколько раз лучше, если переключить на отметку за последние 7 дней. После чего, сообщения блога будут время от времени меняться и таким образом мы достигнем небольшого динамического эффекта, короче говоря блог будет обновляться. Такие настройки очень полезны для продвижения блога в поисковых системах, потому что за счет перелинковки и кликов пользователей необходимый для раскрутки вес будут получать не только одни и те же страницы, но и другие, которые так же в нем нуждаются. Просто загляните на Youtube и посмотрите, каким образом там работает виджет в правой панели. Он всегда показывает, что-то новое и таким образом Youtube удерживает большую часть своих зрителей. Вы так же можете добавить сразу несколько виджетов с разными конфигурациями, для более удобного и рационального их размещения в блоге я рекомендую вам сделать для них переключатель.Оптимизация гаджета популярные сообщения в новых темах
Теперь я предлагаю тем из вас, кто пользуются новыми темами Contempo, Soho, Notable и Emporio оптимизировать виджет поскольку в этих шаблонах он перенасыщен тегами H3. Чтобы исправить это замените код своего виджета на оптимизированный:
10
true
false
LAST_WEEK
Стилизация виджета популярные сообщения
Ну что ребята, отошли после вчерашнего шаблона. Если нет, тогда плавно переключаемся на нашу сегодняшнею статью в которой мы будем рассказывать о том, как добавить в свой блог на blogger стильный виджет популярные сообщения. Итак, этот виджет обладает несколькими интересными свойствами, которых нет в обычных виджетах этого типа. Во-первых все его сообщения пронумерованы и при наведении мыши уходят в правую сторону. Во-вторых каждое сообщение имеет собственный окрас, который так же исчезает при наведении курсора мышки в след за чем появляется оглавление поста. Если хотите познакомиться с ним поближе тогда переходите на наш тестовый блог. Если виджет вам понравился предлагаю приступить к его установки. Для этого нужно:В панели управления зайти в раздел Шаблон - Изменить HTML здесь ищем CSS код нашей стандартной версии виджета популярных сообщений, для этого жмете клавиши CTRL+F в поисковом окошке пишите Popular post и найденный код написанный синим цветом естественно относящийся к виджету удаляете. Затем ищем код ]]> перед которым вставляем следующий код:
/* 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);}Если вы не хотите, чтобы каждое изображения ваших сообщений имело свой отдельный окрас код выделенный желтым можете не копировать.
Дальше ищем код