Новое в блоге
Loading...
11 июн. 2012 г.

Социальный виджет в стиле Mashable для Blogger


Привет друзья! Продолжаю тему социальных сетей. На этот раз речь пойдёт о социальном виджете в стиле Mashable для Blogger. Как видно из названия, этот виджет от знаменитого Mashable.com. Подробно расписывать о достоинствах этого виджета я не буду. Просто посмотрите его у меня (поставил ради эксперимента) и прошу подписываться, а так же давайте дружить. Можно нажимать все кнопки, я не обижусь. Выложу ещё скриншот на всякий случай, вдруг когда нибудь придётся удалить виджет, тогда хоть картинка останется. Как Вы можете видеть, присутствуют все популярные социальные сети, плюс подписка по электронной почте. Как говорится, всё в одном флаконе. Виджет можно настроить под дизайн вашего блога, а так же менять ширину и высоту. А вот и скриншот готов:

Социальный виджет в стиле Mashable для Blogger
Теперь можно установить социальный виджет в стиле Mashable в блог

Дизайн -- добавить гаджет HTML/JavaScript и в его поле вставляем два кода:
<style type="text/css">
/*<!CDATA[*/
#w2b-mashable{width:280px;margin:auto;padding:0;}
.w2b-googleplus {height: 57px;}
.w2b-facebook {background:#DDD;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #DDD;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #DDD;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-sociallinks {background-color: #DDD;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.w2b-sociallinks a {text-shadow: 1px 1px white;}
.w2b-sociallinks .w2b-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.w2b-sociallinks .w2b-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(http://4.bp.blogspot.com/-WpJR2Qq0Sqw/Tx_4RZNGNuI/AAAAAAAABb0/WbNVkzuBexQ/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.w2b-sociallinks .w2b-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.w2b-sociallinks .w2b-social li a:hover {text-decoration: underline;}
.w2b-sociallinks .w2b-social li.facebook {background-position: 0 -450px !important;}
.w2b-sociallinks .w2b-social li.rss {background-position: 0 -240px !important;}
.w2b-sociallinks .w2b-social li.twitter {background-position: 0 -150px !important;}
.w2b-sociallinks .w2b-social li.youtube {background-position: 0 -90px !important;}
.w2b-emailbox {background-color: #DDD;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style> 
И ещё один, здесь подсветки кода не будет, так как мне нужно выделить то, что Вам нужно заменить:
<div id="w2b-mashable">
<div class="w2b-googleplus">
   <script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'en'};
(function(){
   var po = document.createElement("script");
   po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(po, s);
})();
/*]]>*/
   </script>
   <div class="g-plus" data-href="https://plus.google.com/111471932706805203111" data-width="280" data-height="69" data-theme="light"></div>
</div>
<div class="w2b-facebook">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fsergej.zagulaev&amp;send=false&amp;layout=standard&amp;width=265&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:265px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="w2b-gplusone">
   <script type="text/javascript">/*<![CDATA[*/
     (function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
     })();/*]]>*/
   </script>
   <div class="g-plusone" data-size="medium" data-href="http://new-school-blogger.blogspot.com/"></div>
   <span>Recommend on Google</span>
</div>
<div class="w2b-twitter">
   <a href="https://twitter.com/zagulyaevsv" class="twitter-follow-button" data-show-count="true">Follow @zagulyaevsv</a>
   <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="w2b-sociallinks">
   <ul class="w2b-social">
<li class="facebook"><a href="http://www.facebook.com/zagulyaevsv">Facebook</a></li>
<li class="rss"><a href="http://feeds.feedburner.com/blogspot/jizET">RSS</a></li>
<li class="twitter"><a href="https://twitter.com/#!/zagulyaevsv">Twitter</a></li>
<li class="youtube"><a href="http://www.youtube.com/user/TheSerzh11">Youtube</a></li>
   </ul>
</div>
<div class="w2b-emailbox">
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jizet', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
   <tr>
<td>
   <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
   <input class="submitu w2bDefault" type="submit" value="Subscribe"/>
</td>
   </tr>
</table>
<input name="uri" type="hidden" value="blogspot/jizET"/>
<input name="loc" type="hidden" value="en_US"/>
   </form>
</div></div>


Теперь Вам нужно очень постараться, заменить выделенное на свои данные:
111471932706805203111--Ваша страница Google+ идентификатор;
sergej.zagulaev--страница на facebook;
http://new-school-blogger.blogspot.com/--URL-адрес вашего блога;
zagulyaevsv--Twitter;
Дальше замените URL-адрес FacebookRSSTwitterYoutube;
blogspot/jizET--feedburner идентификатор.
В первом коде мой цвет #DDD фона, замените на свой. Цвет можно подобрать здесь.У меня ширина виджета 280px, Вы можете поменять (рекомендовано 300px).
Вот вроде всё. Если чего забыл, пишите в комментариях, дополню. Желаю удачи. До встречи.

Виджет стырил за бугром у Хариша: way2blogging.org

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

3 коммент. :

  1. админ блога не заслуживает уважения, ему даже ответить на элементарные вопросы сложно... самый дерьмовый блог. честно.....

    ОтветитьУдалить
  2. Здравствуйте. Стал довольно часто почитывать ваш блог. Появился вопрос по этому виджету.
    Что такое blogspot/jizET--feedburner идентификатор, и на что его менять?
    Адрес рсс подписки: http://feeds.feedburner.com/JamStudioPro, какую часть оттуда надо взять?

    ОтветитьУдалить
    Ответы
    1. Привет,Максим!У вас есть в блоге подписка по почте?Подписка по rss отличается от подписки по почте.Зайдите в feedburner,выберете блог (если у вас их несколько)вверху нажмите на Publicize потом сбоку на Email Subscriptions и откроется код формы подписки. Посмотрите что стоит после http://feedburner.google.com/fb/a/mailverify?uri= вот после знака равно и есть то, что вам нужно. 8-)

      Удалить

 
Footer