Սոցիալական ցանցի կոճակներ Blogger-ի համար

Շարունակելով Blogger-ի դասընթացները, այսօր կխոսեմ սոցիալական ցանցի կոճակները՝ Blogger-ում տեղադրելու մասին: Նախորդ նյութերում արդեն մի քանի անգամ խոսել եմ այս մասին, սակայն այսօր կներկայացնեմ հենց MrBlogger-ում տեղադրված կոճակները:

Նախ նշեմ, որ կոճակները պատրաստվել են Addthis ծառայության հիման վրա, սակայն ենթարկվել որոշակի փոփոխությունների:

Կոճակները շատ հեշտ են տեղադրվում պետք է կատարել ընդամենը մի քանի քայլ.

Մինչ քայլերը սկսելը նախ պահպանենք մեր բլոգի կրկնօրինակը, հետագայում սխալներից խուսափելու համար: Այդ մասին կարող եք կարդալ այստեղ:

Բացում ենք մեր բլոգի կառվարման էջը՝ --> Изменить HTML-->"Расширить шаблоны виджета": Հետո որոնում ենք ներքևում նշված կոդը (Ctrl+F):

<div class='post-body entry-content'>   
<data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='sharebuttons'>

Հավանեցի՞ք: Տեղեկացրեք ընկերներին:

<div align='center'>

<!--Blogger-->

<a class='shareme' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><img src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOAEobABI/AAAAAAAAAsw/yJ6dutztXE0/blogger.png' style='border: 0pt none;' alt='в Blogger' title='Опубликовать в блоге' /></a>

<!--Twitter-->

<a class='shareme' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOJdXH6XI/AAAAAAAAAtE/EUy4mKyVa5A/twitter.png' style='border: 0pt none;' alt='в Twitter' title='Написать в Twitter' /></a>

<!--Живая лента Google-->

<a class='shareme' expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homePageUrl + &quot;&amp;srcTitle=&quot; + data:title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=390,width=710\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh5.ggpht.com/_G92voTj-yF0/TLLOAQINkhI/AAAAAAAAAs4/8P7351Fd6VU/google.png' style='border: 0pt none;' alt='в Живую ленту' title='Написать в Живую Ленту' /></a>

<!--Вконтакте-->

<a class='shareme' expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=500,width=710\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh4.ggpht.com/_G92voTj-yF0/TLLOJlEHUjI/AAAAAAAAAtI/RcZxvCl0H-I/vkontakte.png' style='border: 0pt none;' alt='в Вконтакте' title='Опубликовать в ВКонтакте' /></a>

<!--Живой журнал-->

<a class='shareme' expr:href='&quot;http://www.livejournal.com/update.bml?subject=Ссылка: &quot; + data:post.title + &quot;&amp;event=&quot; + data:post.title + &quot;: &quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOATbe0kI/AAAAAAAAAs8/l5eJU9ablaI/livejournal.png' style='border: 0pt none;' alt='в Живой Журнал' title='Опубликовать в ЖЖ' /></a>

<!--Мой мир-->

<a class='shareme' expr:href='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url ' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=310,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOJaVDgXI/AAAAAAAAAtA/Y5T0udcpaIg/mailru.png' style='border: 0pt none;' alt='в Мой мир' title='Опубликовать в Моем Мире' /></a>

<!--Я.ру-->

<a class='shareme' expr:href='&quot;http://my.ya.ru/posts_add_link.xml?title=&quot; + data:post.title + &quot;&amp;URL=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=500,width=900\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh5.ggpht.com/_G92voTj-yF0/TLLOJt5sA7I/AAAAAAAAAtM/ZyG0Z_4zO2g/yandex.png' style='border: 0pt none;' alt='в Я.ру' title='Опубликовать в Я.ру' /></a>

<!--Facebook-->

<a class='shareme' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url ' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOAdHTWII/AAAAAAAAAs0/KNND56PuU7A/facebook.png' style='border: 0pt none;' alt='в Facebook' title='Опубликовать в Facebook' /></a>

<!--Одноклассники-->

<a class='odkl-klass' expr:href='data:post.url' onclick='ODKL.Share(this);return false;'/>

<style type='text/css'>

.odkl-klass:hover {opacity:1.0;}

.odkl-klass {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsHaBZDHK_hsvtqcxdgnN1Fe7wmXpQuMyY4V7s6n3xdIvdPGBmYZNeRPvMy1qfBiMXfMSuWBb2A9Usmhky92RHCodktiM9v1uHNBpZ5kw61NnJcTYFaA88ySIocqhZv94SIgB0NIS3Xk/) no-repeat; height:40px;

width:40px; vertical-align:top; opacity:0.5; } 

</style>

<!--AddThis-->

<a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><img alt='в закладки' src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOAIhLM6I/AAAAAAAAAss/MHg_jrwXQ18/addthis.png' /></a>

<script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>

<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=amateurbloger' type='text/javascript'/>

</div>

</div>

</b:if>

Ահա և վերջ: Սակայն տեղադրված կոճակները դեռևս այդքան էլ գեղեցիկ չեն երևում, նրանց մի փոքր շունչ տալու համար, փորձենք կենդանացնել այս կոդի միջոցով.

.sharebuttons a img{

border: none;

opacity:0.5;

}

.sharebuttons a:hover img{

border: none;

opacity:1.0;

}

.sharebuttons img {

padding:0;

margin:0;

}

Վերևում գրված կոդը տեղադրում եք ]]></b:skin> կոդի վերևում: