HTML podpis e-mailu s grafickým obrázkem v Mozilla Thunderbird

Napsal(a) Napsáno čtvrtek, 29 srpen 2013 Zveřejněno v Rady a návody Přečteno 46409 krát
Ohodnotit tuto položku
(10 hlasů)

Vrtá vám hlavou, jak mít ve svém e-mailovém podpise pěkný text, který má styl a třeba i obrázek? Ať už chete mít v podpisu firemní logo nebo jen chcete mít svůj automaticky vkládaný podpis pěkný, návod najdete zde. Sice je mířený především pro emailového klienta Mozilla Thunderbird, ale velmi podobný postup bude i např. v Microsoft Outlook i jiných programech tohoto typu.



V kostce

Napíšeme krátký HTML kód s naším podpisem, kterému pomocí atributu style dáme pěkný design. Tento kód pak vložíme do nastavení schránky v Thunderbirdu. Druhá možnost je, že celý podpis bude jeden větší obrázek a o styly se nemusíme starat - pouze napíšeme kód pro vložení obrázku, což ale není úplně ideální řešení. Výsledek u obou postupů může být u HTML mailů stejný - např. následující podpis.

 1-podpis-hotovy

Jak na HTML podpis

Chceme podpis, který může obsahovat libovolný počet řádků a také může obsahovat obrázek. Nejjednodušší je vložit podpis přímo do příslušného okénka v ThunderBirdu, kód je tam ale špatně čitelný, protože okénko je malé. Otevřete si proto tedy např. Poznámkový blok a tam zkopírujte, kde kód budete psát, a ten pak vždy zkopírujte do onoho malého okénka v Thunderbirdu.  U každého kódu si pochopitelně můžete texty přepsat dle libosti. 

Až budete chtít podpis vyzkoušet, aby se vám v Thunderbirdu zobrazil a posílali jste ho, postup je následující:

1) kliknete pravým tlačítkem na e-mailovou schránku, u které chcete podpis nastavit, a vyberete "Nastavení"

nastaveni-1

2) zaškrtnete "Použít HTML" a zkopírujete nebo vepíšete nějaký kód z tohoto článku do prostoru pod tímto zatržítkem.

nastaveni-2

Základní HTML

<p>
S přáním pěkného dne,<br />
Tomáš Janeček -webkodér |
Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript. | 774 249 724<br />
www.webzpravodaj.cz
</p>
 

Značka (tag) <p></p> znamená odstavec. Všechen text, který odstavec obsahuje, musí být uzavřený mezi značkami <p> a </p>. Veškerý text našeho podpisu je tedy jeden odstavec. Značka <br />zalomí řádek, veškerý text za ní se tedy objeví na dalším řádku. Svislý oddělovač ("|") napíšeme pomocí klávesové zkratky pravý Alt + W., nicméně není vůbec nutné jej používat. V e-mailu se tento podpis zobrazí nějak takto: 

2-podpis-zaklad 

Kurzíva, tučné písmo a odkazy

Na první pohled poněkud suchý. Proto přidáme některé další značky - text mezi značkami <em></em> bude v kurzívě a text mezi značkami <strong></strong> bude tučný. Navíc uděláme naši e-mailovou adresu klikatelnou s tím, že po kliknutí se nám otevřene emailový klient s vyplněným adresátem. To uděláme pomocí značky <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript."></a> - Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript. musíte pochopitelně přepsat na emailovou adresu, kterou chcete mít v podpisu. Pokud bychom chtěli mít klikatelný i odkaz na náš web, museli bychom přidat značku <a href="http://adresawebu.cz>text odkazu</a> - kde opět musíte přepsat adresu webu i text odkazu. Kód vypadá tedy nějak takto:

 <p>
<em>S přáním pěkného dne,</em><br />
<strong>Tomáš Janeček - webkodér</strong> <strong>|</strong> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a>
<strong>|</strong> <em>774 249 724</em> <strong>|</strong><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

A v praxi vypadá takový podpis následovně:

 3-podpis-vylepseny

Barevný HTML podpis

To už je malinko lepší, využíváme kurzívu, tučné písmo i odkazy. Nyní můžeme přidat barvy. Barvy už jsou ryze záležitostí stylu, nastavíme je tedy pomocí CSS stylů. Jak? 

Mějme obyčejný odstavec <p>Text v odstavci</p>. Protože Thunderbird má výchozí písmo šedé, můžeme chtít podpis výraznější - černý. Do první značky odstavce přidáme atribut " style="" " následovně: <p style="">. Do vytvořených úvozovek již můžeme psát své styly. Pro černý odstavec vyplníme buď "color: black;" nebo "color: #000000;", nabízí se i RGB formát, "color: rgb(0,0,0);". Volba je na vás, já osobně preferuji hexadecimální formát #000000 (zkráceně #000). Odstavec s černou barvou textu bude vypadat tedy takto: <p style="color: #000000;">Text odkazu</p>.

Odkazy uvnitř zůstanou modré. Pokud bychom chtěli změnit i jejich barvu, udělali bychom to stejně jako u odstavce. Pro tmavě šedou barvu by to vypadalo nějak takto:

 <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript." style="color:#333333;">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> 

Velká většina lidí má ale modrou zafixovanou jako barvu odkazu a tak bych doporučil neměnit.

Kód pro podpis s černým písmem je stejný jako u předchozí příkladu, pouze jsme přidali "style="color:#000000" na první řádek.

<p style="color:#000000;">
<em>S přáním pěkného dne,</em><br />
<strong>Tomáš Janeček - webkodér</strong> <strong>|</strong> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">
Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <strong>|</strong> <em>774 249 724</em> <strong>|</strong><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

A jak vypadá? Lépe.

4-podpis-cerny

Neslaný, nemastný?

A i přesto, že podpis výše je už docela pěkný, ještě by bylo pěkné mu dodat trochu šťávy - nějakou výraznou barvu. Například svítivě zelenou na jedno jediné slovo. Proč ne třeba slovo "webkodér". Jelikož ale není samo v nějaké značce, které bychom dali styl, musíme si onu značku sami přidat - to takovou, která nic nezmění - <span></span>. Spanu pak dáme styl barvy. Svítivě zelená je #99cc33 , velmi podobná (ještě světlejší, na bílé ale špatně čitelná) je barva "lime". Značky "span" musíme dát okolo slova, které budeme obarvovat, stejně jako odstavec někde začíná a končí, i span někde začíná a končí (je párová). Odkaz na WebZpravodaj v plánu původně nebyl, pouze jsem na něm chtěl ukázat možnost odkazů na web, proto jsem v tomto kroku už odstranil.

Kód vypadá přesně takto, jediná změna je opět pouze span a jeho styl:

<p style="color:#000000;">
<em>S přáním pěkného dne,</em><br />
<strong>Tomáš Janeček - <span style="color:#99cc33;">webkodér</span></strong> <strong>|</strong> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">
Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <strong>|</strong> <em>774 249 724</em> <strong>|</strong><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

4-podpis-skoro-hotov

Obrázek do HTML podpisu

Ať už si vytvoříme nějaký podpis ve PhotoShopu jako jsem to udělal já, nebo chceme použít firemní logo, důležité je, kam jeho soubor uložíte - protože je třeba k němu znát cestu a po dobu využívání podpisu ho nesmíte smazat. Nejlepší je v tomto případě přímo složka Mozilly Thunderbird - nasměrujte se na Tento Počítač => Místní disk (obvykle C:) => Program Files (x86 v 64bitovém Windows) => Mozilla Thunderbird. Když do této složku uložíte svůj obrázek html podpisu, je v bezpečí a nehrozí, že byste jej nechtěně smazali.

Pak už jen stačí přidat krátký kousek kódu do podpisu. Obrázek má značku <img />, je nutné ji ale využívat spolu s atributemsrc="/" ", který udává zdroj obrázku. Pokud jste uložili obrázek do cesty výše zmíněné, tedy C:\Program Files (x86)\Mozilla Thunderbird , stačí přidat tento kód nad odstavec vašeho podpisu. Nemusíte se bát, obrázek se v podstatě odešle jako příloha, jen se jako příloha u HTML mailu nezobrazí, takže bude vidět na všech počítačích.

<img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />

Zbytek zůstává stejný. Celkově tedy

<img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />
<p style="color:#000000;">
<em>S přáním pěkného dne,</em><br />
<strong>Tomáš Janeček - <span style="color:#99cc33;">webkodér</strong> <strong>|</strong> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <strong>|</strong> <em>774 249 724</em> <strong>|</strong><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

6-podpis-obrazek-nad 

Jak sami vidíte, obrázek je nyní nad podpisem. To může být žádoucí a s podpisem již můžete být spokojeni. Pokud byste jej chtěli dát pod text, stačí celý řádek se značkou <img /> přesunout až na konec kódu za </p>.

Obrázek vedle podpisu 

Pokud ale chcete obrázek vedle svého podpisu (většinou vlevo), je možné obrázku dát styl obtékání podobně jako ve Wordu a výsledku tak dosáhnete. Obtékání nastavíme pomocí stylu "float:left;" u obrázku.

<img style="float:left;" src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />
<p style="color:#000000;">
<em>S přáním pěkného dne,</em><br />
<strong>Tomáš Janeček - <span style="color:#99cc33;">webkodér</strong> <strong>|</strong> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <strong>|</strong> <em>774 249 724</em> <strong>|</strong><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

Obrázek pak bude jednoduše vlevo a text ho bude obtékat.

7-podpis-obrazek-vedle

V tomto případě je odstavec vůči obrázku na nepěkné pozici, proto náš odstavec s podpisem posuneme trochu doprava a dolů. Abychom tohoto efektu dosáhli, obrázku nastavíme odsazení vpravo (margin-right) a odstavci s podpisem odsazení ze shora (padding-top). Za styl margin-right i padding-top vždy dosazujeme číslo v pixelech, např. margin-right: 10px u obrázku znamená, že vpravo od obrázku bude vždy desetipixelová mezera. To samé padding-top: 10px u odstavce, nad odstavcem udělá mezeru 10px. Celý kód pak je následující

<img style="float:left; margin-right: 10px;" src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />
<p style="color:#000000; padding-top: 10px;">
<em>S přáním pěkného dne,</em><br />
<strong>Tomáš Janeček - <span style="color:#99cc33;">webkodér</strong> <strong>|</strong> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <strong>|</strong> <em>774 249 724</em> <strong>|</strong><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

A náš podpis krásný :)

8-podpis-hotovy

 

Testování - správné zobrazení i s vyplým HTML

Když jsme už nějaký podpis vytvořili, není úplně zcestné ho také vyzkoušet. Proto jsem poslal svůj mail z Thunderbirdu na Centrum a Seznam, abych viděl, jak se můj podpis zobrazí třeba tam. A výsledek nepřekvapil.

centrum1

Se zaplým HTML (které v 95% ne-li více zaplé je) se zobrazí takto - téměř identicky. Jediný rozdíl je ve velikosti písma a pozice odstavce, kterou si emailový klient nastavuje sám. I tomu bychom mohli zabránit nastavením stylů, které jsou rozdílné - font-size, line-height apod. To je ale zbytečné, protože i tento podpis je velmi pěkný.

Pokud HTML vypneme, podpis se zobrazí hůře.

centrum2

Můžeme si všimnout, že kde byly tagy <strong> a <em>, jsou nyní hvězdičky namísto strongu a lomítka namísto kurzívy em. I tomu můžeme zabránit - stačí tučné ztučnit pomocí span s určitým stylem (font-weight: bold; font-style: italic;) místo použití elementů <strong> a <em>. Vyzkoušíme a získáme finální kód.

Finální kód

Jak jsme si řekli - nahradíme značky strong a em.

<strong></strong> za <span style="font-weight: bold;"></span> 

<em></em> za <span style="font-style: italic;"></span>

Výsledný kód je pak takovýto:

<img style="float:left; margin-right: 10px;" src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />
<p style="color:#000000; padding-top: 10px;">
<span style="font-style italic;">S přáním pěkného dne,</span><br />
<span style="font-weight:bold;">Tomáš Janeček - <span style="color:#99cc33;">webkodér</span> <span style="font-weight:bold;">|</span> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <span style="font-weight:bold;">|</span> <span style="font-style:italic;">774 249 724</span> <span style="font-weight:bold;">|</span><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

Tento podpis se zobrazí v HTML verzi úplně stejně jako předchozí, tedy takto:

centrum1

Ale i s vyplým HTML se zobrazí správně. Hurá :)

centrum3

 

Závěr

Kvůli využití kódu se může zdát HTML podpis složitý, nicméně není. Jde jen o pár značek/tagů, které je třeba si zapamatovat. Jmenovitě <p></p> pro odstavec, <br /> pro zalomení řádku, <img /> pro obrázek, <a></a> pro odkaz a konečně <span></span> pro naše styly určitých částí (nejen) textu.

Také na internetu existuje řada generátorů, které by starost s kódem měly převzít za vás, nicméně "udělej si sám" je v tomto případě snad i lepší. Pokud nesouhlasíte, jistě nějaký sami najdete.

Ještě jsem nezmínil, že text je možné rozmístit (pozicovat) také pomocí tabulky, to bych doporučil ale pouze při více sloupcích - např. jeden sloupec s kontakty na firmu a druhý s kontakty na autora mailu. U tabulky je pak třeba pomocí stylů odstranit rámečky.

 

 

Přidáno 21.10.2013

Zašedlý podpis v Mozilla Thunderbird

Jak se pan Zdeněk Šták zmínil v komentáři, s poslední aktualizací Mozilly Thunderbird došlo k zašednutí všech HTML podpisů. Problém je způsoben tím, že Mozilla jako společnost se snaží sjednotit jisté systémy v Thunderbirdu a Firefoxu a proto na podpis jakožto méně důležitou část emailu aplikovala průhlednost. 

Řešení spočívá v přidání dalšího kódu do podpisu, který odstraní styly pro průhlednost podpisu pro všechny vaše emaily. Tento kód pak stačí vložit za poslední značku ve vašem podpisu:

<style>
<!--
.moz-txt-sig, .moz-signature { opacity: inherit !important; }
-->
</style>

 Pokud tento kód přidám do podpisu v příkladu výše, kód bude následující:

<img style="float:left; margin-right: 10px;" src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />
<p style="color:#000000; padding-top: 10px;">
<span style="font-style italic;">S přáním pěkného dne,</span><br />
<span style="font-weight:bold;">Tomáš Janeček - <span style="color:#99cc33;">webkodér</span> <span style="font-weight:bold;">|</span> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <span style="font-weight:bold;">|</span> <span style="font-style:italic;">774 249 724</span> <span style="font-weight:bold;">|</span><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

<style>
<!--
.moz-txt-sig, .moz-signature { opacity: inherit !important; }
-->
</style>

Aplikace je tedy skutečně jednoduchá, kód se značkou <style></style> pouze přidáte do kódu vašeho podpisu na úplný konec. 

 

 

Přidáno 7.11.2013

Přidání ikon s odkazy na sociální sítě do HTML podpisu

Pro váš zájem opět rozšiřuji článek o ukázku, jak do podpisu přidat ikonky sociálních sítí s odkazy na vaše profily, kanály nebo kamkoliv jinam. Budeme pokračovat v posledním nejvymakanějším podpisu. Jak si tedy představujeme náš výsledek? Třeba nějak takto...

odkazy1

Abychom tohoto cíle dosáhli, stačí nám pár jednoduchých kroků. Vememe tedy náš HTML kód z předchozích kroků, který je následující:

<img style="float:left; margin-right: 10px;" src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />
<p style="color:#000000; padding-top: 10px;">
<span style="font-style italic;">S přáním pěkného dne,</span><br />
<span style="font-weight:bold;">Tomáš Janeček - <span style="color:#99cc33;">webkodér</span> <span style="font-weight:bold;">|</span> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <span style="font-weight:bold;">|</span> <span style="font-style:italic;">774 249 724</span> <span style="font-weight:bold;">|</span><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

<style>
<!--
.moz-txt-sig, .moz-signature { opacity: inherit !important; }
-->
</style>

V principu přidáme jeden oddíl ( <div></div> ), což si můžete představit jako neviditelný obdélník, do kterého můžeme vkládat jednotlivé ikony (nejenom). Do tohoto obdélníků umístíme jednotlivé odkazy na naše profily sociálních sítí (<a></a> a  místo toho, abychom mezi značky <a></a> napsali text odkazu, vložíme tam obrázek <img />. To je celé. Pouze tomu všemu musíme přidat některé další CSS styly, kterých ale nebude mnoho. Ukažme si rovnou výsledný kód.

<img style="float:left; margin-right: 10px;" src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />
<p style="color:#000000; padding-top: 10px; margin: 0px;">
<span style="font-style italic;">S přáním pěkného dne,</span><br />
<span style="font-weight:bold;">Tomáš Janeček - <span style="color:#99cc33;">webkodér</span> <span style="font-weight:bold;">|</span> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <span style="font-weight:bold;">|</span> <span style="font-style:italic;">774 249 724</span> <span style="font-weight:bold;">|</span><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

<div style="padding-top: 10px;" >
  <!-- Facebooková ikona -->
  <a style="margin-right: 5px;" href="http://facebook.com" title="Můj Můj FaceBook profil"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/fb.png" width="32" height="32" /></a>  
  <!-- Google+ ikona -->
  <a style="margin-right: 5px;" href="http://plus.google.com" title="Můj profil Google+"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/g+.png" width="32" height="32" /></a>  
  <!-- YouTube ikona -->
  <a style="margin-right: 5px;" href="http://youtube.com" title="Můj YouTube kanál"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/yt.png" width="32" height="34" /></a>  
</div>

<style>
<!--
.moz-txt-sig, .moz-signature { opacity: inherit !important; }
-->
</style>

První věc, kterou jsme udělali, bylo přidání do druhého řádku s <p></p> do atributu style="" ještě jeden styl, který je "margin: 0px;" - bez těchto úvozovek, zkrátka přesně tak, jak to vidíte. Tato změna je třeba proto, aby byl podpis zobrazen stejně jak ve webových prohlížečích, tak v emailových klientech jako je třeba právě Mozzila Thunderbird. Jedná se pouze o přípravnou činnost, která je zde nutná.

Druhá věc je přidání vlastních ikon. Nejprve přidáme obalový obdélník, takzvaný div (z anglického division, tedy oddíl). To je následující část kódu

<div style="padding-top: 10px;" > 
 
</div>

Pokud byste se divili, proč je přidaný atribut style="padding-top: 10px;", je to proto, aby byly jednotlivé obrázky sociálních sítí odsazeny o 10 pixelů od odstavce nad ním.

Pak mezi začátení <div ...> a koncovou značku </div> vložíme jednotlivé odkazy (<a></a>). Style="margin-right: 5px;" je nutnost. Slouží k vytvoření mezery široké 5 obrazových bodů mezi jednotlivými ikonami. Pak tu máme ale další 2 atributy, a sice href="/adresa-vašeho-profilu-či-jiného-místa-kam-chcete-ikonou-odkazovat" a title="váš-titulek-ikony-který-se-zobrazí-pokud-na-ni-najedete-myší". Oba tyto atributy si můžete upravit, odkaz si upravit dokonce musíte, protože jistě nechcete odkazovat na titulní stranu facebooku - proč také. Takže do atributu href="/" vložíte mezi úvozovky přesnou adresu např. vašeho facebookového profilu a do atributu title libovolný text, který se bude zobrazovat lidem, kteří na tuto ikonu najedou kurzorem myši. Mezeru mezi <a> a </a> necháme zatím prázdnou, tak přijde až obrázek - samotná ikona.

<div style="padding-top: 10px;" >   
  <a style="margin-right: 5px;" href="http://facebook.com" title="Můj Můj FaceBook profil"></a>   
  <a style="margin-right: 5px;" href="http://plus.google.com" title="Můj profil Google+"></a>   
  <a style="margin-right: 5px;" href="http://youtube.com" title="Můj YouTube kanál"></a>
</div>

Nyní tedy už jen přidáme obrázky, které budou právě ony hezké ikony. Sám jsem nějaké našel na Google obrázcích, upravil je na ideální velikost (32x32 pixelů, standard) a uložil. Klidně si je můžete z následujích 3 obrázků uložit a použít je, nebo si vytvořte vlastní.

fb

g

yt

 

Kód s již přidanými obrázky je následující:

<div style="padding-top: 10px;" >   
  <a style="margin-right: 5px;" href="http://facebook.com" title="Můj Můj FaceBook profil"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/fb.png" width="32" height="32" /></a>   
  <a style="margin-right: 5px;" href="http://plus.google.com" title="Můj profil Google+"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/g+.png" width="32" height="32" /></a>   
  <a style="margin-right: 5px;" href="http://youtube.com" title="Můj YouTube kanál"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/yt.png" width="32" height="34" /></a>
</div>

Já si obrázky uložil do kořenového adresáře Mozilly Thunderbird, která je v C:/Program Files (x86)/Mozilla Thunderbird/. Pokud máte Windows pouze 32bitový, pak v adrese nebude závorka (x86). Cestu ale můžete upravit ku svým potřebám, pokud se ale soubor načítá z vašeho počítače, vždy musí začínat předponou file:///, za níž následuje absolutní cesta. Může to být i adresa na obrázek, který máte uložený např. na vašich webových stránkách - to je na vás. Každopádně je atribut src nesmírně nutné vyplnit a pokud se vám obrázek nebude zobrazovat, hledejte chybu v cestě u tohoto atributu.

Pak je také dobrým zvykem vyplňovat rozměry obrázku. K tomu slouží atributy width (šířka) a height (výška). V našem případě mají obrázky 32 pixelů na šířku i na výšku, YouTube ikona pak na výšku o 2 pixely více kvůli stínu.

Tím jsme ale u konce a náš podpis je zase o něco dokonalejší. Ještě jednou tedy výsledný kód a výsledek...

<img style="float:left; margin-right: 10px;" src="file:///C:/Program Files (x86)/Mozilla Thunderbird/obrazek-do-podpisu.png" />
<p style="color:#000000; padding-top: 10px; margin: 0px;">
<span style="font-style italic;">S přáním pěkného dne,</span><br />
<span style="font-weight:bold;">Tomáš Janeček - <span style="color:#99cc33;">webkodér</span> <span style="font-weight:bold;">|</span> <a href="mailto:Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</a> <span style="font-weight:bold;">|</span> <span style="font-style:italic;">774 249 724</span> <span style="font-weight:bold;">|</span><br />
<a href="http://www.webzpravodaj.cz">www.webzpravodaj.cz</a>
</p>

<div style="padding-top: 10px;" >
  <!-- Facebooková ikona -->
  <a style="margin-right: 5px;" href="http://facebook.com" title="Můj Můj FaceBook profil"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/fb.png" width="32" height="32" /></a>  
  <!-- Google+ ikona -->
  <a style="margin-right: 5px;" href="http://plus.google.com" title="Můj profil Google+"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/g+.png" width="32" height="32" /></a>  
  <!-- YouTube ikona -->
  <a style="margin-right: 5px;" href="http://youtube.com" title="Můj YouTube kanál"><img src="file:///C:/Program Files (x86)/Mozilla Thunderbird/yt.png" width="32" height="34" /></a>  
</div>

<style>
<!--
.moz-txt-sig, .moz-signature { opacity: inherit !important; }
-->
</style>

 Snad se vám váš nový podpis líbí :)

odkazy1

Ještě bych rád dodal - pokud chcete, aby byly ikony úplně pod vaším podpisem, a to zcela, i pod plovoucím obrázkem (tj. se stylem "float:left", písemena TJ v tomto případě), je nutné přidanému divu přidat ještě styl "clear:both;". To se ale hodí pouze v případě, že máte ikony velké, široké nebo jich je větší počet. V našem případě by to příliš pěkné nebylo - posuďte sami.

odkazy2



Naposledy změněno pátek, 29 srpen 2014 09:53

Zaujal Vás tento článek? Sdílejte ho a šiřte dál...

Tomáš Janeček

Student aplikované informatiky na FIM UHK, nadšený do kódu všeho druhu, tvorby webových aplikací i webdesignu. Vytvořil jsem svůj blog tomasjanecek.cz kam taky občas píšu. Žiju sportem - volejbal, horské kolo, (orientační) běh..., počítači i hraním na sopránové ukulele.



Komentáře   

 
Petra
+2 # Petra 2013-10-15 21:42
Ahoj Tome!

děkuji za Tvůj popis.... napsal jsi vše moc hezky a výstižně! Sice s html bojuji ;), ale podle Tvého návodu to není boj nepříjemný ;) Díky! Ať se Ti daří! :)
P.
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2013-10-15 22:38
Ahoj Petro,
chvála se čte vždycky hezky - díky za reakci :) pokud budeš potřebovat pomoc, napiš text a jak ho chceš uspořádat, html kód ti pro to rád napíšu.
Odpovědět | Odpovědět citací | Citovat
 
 
Jirí Chládek
0 # Jirí Chládek 2014-08-31 22:11
Zdravím,

bylo by možné abych Vám zaslal mail s textem a obrázkem a vy mi toto předělal do html? Dost to spěchá. Zaplatit není problém. Děkuji Chládek
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2014-09-01 09:00
Dobrý den,
kontaktujte mě prosím na a určitě se domluvíme.
Odpovědět | Odpovědět citací | Citovat
 
 
Zdeněk Šták
+1 # Zdeněk Šták 2013-10-21 16:47
Díky za názorný popis, ale bojuji nyní v Thunderbirdu ještě s jednou věcí. I když mám v html kódu nastaveno písmo podpisu jako černé, tak Thunderbird nyní (po aktualizaci) automaticky podpis změní na šedivý. Poklikáním a vypnutím atributu textu se text změní na černý, ale musí se to provádět u každé nové zprávy. Není možné to změnit někde globálně pro všechny nové zprávy? Děkuji za odpověď.
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
+2 # Tomáš Janeček 2013-10-21 20:30
Ahoj Zdeňku, díky za reakci,
barvou textu v Thunderbirdu se trápit nutně nemusíš. To, co nyní vidíš, je pouze nastavení Thunderbirdu, podpis jako takový se posílá v barvách, který jsi nastavil. Nicméně pokud mail bude prohlížet jiný uživatel Thunderbirdu, uživatel uvidí podpis ve stejných šedých barvách jako ty.

Vše je způsobeno novinkou po aktualizaci, kdy kvůli srovnání jistých stylů Thunderbirdu a Firefoxu Mozzila přidala do podpisů průhlednost.
Pokud se jí chceš zbavit (jistě že), a to tak, aby podpis viděli v požadovaných barvách všichni včetně uživatelů Thunderbirdu, přidej na úplný konec kódu (za poslední značku) Tvého HTML podpisu krátký kód - přidán na konec článku.

Jedná se pouze o styly, které zajistí, že průhlednost se bude dědit, a její výchozí hodnota je 1 (100% neprůhlednost). Tím se vše vyřeší - nyní jsem to testoval.

Článek jsem rozšířil o vyřešené tohoto problému, jelikož by z toho mohl být často řešený problém.
Odpovědět | Odpovědět citací | Citovat
 
 
Zdeněk Šták
+2 # Zdeněk Šták 2013-10-23 12:41
Děkuji za vyřešení problému. Opravdu to funguje a šlo mi právě o ty uživatele Thunderbirdu, kteří by měli podpis šedivý. Ještě jednou děkuji za rychlé řešení.
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2013-10-23 13:49
Není zač, jsem rád, že se problém vyřešil :)
Odpovědět | Odpovědět citací | Citovat
 
 
Zdeněk Štuksa
+1 # Zdeněk Štuksa 2013-10-31 15:11
Dobrý den
Bylo by možné zde udělat nějaký podpis, který by obsahoval i ikonky propojené se sociálními sítěmi ?
Například u posledního podpisu, který se mi líbí nejvíce, že by byl ještě jeden řádek kde by byly malé ikonky souciálních sítí. Jako je Facebook, Google + a Youtube. S propojenými odkazy na ně.
Děkuji za informaci a pomoc.
S pozdravem Zdeněk Štuksa
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2013-11-07 17:03
Dobrý den Zdenku,
ano, i to je možné a celkem jednoduše. Omlouvám se, že reaguji až teď - byl jsem velmi zaneprázdněn školními povinnostmi, ale nyní jsem snad vše napravil.

Článek jsem rozšířil, aby vám vysvětlil, jak ikony s odkazy přidat :) snad vám to pomůže.
Odpovědět | Odpovědět citací | Citovat
 
 
Aleš
0 # Aleš 2013-12-08 08:27
ahoj,
podpis jsem vyřešil,šlo to ,,sqvjele" i když jsem počítačový analfabet.Mám dotaz,jde použít logo jako vodoznak na celou stránku v mozille,prostě skoro průhledné na pozadí.Díky za odpo Aleš
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2013-12-12 21:08
Ahoj Aleši, to už je problém. Musel by se obrázek nastavit na pozadí oblasti, ve které píšeš, což není dost dobře možné žádným jednoduchým způsobem. Nastavit vodoznak do oblasti podpisu by bylo jednodušší, protože tam jsi pánem HTML kódu ty - v textové části mailu ale ne.
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš
0 # Tomáš 2014-01-06 10:24
Dobrý den.
Děkuji moc za perfektní návod. Pro Thunderbird jsem si díky němu udělal podpis podle svých představ.
S vytvořením podpisu po mě chtějí pomoct i kolegové, kteří používají Outlook v MS Office 2013 a tam se mi nedaří.
Ve zprávě i když je zvolený formát zprávy html tak se vždy zobrazí text tak jak je v html kodu psán.. prostě např toto:


S přáním pěkného dne,
Tomáš Janeček - webkodér | | 774 249 724 |
www.webzpravodaj.cz


Nevíte kde coa jak vOutloku nastavit?
Děkuji. Tomáš
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš
0 # Tomáš 2014-01-06 10:36
aha tak i tady se podpis zobrazuje správně (pominu li obrázek) Vložil jsem do textu dotazu přímo html kod včetně tagů, chtěl jsem Vám ukázat co se mi vkládá v outlooku, ale asi rozumíte co mám na mysl
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2014-01-06 13:43
Dobrý den, s OutLookem vám bohužel nepomůžu - nemám jej nainstalovaný.
Odpovědět | Odpovědět citací | Citovat
 
 
Zdenka
0 # Zdenka 2014-01-09 10:19
Ahoj,
v e-mailu mám nastavený obrázek jako podpis. Při posílání se mi zobrazuje správně. Problém je v tom, že pokud mi někdo, většinou je to někdo ze seznamu, na e-mail odpoví, podpis (obrázek) se už nezobrazí, ale připojí se do přílohy. Je to tím, že ten na druhé straně nepoužívá žádný e-mailový prohlížeč? Dá se to nějak vyřešit?

Díky Zdenka
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2014-01-15 02:17
Ahoj Zdenko, to je tím, že email pravděpodobně druhá strana nemá dostatečně kvalitního emailového klienta nebo má vyplé HTML zobrazení mailů. S tím ze své strany nic nezmůžeš.
Odpovědět | Odpovědět citací | Citovat
 
 
Peter
0 # Peter 2014-01-14 11:00
Ahoj,
chcem sa spýtať či je možné zmeniť veľkosť písma.
Príklad:
" S pozdravom Dedo Mráz" ( štandardná veľkosť písma)
"Hračkárstvo južný pól" ( menšia veľkosť písma)
Ďakujem za odpoveď
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
+1 # Tomáš Janeček 2014-01-15 02:22
Ahoj Peter,
je to jednoduché. To, co chceš mít jinou velikostí písma, obal do span nebo do odstavce p a jako atribut mu dej style="font-siz e: 20px;" nebo jakoukoliv jinou velikost, která ti bude vyhovovat. Standardní bude asi 13px, opět záleží na emailovém klientovi, ty si ji ale můžeš přizpůsobit. Do span můžeš obalit klidně i jedno jediné písmenko a změnit jeho velikost (font-size: 10px), barvu (color: green), odsazeni, posunutí... vše co CSS dovoluje :)
Odpovědět | Odpovědět citací | Citovat
 
 
Peter
0 # Peter 2014-01-15 06:44
Ahoj,
ešte raz ďakujem za odpoveď, ale mám ďalšiu otázku:
môžem si zmeniť aj štyl písma a tiež ako si dokážem spraviť tabuľku, ktorú spomínaš vyššie a rozmiestniť v nej text.
Ďakujem za odpoveď.
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2014-01-30 00:08
Tabulka má velmi jednoduchý princip a určitě pomůže www.jakpsatweb.cz/tabulky.html. Tabulka jako taková má obal v podobě tagu "table", ten musí obsahovat řádky "tr" a v každém řádku je dobré mít nějaké buňky "td", kolik jich bude, je jen na tobě. Všechny řádky ale musí obsahovat stejný počet buněk, pokud buňky neslučuješ pomocí atributu colspan. Krásně vysvětleno na odkazu výše, Jak Psát Web.

Pak může nastat problém a to ten, že bude vidět ohraničení buněk tabulky. Pak je potřeba přidat atribut "style" tabulce i všem buňkám "td". Vše co musí nutně obsahovat je "border: none;", to je klíčové, tím se totiž zbavíme ohraničení. Celý atribut pak tedy vypadá takto: style="border: none;" .

Rozmístění pomocí tabulky jsem do článku přidávat už nechtěl, jelikož to znamená příliš mnoho HTML kódu a další styly na odstranění rámečků a ještě třeba odsazení.

Co se týká změny stylu písma, stačí do atributu "style="..."" připsat: font-family: "Tahoma", sans-serif; nebo třeba: font-family: "Times", serif; .
Je dobrý zvykem napsat na prvním místě název fontu, který chceš použít, a na posledním generickou rodinu zvoleného fontu, tedy serif pro patkové písmo (Times New Roman třeba) a sans-serif pro bezpatkové (např. Arial).

Snad to takhle stačí :-)
Odpovědět | Odpovědět citací | Citovat
 
 
Daniel Vondrák
+2 # Daniel Vondrák 2014-02-03 20:09
Chci touto cestou vyjádřit poděkování Tomáši Janečkovi, který mně během 3 dní (a to se ještě omlouval za zpoždění :-) ) poslal kompletní HTML kód celkem komplikovaného podpisu do Thunderbirdu. Je vidět, že jde o zapáleného fanouška, systematického mladého kluka - studenta. Radost číst jeho stránky. Přeji mnoho úspěchů v životě a ještě jednou - děkuji ...
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2014-02-03 20:52
Rádo se stalo a taky díky :-)
Odpovědět | Odpovědět citací | Citovat
 
 
David
0 # David 2014-04-02 20:42
Milý Tomáši, jsem Ti velice zavázán za perfektní návod na tvorbu podpisu s logem firmy. Díky Tvému zdrojovému kódu se mi vše podařilo vytvořit cca za několik minut. Pokud bych měl vše programovat, (programování je pro mne neprobádaný vesmír) ztratil bych min celý den. Až budeš nakupovat auto a budeš potřebovat radu, rád pomohu. Jsem Tvůj dlužník. Hezký večer.
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2014-04-02 20:59
Ahoj Davide, díky za chválu :)
Auto plánuju až za pár let a jak tak čtu autoforum.cz, měl bych jasno celkem rychle... a nakonec stejně skončím s Octavií jako celá naše rodina. Každopádně ještě jednou díky a užívej si podpisu, snad bude sloužit.
Odpovědět | Odpovědět citací | Citovat
 
 
Lukáš Petránek
0 # Lukáš Petránek 2014-06-03 22:29
Ahoj Tomáši,
Mohl bych na tebe mít prosbičku jestli by si mi neposlal HTML kód který by sloužil jako podpis v thunderbirdu? Vše bych ti poslal e-mailem. Pokud by si byl tak hodný komunikuj prosím se mnou e-mailem . Zatím moc díky za čas L
Odpovědět | Odpovědět citací | Citovat
 
 
Petr Jiránek
0 # Petr Jiránek 2014-06-23 21:22
Ahoj Tome,
objevil jsem hezké rozšíření do ThunderBirdu: https://addons.mozilla.org/cs/thunderbird/addon/signature-switch/, umožňuje přepínat přednastavené podpisy nezávisle na účtu. Možná by jsi to mohl doplnit do článku, nebo udělat pokračování. Dají se hezky využít tvoje návody.
Petr
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2014-07-09 20:55
Ahoj, díky, do dalšího článku jej možná zahrnu. Uvidíme, nechci článek zbytečně natahovat.
Odpovědět | Odpovědět citací | Citovat
 
 
Michal R
+1 # Michal R 2014-07-08 11:12
Díky moc Tomáši za vaše návody. Jsou napsané opravdu blbovzdorně, což dokládá fakt, že jsem si udělal podpis s obrázkem sám :) Ještě jednou díky moc.
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2014-07-09 20:54
Není zač :) brzy chystám rozšíření článku, tento návod je vzhledem k své jednoduchosti částečně limitovaný podporou emailových klientů, abych byl konkrétní, OutLook jej nebere tak úplně jak bychom si přáli.
Odpovědět | Odpovědět citací | Citovat
 
 
Samy
+1 # Samy 2014-11-28 13:24
Strašně moc děkuji. Toto je nejgeniálnější článek (popis a návod), jak na to! Seš borec, že sis s tím dal tahkle práci. Díky. S.
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2015-03-27 10:01
Díky! Je to jen jednoduchý základ, který má také své proti (třeba v outlooku obrázek obtékat nebude), proto už dlouho chystám pokračování, ale stále jsem nenašel čas ho napsat.
Odpovědět | Odpovědět citací | Citovat
 
 
Jan Březina
0 # Jan Březina 2015-03-28 08:05
Dokonalý popis! Díky
Odpovědět | Odpovědět citací | Citovat
 
 
jandis
0 # jandis 2015-04-13 09:11
Dobrý den,

děkuji za Váš návod na napsání podpisu. S jednou věcí ale stále bojuju.. Potřebuju nastavit velikost a barvu textu současně a pořád mi to nejde.. Prosím Vás o radu, děkuji, Jandis. :-)
Odpovědět | Odpovědět citací | Citovat
 
 
Tomáš Janeček
0 # Tomáš Janeček 2015-04-13 17:56
Dobrý den,
"nejde" je dost široký pojem, pokud je to prostý text v odstavci, stačí do atributu style u odstavce napsat něco jako color:#000000;f ont-size:14px; a musí to fungovat. Pokud jsou v odstavci ale další elementy, např. odkazy, na které se má styl včetně velikosti a barvy písma vztahovat také, u odkazů je typické, že potřebuju barvu předefinovat i pro samotný odkaz.
Odpovědět | Odpovědět citací | Citovat
 
 
jandis
0 # jandis 2015-04-14 08:25
Dobrý den,
děkuji za odpověď, zřejmě jsem někde dělal chybu, teď už je to v pořádku.
Ještě jednou děkuji, přeji hezký den a vše dobré.
Jandis 8)
Odpovědět | Odpovědět citací | Citovat
 
 
CHINA WHOLESALE
0 # CHINA WHOLESALE 2015-06-04 12:27
a musí to fungovat. Pokud jsou v odstavci China Wholesaler http://www.gift-stor.com/ ale další elementy, např. odkazy, na které se má styl včetně velikosti a barvy písma vztahovat také, u odkazů je typické, že potřebuju barvu předefinovat i pro samotný odkaz.
Odpovědět | Odpovědět citací | Citovat
 
 
Ondřej
0 # Ondřej 2015-07-21 15:01
Dobrý den,
prosím poraďte - příliš se v takových věcech nevyznám. Lze vložit obrázek (firemní logo) nad automatický podpis (text) v emailu přes webové rozhraní, Pokud ano - nevíte jak? Neznám nikoho kdo by dokázal poradit, snad budete vědět jak, jste velmi erudovaný odborník. Děkuji
Odpovědět | Odpovědět citací | Citovat
 
 
Andrej
0 # Andrej 2015-08-03 15:54
Ahoj ,
dik za navod je vidiet , ze si fachman , ale ja si s tim neviem radi . V outlooku som podpis nastavil jednoducho , ale firemny podpis nastavit v thunderbirde ja fakt na mna komplikovane .
Nevedel by si mi s tim prosim pomoct , podpis ti viem poslat na email . Za odpoved vopred dik.
S pozdravom
Andrej
Odpovědět | Odpovědět citací | Citovat
 
 
haf
0 # haf 2015-09-27 14:44
Dobrý den,
E-maily z Thunderbirdu s takto vloženým obrázkem dostávají od spamassassinu dost velkou penalizaci:
* 2.1 HTML_IMAGE_ONLY _12 BODY: HTML: images with 800-1200 bytes of words
Naše firemní logo má 3009 byte a rozměr 154 x 50 bodů.
Nevíte někdo, co s tím?
Odpovědět | Odpovědět citací | Citovat
 
 
reflective vest
0 # reflective vest 2016-05-17 10:42
To je opravdu skvělé, že jsem hledat pro celou tuto dobu. naprosto úžasné a já stále ptají, jak mohu navštívit tento web
Odpovědět | Odpovědět citací | Citovat
 
 
Blanka
+2 # Blanka 2016-07-16 00:23
Dobrý den, právě jsem po několika hodinách vyrobila podpis i s logem podle svých představ, bez Vás by to nebylo možné. Moc děkuji za pomoc!
Odpovědět | Odpovědět citací | Citovat
 
 
RF
0 # RF 2017-02-02 14:06
Mockrát děkuji za návod, našel jsem tam jen drobnou chybku:

"font-style italic" by mělo být "font-style: italic"

Každopádně ještě jednou mockrát díky :-)
Odpovědět | Odpovědět citací | Citovat
 
 
žanet
0 # žanet 2017-04-06 12:35
Dobrý den,

prosím kde si to mohu v gmailu nastavit, abych text podpisu mohla psát v HTML ?

Děkuji moc za odpověď
Žanet
Odpovědět | Odpovědět citací | Citovat
 
 
Ondřej
0 # Ondřej 2017-07-31 14:10
Díky moc, skvělý článek :)
Odpovědět | Odpovědět citací | Citovat
 
 
nba live mobile cash
0 # nba live mobile cash 2017-11-13 22:23
Its only enough of a challenge to keep you discourged.
Odpovědět | Odpovědět citací | Citovat
 
 
euro palace
0 # euro palace 2017-11-15 14:49
online casio play
best payout slots online
99 slot machines no deposit bonus codes 2014
7red no deposit bonus
slots inferno no deposit bonus 2017
Odpovědět | Odpovědět citací | Citovat
 
 
play casino Pokies
0 # play casino Pokies 2017-11-20 00:01
free online roulette 2015
play on casino
online casino 888 roulette
888 casino bonus code 2015
Odpovědět | Odpovědět citací | Citovat
 
 
casino games
0 # casino games 2017-11-23 05:56
online casinos
slot machine
real money casino
casino online
Odpovědět | Odpovědět citací | Citovat
 
 
poor credit loan
0 # poor credit loan 2017-11-23 18:36
online loans with bad credit
how to take out a loan
dollar loan
loan without credit check
need money now
Odpovědět | Odpovědět citací | Citovat
 
 
slots real money
0 # slots real money 2017-11-24 12:29
slots canada online
black jack casino
slots games
slots lv
online live casino
Odpovědět | Odpovědět citací | Citovat
 
 
HymanSmall
0 # HymanSmall 2017-11-28 15:38
I have checked your blog and i have found some duplicate content,
that's why you don't rank high in google, but there is a tool that can help you to create 100% unique articles,
search for: Boorfe's tips unlimited content
Odpovědět | Odpovědět citací | Citovat
 
 
очень эпическое кино
0 # очень эпическое кино 2017-12-04 06:21 Odpovědět | Odpovědět citací | Citovat
 
 
real money casino
0 # real money casino 2017-12-08 09:59
free online casino games
slot machines
online casino
best us casinos online
casino games
Odpovědět | Odpovědět citací | Citovat
 
 
casino online
0 # casino online 2017-12-13 00:51
casino free games
free casino
games download

free casino slots
casino games for free
Odpovědět | Odpovědět citací | Citovat
 

Přidat komentář

Bezpečnostní kód Obnovit