2014-05-10

Textual description of firstImageUrl

Виджет социальных сетей

виджет социальных сетей
Виджет подписки социальных сетей + быстрая форма подписки на обновления блога по e-mail, Как выглядит виджет вы видите на скриншоте. Также вы можете посмотреть виджет в действии на демо странице.

В настоящее время актуально продвижение бизнеса в социальных сетях, и установка удобных кнопок подписки на свои профили – первый шаг к раскрутке через социальные сети. Таким образом вы будете пассивно наращивать подписную базу, формировать вашу постоянную аудиторию.
Такой виджет вы можете вставить в сайдбар блога или после каждого сообщения блога.
Для вставки в сайдбар нужно вставить код, предложенный ниже в гаджет HTML / Javascript раздела “Дизайн” админпанели блога.
/*
<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:0 0}
.sidebar-subscribe-box-wrapper{background:url(http://img-fotki.yandex.ru/get/6102/40839264.18/0_adf6a_9d9dc31b_orig.png) repeat scroll 0 0 #C1D7E8;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://twitter.com/natalya84i"><img src="http://www.iconsearch.ru/uploads/icons/inside/48x48/icontexto-inside-twitter.png" /></a>
<a class="social-icons" href=”https://facebook.com/natalya84i”><img src="http://www.iconsearch.ru/uploads/icons/inside/48x48/icontexto-inside-facebook.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/my-crib"><img src="http://www.iconsearch.ru/uploads/icons/inside/48x48/icontexto-inside-rss.png" /></a>
<a class="social-icons" href="url_blogger"><img src="http://www.iconsearch.ru/uploads/icons/inside/48x48/icontexto-inside-blogger.png" /></a>
<p>Подписка на обновления блога по почте и через аккаунты социальных сетей</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=my-crib" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=my-crib&amp;loc=ru_RU', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Введите свой e-mail..."/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Подпишись!" /></form>
</div></div></div>
В указанном коде меняем лишь ссылки на ваши аккаунты социальных сетей. natalya84i – на ваш ник в твиттер, natalya84i – ссылка на профиль фейсбук,  my-crib – ваш ID в feedburner, my-crib меняем дважды в коде на свой ID в facebook для настройки подписки по e-mail.

Как вставить виджет социальных сетей после сообщений блога.

  1. Копируем вышеуказанный код кнопок социальных сетей,
  2. вставляем свои ссылки,
  3. далее идем в редактор HTML блога,
  4. находим код <div class='post-footer'>. Чаще всего таких кодов два в шаблоне, в этом случае ищем второй по счету и вставляем после него код виджета.
  5. Если вы не хотим, чтобы наш виджет с подпиской отображался на главной странице блога, страницах с ярлыками и на страницах архивов, то заключаем код виджета между <b:if cond='data:blog.pageType == &quot;item&quot;'> и </b:if>
Получим (кликните для увеличения):
код виджета социальных сетей
Читайте также про кнопки pluso и addthis.

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

Настя Курило комментирует...

Я никогда ранее не видела виджет социальных кнопок вместе с подпиской. А ведь очень удобно и для пользователя, и для вебмастера. Единственное, хотелось бы поменять дизайн кнопок и самого виджета в минималистический стиль. Не подскажите, как это можно реализовать?

Анонимный комментирует...

Отличный комбайн 2 в одном. Так сказать не нужно далеко ходить. И поделился и подписался. Кнопки социальных сетей очень приглянулись давно себе такие хочу, нот руки не доходят. Не хватает счетчика подписчиков и конечно счетчика поделившихся. Всегда приятно смотреть как чиферку растут.

Иванова Наталья комментирует...

Настя, конечно код легко редактируется. Вместо ссылки на фон добавляется свой, а также меняются коды изображений социальных сетей.

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности