Сегодня 30 августа, суббота

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Блог для блогов - создание блога на blogspot / Запись в блоге

	Блог для блогов - создание блога на blogspot Голосов: 1 Адрес блога: http://bdblogov.blogspot.com/ Добавлен: 2013-06-02 03:52:18 блограйдером Olga28

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

2014-01-30 21:58:00 (читать в оригинале)

Популярные сообщения блога 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. Вот вроде и все. Пишите отзывы. А я говорю Вам всего доброго и до встречи.

Тэги: гаджеты

Блограйдеров
14516

Блогов
219966
(+0 сегодня)

Сообществ
1311
(+0 сегодня)

Рыбалка
по среднему баллу (5.00) в категории «Спорт»

Категория «Наука»

Взлеты Топ 5


+421	427	Splash_Phantom
+355	432	MicheL1102
+346	348	The_Searcher
+289	357	Удивительная психология
+266	309	hosm.ru — Умный дом своими руками

Падения Топ 5


-3	11	il-e
-5	124	Ноэтическая Динамика » Ноэтическая Динамика
-11	22	ГОРОСКОП
-12	24	Улицы Праги
-12	411	БестГлобалИнфо

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.