5 вариантов виджета популярные сообщения для Блоггер.

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


Должна обратить ваше внимание на то, что предложенные ниже коды должны соответствовать вашим настройкам. Не трудно будет разобраться что к чему. Я сделала лишь один рабочий вариант на этом блоге, где сможете его увидеть. Остальные варианты так же протестировала и предложу лишь фото с описанием.

Вариант 1.Картинка с заголовком и появляющимся сниппетом при наведении.

дизайн гаджета популярных постов.

Код.
<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-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: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>


Вариант 2. Картинка и ниже название и краткий анонс. Такой очень элегантный.


Код.
<style type='text/css'>
.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;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>


Вариант 3. Именно его вы видели по ссылке выше.


Код.
<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>


Вариант 4. При наведении на картинку отображается заголовок поста.


Код.
<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
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 {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
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%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

Вариант 5. 

Код.
<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>


Как установить такую красоту в блоге.

Вкладка шаблон - изменить. Находим закрывающийся тег </HEAD> . Для начинающих статья как найти строку в шаблоне правильно. Если не получается пока так ищите его  вверху шаблона.


Сразу над ним устанавливаем код выбранного варианта. Сохраняйте шаблон.

В зависимости от того, какой вариант вы выбрали, обращу ваше внимание, что в некоторых стилях присутствует стиль шрифта Oswald. Для того, чтобы всё корректно отображалось необходимо после открывающегося тега <head> (она тоже вверху шаблона) добавить следующую строку.
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Шаг 2. Там же во вкладке шаблон находим закрывающийся тег </body>. И над ним устанавливаем код JavaSckript чтобы всё это работало. (Этот тег ищите ближе к концу шаблона.)

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

В строке красного цвета - скрипт библиотеки Jquery. Скорее всего она уже есть в шаблоне. Тогда код вставляйте без неё.

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


Я всем желаю удачи и до новых встреч.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


18 комментариев:

  1. ЗДОРОВО!Виктория, какая вы выдумщица! У меня уже есть ОЧЕНЬ красивые популярные сообщения и я их менять не хочу.

    ОтветитьУдалить
  2. Виктория! Я вставила новые ссылки на ваш блог на своей странице "Я - Блогер"!

    ОтветитьУдалить
    Ответы
    1. Ирина, конечно всего не наставишь в блог. Но ведь здорово, когда есть из чего выбирать. Ирина, со ссылками аккуратней. Большое их количество внешних не приветствуется поисковиками.

      Удалить
  3. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
  4. Виктория! Это ведь просто ссылки на ваши страницы! Их нельзя много вставлять в сообщениях и на страницах? БОЛЬШОЕ СПАСИБО!

    ОтветитьУдалить
    Ответы

    1. Вообще любые ссылки внешние нужно закрывать от индексации тегом
      rel=nofollow. Когда вы прописываете ссылку поставьте галочку - Добавить атрибут rel=nofollow

      Удалить
  5. Виктория! Спасибо! С интересом читаю Ваши полезные статьи.

    ОтветитьУдалить
    Ответы
    1. Татьяна, приятно слышать. Хочется надеяться, что кому - то мои шпаргалки пригодятся. Спасибо Вам.

      Удалить
  6. Настоящее сокровище. В свое время я много искала, пока нашла работающие "похожие сообщения". А такие интересные, как у тебя, так и не встречала даже..

    ОтветитьУдалить
    Ответы
    1. Наташа, выбирай не хочу. Вот уж и правда, ни что не стоит на мест. Спасибо автору .

      Удалить
  7. Виктория, здравствуйте! Мне непонятно как ставить галочку, где её найти и как добавлять атрибут rel=nofollow. ПОМОГИТЕ, ПОЖАЛУЙСТА!

    ОтветитьУдалить
    Ответы
    1. Ирина, добрый день. При написании сообщении в редакторе нажимаем на функцию ССЫЛКА. В открывшемся окне ( как Вы обычно оформляйте ссылку. И внизу 2 окошка-открывать ссылку в новом окне-ставим галку (или нет) как хотите. А в другом ставим галочку в окне Добавить атрибут rel=nofollow - она будет закрыта от индексации.

      Удалить
  8. Добрый день. Кому что нравится, на любой вкус! Здорово!
    Очень ценное дополнение, Вика, по поводу ссылок. К сожалению, не придала этому моменту вообще никакого значения. Теперь, думаю, кое-где внесу поправки. Спасибо.

    ОтветитьУдалить
  9. Виктория! Не все блогеры-новички знают про этот АТРИБУТ! Вы не хотите написать об этом отдельный пост? А про протокол https? Для чего он вообще нужен? БОЛЬШОЕ СПАСИБО! С праздником вас поздравляю от души! С Днем Победы!

    ОтветитьУдалить
    Ответы
    1. Всё же напишу наверное про него.

      Удалить
  10. На Blogger была статья, что все блоги blogspot переведены на протокол https. Я статью прочитала, но ничего не поняла, надо ли мне что-нибудь делать или нет. СПАСИБО!!!

    ОтветитьУдалить
    Ответы
    1. Ирина, про rel=nofollow писать не буду. В сети этой информации пруд пруди. А насчёт https сейчас с 3 мая даже если Вы не включили в настройках блога https, каждый блог сейчас по умолчанию будет переведен на этот протокол. Вся беда в том что вот у меня к примеру на тестовых блогах пошли уже глюки. Не отображается гаджет-альтернатива постоянных читателей.
      Ирина, вот справка Гугл я лучше не напишу https://support.google.com/blogger/answer/6286127

      Удалить
  11. Любовь, все внешние ссылки нужно закрывать атрибутом rel=nofollow. Конечно с авторитетных ресурсов, такие как Википедия, Гугл, Яндекс лучше оставить это предаст авторитетность и блогу. Тут девчонки надо уже начинать интересоваться SEO.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo