Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

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

Каждый более-менее профессиональный блоггер отслеживает количество своих подписчиков. Это, во-первых, может быть интересно ему самому дабы понимать насколько большая или не очень аудитория блога. Во-вторых, информация может использоваться при формировании цены для размещения рекламы.
Обычно эти данные (как и кратную информацию о блоге) размещают в сайдбаре ближе к верху страницы. Так, например, у меня вы можете видеть счетчик Feedburner, который показывает число подписчиков по RSS. Но есть и другие сервисы, отдающие подобную статистику — Facebook, твиттер, социальные сеть Google+, Вконтакте, Pinterest и т.п. Сегодня рассмотрю небольшой прием для отображения количества подписчиков по всем ним в одном блоке. За подсказку спасибо этой статье. Кроме числа фолловеров напротив каждого сервиса будет кнопка подписки. Выглядеть это все будет приблизительно так.
блок подписчиков
1. Первым делом заходим в админку блога и выбираем пункт меню «Шаблон». После этого кликаем по кнопке «Изменить HTML».
2. В открывшемся окне с кодом шаблона находим строку ]]></b:skin> и перед ней добавляем:
<code> <p>/* The CSS Code for the menu starts here bloggertrix.com */<br/>
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{<br/>
background: none;border: none;margin: 0;padding: 0;}</p><p>div#socialbox{<br/>
color: #768a96;<br/>
font-family: Arial, Helvetica, sans-serif;<br/>
font-size: 14px;<br/>
width:300px;}</p><p>div#socialbox ul{<br/>
background: url() repeat;<br/>
border: 1px solid #d8dcdf !important;<br/>
-webkit-border-radius: 4px;<br/>
-moz-border-radius: 4px;<br/>
border-radius: 4px;<br/>
-webkit-box-shadow: 0px 2px 4px #dfe4e7;<br/>
-moz-box-shadow: 0px 2px 4px #dfe4e7;<br/>
box-shadow: 0px 2px 4px #dfe4e7;<br/>
list-style: none;<br/>
margin: 0 !important;<br/>
padding: 0;}</p><p>div#socialbox ul li{<br/>
background-image: none;<br/>
border-bottom: 1px solid #d8dcdf;<br/>
height: 59px;<br/>
list-style: none;}</p><p>div#socialbox ul li:last-child{<br/>
border-bottom: none;}</p><p>div#socialbox ul li p{<br/>
padding: 19px 9px 0 9px;}</p><p>div#socialbox ul li p img{<br/>
border: none;<br/>
margin-right: 10px;<br/>
position: relative;<br/>
top: 3px;<br/>
vertical-align: baseline;}</p><p>div#socialbox ul li p span{<br/>
color: #425763;<br/>
font-weight: bold;}</p><p>div#socialbox ul li p a.socialbox-button{<br/>
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) no-repeat;<br/>
border: 1px solid #d8dcdf;<br/>
-webkit-border-radius: 3px;<br/>
-moz-border-radius: 3px;<br/>
border-radius: 3px;<br/>
color: #425763;<br/>
float: right;<br/>
font-size: 11px;<br/>
font-weight: bold;<br/>
line-height: 11px;<br/>
padding: 6px 10px;<br/>
position: relative;<br/>
text-decoration: none;<br/>
text-transform: uppercase;<br/>
top: -2px;}</p><p>div#socialbox ul li p a.socialbox-button:hover{<br/>
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -27px no-repeat;}</p><p>div#socialbox ul li p a.socialbox-button:active{<br/>
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -54px no-repeat;}</p></code>
Это все CSS стили оформления нашего блока.
3. Дальше нужно создать соответствующий элемент. Для этого заходим в меню «Дизайн». Кликаем по ссылке «Добавить гаджет» и располагаем его в том месте шаблона, где вам захочется. Тип гаджета — HTML/Javascript. В него вставляем следующий код:
<code>
<p>&lt;br /&gt;<br/>
&lt;div id=&quot;socialbox&quot;&gt;<br/>
&lt;ul&gt;<br/>
&lt;li&gt;&lt;a href=&quot;http://www.facebook.com/bloggertrix&quot; target=&quot;_blank&quot; title=&quot;Like on Facebook&quot;&gt;&lt;img alt=&quot;Facebook&quot; src=&quot;http://3.bp.blogspot.com/-k-i66-3QRac/ULOabPh5-dI/AAAAAAAAFzo/8_T6Ux7XwDg/s1600/bloggertrix-facebook.png&quot; /&gt;&lt;/a&gt;2,563 Fans <br/>
&lt;a class=&quot;socialbox-button&quot; href=&quot;http://www.facebook.com/bloggertrix&quot; target=&quot;_blank&quot; title=&quot;Like on Facebook&quot;&gt;Like&lt;/a&gt;&lt;br /&gt;</p><p>&lt;/li&gt;<br/>
&lt;li&gt;&lt;a href=&quot;http://twitter.com/bloggertrix&quot; target=&quot;_blank&quot; title=&quot;Follow on Twitter&quot;&gt;&lt;img alt=&quot;Twitter&quot; src=&quot;http://1.bp.blogspot.com/-O8gKTilqhO4/ULOadDY-vjI/AAAAAAAAFz4/7BB73bOJTOU/s1600/bloggertrix-twitter.png&quot; /&gt;&lt;/a&gt;5,365 Followers <br/>
&lt;a class=&quot;socialbox-button&quot; href=&quot;http://twitter.com/bloggertrix&quot; target=&quot;_blank&quot; title=&quot;Follow on Twitter&quot;&gt;Follow&lt;/a&gt;<br/>
&lt;/li&gt;<br/>
&lt;li&gt;&lt;a href=&quot;http://feeds.feedburner.com/bloggertrix&quot; target=&quot;_blank&quot; title=&quot;Subscribe to Feed&quot;&gt;&lt;img alt=&quot;Feedburner&quot; src=&quot;http://1.bp.blogspot.com/-d751wABGYCc/ULOacKr4HaI/AAAAAAAAFzs/z0JUCRsHe1E/s1600/bloggertrix-feedburner.png&quot; /&gt;&lt;/a&gt;1,094 Subscribers 
&lt;a class=&quot;socialbox-button&quot; href=&quot;http://feeds.feedburner.com/bloggertrix&quot; target=&quot;_blank&quot; title=&quot;Subscribe to Feed&quot;&gt;Subscribe&lt;/a&gt;<br/>
&lt;/li&gt;<br/>
&lt;li&gt;&lt;a href=&quot;http://www.plus.google.com/107955298793879607964&quot; target=&quot;_blank&quot; title=&quot;Subscribe to Feed&quot;&gt;&lt;img alt=&quot;Feedburner&quot; src=&quot;http://3.bp.blogspot.com/-5mINxCqjyNQ/UQCzDgwa6nI/AAAAAAAAGeA/d1ce45hB7F8/s1600/Google-plus-icon.png&quot; /&gt;&lt;/a&gt;1,151 Followers <br/>
&lt;a class=&quot;socialbox-button&quot; href=&quot;http://www.plus.google.com/107955298793879607964&quot; target=&quot;_blank&quot; title=&quot;Subscribe to Feed&quot;&gt;Follow&lt;/a&gt;<br/>
&lt;/li&gt;<br/>
&lt;li&gt;&lt;a href=&quot;http://pinterest.com/bloggertrix/&quot; target=&quot;_blank&quot; title=&quot;Subscribe to Feed&quot;&gt;&lt;img alt=&quot;Feedburner&quot; src=&quot;http://1.bp.blogspot.com/-7vq3ELxtVCQ/UQCzDt7K9rI/AAAAAAAAGeE/H1EGkFh2i8g/s1600/Pinterest-icon.png&quot; /&gt;&lt;/a&gt;112 Pinterest <br/>
&lt;a class=&quot;socialbox-button&quot; href=&quot;http://pinterest.com/bloggertrix/&quot; target=&quot;_blank&quot; title=&quot;Subscribe to Feed&quot;&gt;Pinterest&lt;/a&gt;<br/>
&lt;/li&gt;<br/>
&lt;/ul&gt;<br/>
&lt;/div&gt;</p></code>
Внимание! Здесь используется логин bloggertrix для всех социальных сервисов — его нужно заменить на свой. Когда все сделали, сохраняете гаджет. Если вам не нужно выводить какой-то из сервисов, просто убираете его код.
Также следует заметить, что соответствующие картинки хранятся у владельца скрипта. Поэтому для того чтобы в один прекрасный день они не исчезли, можете скопировать и загрузить на свой хостинг или какой-то сервис хранения изображений.

08.02.13

Категории: Blogger.com (Blogspot).

Теги: , , , , , ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.