Приветствую вас, дорогой и бесценный читатель! Сегодня я вас, на долго не задержу, не буду тратить ваше драгоценное время на вступительные слова, а сразу перейду к делу. У меня на испытательном блоге давно уже стоит виджет Blogger/WordPress: подписка по Email с блоком социальных кнопок (добавить вас в друзья в соцсетях) который готовился для вас, но, всё откладывал на потом, позже. И это слово - потом, да потом длилось полгода. Ну вот, наконец то, потом - сегодня наступило.
Предлагаю вашему вниманию (может кому то именно такой и нужен) симпатичный блок подписки на обновление вашего блога с кнопками социальных сетей. Виджет похож на тот, что стоит у меня на боковой панели, но красивей и оформление другое. Да вот, же он, встречайте:
Данный виджет можно установить не только на платформу Blogger, но и на WordPress.
Установка блока подписки по E-mail в Blogger
Пользователям Blogger достаточно вставить код в волшебный гаджет HTML/JavaScript, указать свои данные и всё. Так, как стили виджета и код объедены в один, а если использовать его (виджет) в вордпресс код надо разделить:
<style> a.social-icons {margin-right: 5px; height:40px;width:40px;} a.social-icons:hover {opacity: .7;filter:alpha(opacity=70); } #ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9; background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#ig-subscription-optin input.name { background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;} #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #ig-subscription-optin input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(http://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style> <br /> <div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 250px;"> <h3 id="bloggertrix1-title-text" style="color: white; font-size: 20px;"> Бесплатная подписка E-mail</h3> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shkolablogger/Kyok', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <a class="social-icons" href="https://facebook.com/YOUR FACEBOOK USER NAME"><img src="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a> <a class="social-icons" href="https://twitter.com/YOUR Twitter USER NAME"><img src="http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a> <a class="social-icons" href="https://plus.google.com/YOUR GOOGLE PLUS ID"><img src="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a> <a class="social-icons" href="http://www.feedburner.com/ YOUR FEEDBUNNER ID "><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a> <input class="email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Введите ваш Email" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="YOUR FEEDBUNNER ID " /><input name="loc" type="hidden" value="ru_RU" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Подписаться!" /></form> </div>
Здесь, в коде не забудьте ввести свои данные, а также, можете кое что изменить в коде между строк <style> и </style>. Шрифт, цвет и естественно, написать свой текст. Иконки тоже можно изменить на свои, хотя и зачем, эти как раз для этого блока подходят. Вот, дамы и господа, у меня на этом всё. Коротко и ясно. Очень надеюсь, вам было полезно. Удачи всем без исключения. Пока, пока.
P.S. Совсем забыл, вы можете выбрать и подобрать другие красивые и оригинальные виджеты подписки - здесь и тут.
Сергей, добрый день! подскажите пожалуйста где в этом коде (в этом виджете) вставлять id моего блога? я имею ввиду id feedburner что бы рассылки регистрировались нормально? и какого вида должен быть id — feedburner/x…. или сразу х… ?
Как убрать кнопки соц.сетей — я уже разобрался сам 🙂
Подписка по е-мейл — вы получили код на сервисе Google FeedBurner? 🙂
Сергей, я вам про Фому, вы мне про Ерёму)) id блога я знаю давно уже, я же спрашиваю КУДА ВСТАВЛЯТЬ свой id блога в код, а не где взять его. Да уже разобрался сам куда вставлять — там нужно в двух местах вставлять, и кстати — пробел там нужно один убрать перед знаком » в коде.
Да и кстати — этот код (который описывается в этой статье) — глючный. Он не правильно работает.
Объясню почему не правильно работает — когда вводишь свой е-майл в поле и жмёшь на кнопку «подписаться», то вылазит окно в котором нужно подтвердить подписку. Так вот, по идеи — в этом всплывающем окне уже должен быть введён е-майл, но его там нет и приходится вводить его ещё раз!
Вот скриншот, там отмечено красным где должен быть е-майл, который человек вводит в виджете — http://hkar.ru/FWuF
Я уже не помню какое должно появляться окно с подпиской, но подтверждение вроде бы должно быть. А вы попробуйте подписаться у меня и посмотрите. Потом отпишетесь. 🙂
А зачем пробовать то? я уже 200 раз пробовал с оригинальным виджетом е-майл подписки (который по умолчанию стоит), и на некоторых других виджетах е-майл подписки пробовал. Объясняю ещё раз: Когда открывается всплывающее окно — там должен быть уже введён е-майл, который человек вводит в виджете. Да Вы сами можете проверить это — введите любой е-майл (для пробы) в виджете который у вас стоит в правой части блога и увидите — что когда всплывёт новое окно, то в нём уже будет е-майл этот.
Короче, я вам про Фому, Вы про Ерёму опять 🙁
Может знаете как настроить код, что бы в сплывающем окне был уже введён е-майл? Я имею ввиду именно тот виджет, который в данной статье описывается.
Если не знаете — то пожалуйста так и отвечайте. А то ходите вокруг да около))
«Я уже не помню какое должно появляться окно с подпиской» — цитата.
Так я вам скриншот показал! ссылку не видите что ли?))
Сложно с Вами диалог вести, Сергей, ей Богу! 🙁 Вы как будто не понимаете о чём речь вообще. Куча блогов у вас тут, в которых запутаться можно… я уже и запутался в них)
Вот вы, Алексей, дотошный, всё я прекрасно понимаю и вижу. Зачем несколько раз повторять одно и тоже. И не надо злиться.
Куча блогов у вас тут, в которых запутаться можно… я уже и запутался в них) — ваша цитата. Где они? Про Blogger у меня один.
А код виджета, действительно, с двойным действием (два раза приходится указывать свой е-мейл. Заменю. 🙂
Сергей, так я не злюсь) я просто пытаюсь диалог вести с Вами и объяснить насчёт этого виджета — что он работает не очень корректно.
По поводу «кучи блогов» — их действительно куча: shkolablogger, forbloggerhelp, dlyablogger и ещё несколько тестовых блогов в которых Вы показываете примеры работы гаджетов-виджетов)) Это же все ваши блоги, и все они на одну тематику. Я реально запутался в них.
Хорошо, что поняли о чём я — «А код виджета, действительно, с двойным действием (два раза приходится указывать свой е-мейл)» — именно об этом я и пытался объяснить 🙂
Вы замените его на какой-то другой? или просто подредактируете код?
Спасибо за внимание!
Да, всё нормально Алексей. Так эти блоги почти заброшенные, висят просто так, конечно кроме демонстрационных. Добавил новые блоки подписки и да, кстати, вот посмотрите самый последний виджет. Он похож на этот. 🙂