Будь в курсе событий!

08.02.2013

Создаем блок подписчиков и фолловеров в сайдбаре

Leave a Comment
Каждый более-менее профессиональный блоггер отслеживает количество своих подписчиков. Это, во-первых, может быть интересно ему самому дабы понимать насколько большая или не очень аудитория блога. Во-вторых, информация может использоваться при формировании цены для размещения рекламы.
Обычно эти данные (как и кратную информацию о блоге) размещают в сайдбаре ближе к верху страницы. Так, например, у меня вы можете видеть счетчик Feedburner, который показывает число подписчиков по RSS. Но есть и другие сервисы, отдающие подобную статистику - Facebook, твиттер, социальные сеть Google+, Вконтакте, Pinterest и т.п. Сегодня рассмотрю небольшой прием для отображения количества подписчиков по всем ним в одном блоке. За подсказку спасибо этой статье. Кроме числа фолловеров напротив каждого сервиса будет кнопка подписки. Выглядеть это все будет приблизительно так.
блок подписчиков
1. Первым делом заходим в админку блога и выбираем пункт меню "Шаблон". После этого кликаем по кнопке "Изменить HTML".
2. В открывшемся окне с кодом шаблона находим строку ]]> и перед ней добавляем:
 

/* The CSS Code for the menu starts here bloggertrix.com */

div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{

background: none;border: none;margin: 0;padding: 0;}

div#socialbox{

color: #768a96;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

width:300px;}

div#socialbox ul{

background: url() repeat;

border: 1px solid #d8dcdf !important;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: 0px 2px 4px #dfe4e7;

-moz-box-shadow: 0px 2px 4px #dfe4e7;

box-shadow: 0px 2px 4px #dfe4e7;

list-style: none;

margin: 0 !important;

padding: 0;}

div#socialbox ul li{

background-image: none;

border-bottom: 1px solid #d8dcdf;

height: 59px;

list-style: none;}

div#socialbox ul li:last-child{

border-bottom: none;}

div#socialbox ul li p{

padding: 19px 9px 0 9px;}

div#socialbox ul li p img{

border: none;

margin-right: 10px;

position: relative;

top: 3px;

vertical-align: baseline;}

div#socialbox ul li p span{

color: #425763;

font-weight: bold;}

div#socialbox ul li p a.socialbox-button{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWy-WM_L50oZNntawmzn__Xcq8PvFUlzaOHv_uc7TUEAHisDQnmKbGfqCPBn-B2-sRBfmCVbvnPlb2rNB6DupRF-_hHlt3gmKjzZkdDJ9EdZLbClmW6GpyjQmDnKWvGautsd8zeZyWbDY/s1600/bloggertrix-button.png) no-repeat;

border: 1px solid #d8dcdf;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

color: #425763;

float: right;

font-size: 11px;

font-weight: bold;

line-height: 11px;

padding: 6px 10px;

position: relative;

text-decoration: none;

text-transform: uppercase;

top: -2px;}

div#socialbox ul li p a.socialbox-button:hover{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWy-WM_L50oZNntawmzn__Xcq8PvFUlzaOHv_uc7TUEAHisDQnmKbGfqCPBn-B2-sRBfmCVbvnPlb2rNB6DupRF-_hHlt3gmKjzZkdDJ9EdZLbClmW6GpyjQmDnKWvGautsd8zeZyWbDY/s1600/bloggertrix-button.png) 0 -27px no-repeat;}

div#socialbox ul li p a.socialbox-button:active{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWy-WM_L50oZNntawmzn__Xcq8PvFUlzaOHv_uc7TUEAHisDQnmKbGfqCPBn-B2-sRBfmCVbvnPlb2rNB6DupRF-_hHlt3gmKjzZkdDJ9EdZLbClmW6GpyjQmDnKWvGautsd8zeZyWbDY/s1600/bloggertrix-button.png) 0 -54px no-repeat;}

Это все CSS стили оформления нашего блока.
3. Дальше нужно создать соответствующий элемент. Для этого заходим в меню "Дизайн". Кликаем по ссылке "Добавить гаджет" и располагаем его в том месте шаблона, где вам захочется. Тип гаджета - HTML/Javascript. В него вставляем следующий код:








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


0 коммент. :

© 2012-2017 Cash's from program