вторник, мая 27

Красивый виджет подписки FeedBurner с кнопками социальных сетей для блогспот

Красивый и стильный виджет подписки на новые статьи от FeedBurner с кнопками читать и присоединиться в социальных сетях для блогов на платформе Блогспот (blogspot, blogger)

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

 Стильные и красивые виджеты для блогспот в последнее время получили очень большое распространение. Всё из-за того, что платформа (хостинг) blogspot бесплатная, принадлежит компании Гугл и постоянно развивается, как в плане движка, так и в плане оптимизации.

 Так вот, долго искал красивый и стильный виджет для блогспот. И в итоге путем проб и ошибок нашёл! Как он выглядит можно посмотреть в правом верхнем углу блога или на картинке снизу:

Если Вы хотите себе такой же виджет, то необходимо сделать следующее:

1. Копируем скрипт/код:<-->

<style>
#topbox{width:265px;border:1px solid #a1a1a1;background-color:#ffffff;padding-bottom:15px;padding-top:5px;}
#news-letter{clear:both;padding-top:10px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://lh4.googleusercontent.com/-u3si_YxFoT0/TnmfA71Ti3I/AAAAAAAABko/arZLNvC3FYs/s800/mail-box.png) no-repeat;}
.news-headline{position: relative;z-index: 999;font-size: 18px;padding-bottom:10px;font-weight:bold;}
</style><br />
<div id="topbox">
<center>
<div class="news-headline" color:="color:">
Получай новости первым
</div></center>
<center>
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="
https://twitter.com/Danik1981" target="_blank" title="Twitter">
<img src="http://1.bp.blogspot.com/-Q4L6phRaHaA/UOKc13ilEwI/AAAAAAAAGLM/qZrVGXriT2s/s1600/bloggertrix.com-twitter-icon.png" style="height: 30px; width: 30px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="
http://feeds.feedburner.com/Workazru" target="_blank" title=" RSS">
<img src="http://2.bp.blogspot.com/-Y0dHt53dw40/UOKc1B3zfJI/AAAAAAAAGLE/QZzG4hMqUNU/s1600/bloggertrix.com-rss-icon.png" style="height: 30px; width: 30px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="
http://www.facebook.com/daniil.malkovich" target="_blank" title="Facebook">
<img src="http://4.bp.blogspot.com/-xELUzYYkYY0/UOKcz34EO2I/AAAAAAAAGK0/AZz0lNN6Sos/s1600/bloggertrix.com-facebook-icon.png" style="height: 30px; width: 30px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="
https://plus.google.com/u/0/101835203435652131167/posts" target="_blank" title="Google+">
<img src="http://3.bp.blogspot.com/-bWbBG7yV2dQ/UOKc0ohrt1I/AAAAAAAAGK8/6m2c4idvyBc/s1600/bloggertrix.com-google-icon.png" style="height: 30px; width: 30px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="
https://www.youtube.com/channel/UCkpeWSHLeSFENkLnwHoreRg" target="_blank" title="Technorati">
<img src="http://1.bp.blogspot.com/-eZFb46_b9RQ/UOKc2hK48BI/AAAAAAAAGLU/pwTmG2--j4o/s1600/bloggertrix.com-youtube-icon.png" style="height: 30px; width: 30px;" /></a>
</td></tr>
</tbody></table>
</center>
<div id="news-letter">
<span class="msg-box"></span>
<b>
Новые посты на почту</b>
<br />
<form action="
http://feedburner.google.com/fb/a/mailverify?uri=Workazru&amp;loc=en_US" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/lYYAT&amp;loc=en_US', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="
Введите ваш email" />
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="
Подписка" />
</form>
</div>
</div>
<div class="clear">
</div>
<br />
<div class="clear">
</div>

2. Вставляем его у себя на блоге на платформе блогспот в любом месте, как указано на рисунке:

Добавить виджет в блог Блогспот

3. Меняем некоторые переменные в коде на свои:

- в твиттере https://twitter.com/Danik1981 на свой адрес. Он находится на Вашей странице. Просто скопируйте строку с адресом вверху.

- в FeedBurner http://feeds.feedburner.com/Workazru на свой фид. Про этот сервиса я рассказывал в статье регистрация в FeedBurner.

- в FaceBook http://www.facebook.com/daniil.malkovich на свой адрес личной странички.

- в Google + https://plus.google.com/u/0/101835203435652131167/posts на свой адрес главной страницы (ленты). Тоже копируем в адресной строке.

- в YouTube https://www.youtube.com/channel/UCkpeWSHLeSFENkLnwHoreRg на свой канал. В настройках посмотреть надо. Если у Вас еще нет своего канала, то просто общий свой канал заносите сюда.

- и последнее, необходимо добавить ссылку с Фид Бюрнер (FeedBurner) http://feedburner.google.com/fb/a/mailverify?uri=Workazru&amp;loc=en_US, там, где находится подписка по электронной почте. В общем как показано на рисунке.

Подписка фида в FeedBurner

 Вот собственно и все! Приятно пользоваться, а главное ничего сложного в установке виджета для блогспот!

 Если статья Вам пригодилась, подписывайтесь на обновления блога и будьте в курсе всех новых статей.


2 комментария:

  1. Что-то не получается, два раза проверила(

    ОтветитьУдалить
  2. Странно! Я все это сначала сделал на своем блоге, и не одном, а только потом выложил здесь! Может что то не так сделали?

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

AddThis