Виджет пронумерованных популярных сообщений блога Blogspot



Популярные сообщения блога Blogspot с нумерацией  

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

Кое-что удалила, протестировала на своих демо и решила написать пост, так как редко такой виджет встречала на наших русских блогах. Поэтому, кто имеет желание вставить виджет в боковые колонки, Начнем:


добавление и настройка гаджета популярные сообщения блога Blogspot
Для начала идем в черновик blogger, и нажимаем-добавить гаджет. В открывшейся вкладке находим популярные сообщения, настраиваем и добавляем в макет блога (смотрите скриншот).

Затем копируем код ниже, идем в шаблон-изменить шаблон, в самом начале находим строку <b:skin>...</b:skin>, после <head>. Нажимаем слева на стрелку, прокручиваем вниз и находим строку ]]></b:skin>

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

.popular-posts ul li a {
    background: none repeat scroll 0 0 #eeeeee;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;



Можно настроить следующее#eeeeee-фон рамки; FFFFFF-цвет шрифта заголовков сообщений; #2DB3E9-цвет квадратика с цифрой номера; #FFFFFF-цвет цифры; 

В коде нумерация справа, поэтому кому надо слева, экспериментируйте вот с этими строчками в коде margin-left: 88% и   border-left-color: #CCCCCC;  left: -1px; Замените left на right. 
Вот вроде и все. Пишите отзывы.  А я говорю Вам всего доброго и до встречи.


Автор статьи ✎ Olga Protasova Выпуск ✹ 1/30/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *