Установить - добавить кнопки социальных сетей на сайт - блог

blogger - bogspot кнопки социальных сетей

 У нас для вас одна хорошая новость, хотя она так же делится и не на совсем хорошею. Ну в общем продолжаем избавляться от всяких сервисов которые своими кодами нагружают наши сайты - блоги.

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

Для того, чтобы добавить - установить кнопки социальных сетей на сайт - блог, вам нужно перейти в раздел Шаблон - Изменить HTML найти код  ]]></b:skin> и перед ним вставить следующий код:

/* CSS Share Button */
.tombol-berbagi-arlina{display:block;position:relative;height:35px;line-height:35px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:18%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:17%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-mK6_DlC8Xg4/VgJ6HKzdhwI/AAAAAAAAhho/O9vQOCbUF3M/s1600/191.jpg') no-repeat;width:42px;height:41px;margin-right:3px;background-position: 0px -62px; }
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -32px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -2px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -152px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;height:30px}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}


Затем копируете наш следующий код и вставляете его туда где должны появиться ваши кнопки:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>  Facebook</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'> Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://vk.com/share.php?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://vk.com/share.php?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'>  Vkontakte</a>
</div>
</div>
</b:if>
Если вы не знаете, куда устанавливать последний код, в таком случае вы можете посмотреть, как мы делали это в предыдущей теме, о кнопках соцсетей, где мы рассказывали, как установить кнопки социальных сетей от сервиса Pluso. 


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Установить - добавить кнопки социальных сетей на сайт - блог
4/ 5
Oleh