Jak na vlastní sdílecí tlačítka

Máloco dokáže blogera potěšit víc, než když vidí, jak jeho čtenáři sdílí jeho články. Blogger.com sám nabízí možnost si pod články přidat tlačítka, která lidem umožňují sdílet pohodlně několika kliknutími přímo z blogu.

To je jistě velmi užitečná funkce, nicméně jako čtenář (i jako web designer) jsem s nimi vždy měla jeden problém: Jsou ošklivá, vizuálně neatraktivní a rychle mohou pokazit celý dojem z jinak perfektně sladěného blogu.

Proto jsem hledala nějakou alternativu, která by fungovala stejně, ale mohla bych si ji sama upravit. Nakonec jsem ji na stránce The Blog Decorator konečně našla. Trochu jsem si to upravila a nebyla bych to já, abych s vámi tuhle znalost nesdílela a nedala vám několik tipů, jak si tlačítka můžete přizpůsobit.

Příprava

První, co potřebujete udělat, je odškrtnout si zobrazení sdílecích tlačítek Bloggeru v Rozvržení. Už je nebudete potřebovat!

Poté přejděte do HTML kódu vaší šablony (a klikněte kamkoliv to textového pole), stiskněte kombinaci Ctrl+F a vyhledejte <div class='post-footer'>. Pokud jich vám Blogger náhodou vyhledá více, vyberte ten druhý. (Nikde kolem by se nemělo vyskytovat slovíčko mobile.) Kód, který najdete níže zkopírujte a vložte přímo pod vyhledaný řádek.

Hlavní kód

(Pokud chcete, aby se vaše tlačítka zobrazovaly pouze v samotném článku, zkopírujte si celý kód. Aby se zobrazovala ve všech stránkách - na hlavní stránce, v archivu apod. - vynechejte nebo smažte šedě zvýrazněné řádky.)

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

<h3 class="share-title">Sdílejte:</h3>

<!-- Sdílet na Facebooku -->

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sdílejte na Facebooku'><img alt='Facebook' border='0' src='#'/></a>

<!-- Sdílet na Twitteru -->

<a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sdílejte na Twitteru'><img alt='Twitter' border='0' src='#'/></a>

<!-- Připnout na Pinterest -->

<a class='pinterest' rel='nofollow' target='_blank' title='Připněte na Pinterest' ><img alt='Pinterest' border='0' src='#'/></a>

<!-- Sdílet na Tumblru -->

<a class='tumblr' rel='nofollow' target='_blank' title='Sdílejte na Tumblr' ><img alt='Tumblr' border='0' src='#'/></a>

<!-- Sdílet na Google+ -->

<a class='google_plus+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sdílejte na Google+'><img alt='Google Plus' border='0' src='#'/></a>

<!-- Poslat e-mailem -->

<a class='e_mail' rel='nofollow' target='_blank' title='Pošlete e-mailem' ><img alt='E-mail' border='0' src='#'/></a>

</div>

<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
</b:if> 

Vůbec se toho nelekejte. Je mi jasné, že takové množství kódu může vypadat děsivě, nicméně hned, jak jej zkopírujete do HTML editoru a části kódu se vám barevně odliší, bude to lepší. Určitě vám ale doporučuji udělat si trochu místa kolem celého kódu a můžete si "odenterovat" i samotné části kódu, ať se v něm lépe vyznáte. Třeba takto:

Pokud teď kliknete na "Uložit" a zobrazíte svůj blog, měla by se vám pod každým příspěvkem objevovat sdílecí tlačítka. Plně funkční, ale stále ošklivá...

Teď je ta chvíle, kdy se musíte rozhodnout, jak budou vaše tlačítka vypadat. Možností je nekonečně mnoho a já vám zde ukážu jen pár nejzákladnějších. (Pokud byste měli nějaký nápad a nevěděli byste, jak na to, napište mi do komentářů a já tento článek ráda doplním.)

Ikonky

Řešením, které je podle mě velmi elegantní, jsou ikonky. Celý kód je na to už připravený, takže jediné, co vám zbývá udělat, je doplnit adresu namísto znaku #. Na internetu najdete nepřeberné množství všeljakých ikonek i serverů, které jsou jich plné.

Za sebe vám mohu jedině doporučit stránku IconMonstr, která vsadila na jednoduchost a přispůsobivost. Vyberte si formát PGN a sami si vyberte barvu i velikost. (Vše je samozřejmě zdarma.)

Text

S textem už se dá kouzlit o něco víc, nicméně už je potřeba si trochu upravit kód, a to tak, že smažete celý obrázek (to je v kódu například tato část <img alt='Facebook' border='0' src='#'/>) a nahradíte ji vlastním textem.

Facebook Twitter Pinterest

.custom_images {

  text-align: "zarovnání tlačítek";

}

.custom_images a {

  text-decoration: none;

  color: "barva textu";

  background:"barva pozadí";

  padding: 10px;

}

.custom_images a:hover {

  text-decoration: none;

  background: "barva pozadí při najetí myši";

}

Facebook Twitter Pinterest

.custom_images{

  text-align: "zarovnání tlačítek";

}

.custom_images a{

  color: "barva textu";

  text-decoration: none;

  background: "barva pozadí";

  border-radius: 5px;

  padding: 10px;

}

.custom_images a:hover {

  text-decoration: none;

  background: "barva pozadí při najetí myši";

}

Facebook Twitter Pinterest

.custom_images{

  text-align: "zarovnání tlačítek";

}

.custom_images a{

  text-decoration: none;

  color: "barva textu";

  background: "barva pozadí";

  border-radius: 5px;

  box-shadow: 0px 5px 0px "barva stínu";

  padding: 10px;

}

.custom_images a:hover {

  text-decoration: none;

  background: "barva pozadí při najetí myši";

}

Facebook Twitter Pinterest

.custom_images {

  text-align: "zarovnání tlačítek";
}

.custom_images a {

  color: "barva textu";

  text-decoration: none;

  background-image: -webkit-linear-gradient(top, "horní barva", "spodní barva");

  background-image: -moz-linear-gradient(top, "horní barva", "spodní barva");

  background-image: -ms-linear-gradient(top, "horní barva", "spodní barva");

  background-image: -o-linear-gradient(top, "horní barva", "spodní barva");

  background-image: linear-gradient(to bottom,"horní barva", "spodní barva");

  padding: 10px;

  border-radius: 5px;

  box-shadow: none;

}

.custom_images  a:hover {

  text-decoration: none;

  background-image: -webkit-linear-gradient(top,"horní barva při najetí", "spodní barva při najetí");

  background-image: -moz-linear-gradient(top, "horní barva při najetí", "spodní barva při najetí");

  background-image: -ms-linear-gradient(top, "horní barva při najetí", "spodní barva při najetí");

  background-image: -o-linear-gradient(top, "horní barva při najetí", "spodní barva při najetí");

  background-image: linear-gradient(to bottom, "horní barva při najetí", "spodní barva při najetí");

}

Kód přidávejte do oddílu "Vlastní CSS" v "Přizpůsobení" vašeho blogu. Namísto "zarovnání tlačítek" doplňte buďto left (pro zarovnání doleva), right (pro zarovnání doprava) a nebo center (pro zarovnání na střed) a všechny barvy doplňujte ve formátu #xxxxxx (více o barvách na blogu v tomto článku).

Také si dejte pozor, aby vám někde nezbyly uvozovky (ty tam nemají co dělat) a abyste někde omylem nesmazali středník (bez nich to nebude fungovat).

A to je pro dnešní článek vše. Nezapomeňte, že pokud máte nějaký nápad, jak by vaše tlačítka mohla vypadat (a nevíte, jak na to), můžete mi psát do komentářů nebo na Facebook a já pak váš nápad přidám do článku. To stejné platí, pokud se rozhodnete vyzkoušet tento návod - ráda se přijdu podívat, jak jste ti s tím poradili....