Variace na "Zobrazit více"

Pokud máte svůj blog rádi vyšperkovaný a vyparáděný, určitě uvítáte mých několik tipů, jak upravit tlačítko "Zobrazit více", které se objeví vždy, když si někam do textu dáte zalomení.

Jak změnit text odkazu

Abyste mohli změnit text vašeho odkazu, klikněte v "Rozvržení" v části vašich příspěvků na "Upravit". Zobrazí se vám toto okno:

Do textového pole, které jsem vám označila na obrázku, potom můžete vepsat, co chcete.

Vlevo, vpravo nebo na střed?

I obyčejná změna zarovnání může udělat mnoho. Abyste mohli upravit zarovnání, zkopírujte v personalizaci šablony v části "Pokročilé" a "Přidat CSS" tento kód. Hvězdičky nahraďte buďto left (pro zarovnání vlevo), center (pro zarovnání na střed) nebo right (pro zarovnání vpravo).

 .jump-link {
  text-align: *** ;
 }

Ale teď už pojďme opravdu na samotnou dekoraci odkazu.

Dodejte tomu šmrnc

Nějaký zajímavý nebo ozdobný font vždycky upoutá mou pozornost. Nepotrpím si na něj v případě dlouhých textů, ale když jde třeba o nadpisy v menu, název blogu nebo právě takovýto odkaz, vidím ho ráda.

Když přijde na přidávání vlastních fontů na blog, požívám jedině Google Fonts. Je to skvělá stránka, má na výběr hodně dobrých fontů, dobře se na ní hledá a bezvadně poslouží i při tvoření kombinací. Jediný problém, který může nastat, je podpora diakritiky.

Když chci aby font podporoval diakritiku, vybírám jedině z takových, které mají v jazyku i "Latin Extended". Obvykle si namísto jejich ukázkových textů ještě zadám všechna písmena, která mám na klávesnici od "ě" po "é", kliknu na "Aply to all" a koukám jen po těch fontech, které mi zobrazí všechna písmena správně.

A jak tedy přidat vlastní font do Bloggeru?

Jako první je potřeba si vybrat font, se kterým budeme pracovat. Já jsem si pro tento návod vybrala

font Petit Formal Script. (Další velmi pěkné fonty jsou třeba Allura, Courgette nebo Great Vibes.)

Jako první musíte font přidat do HTML kódu. Začněte tím, že v Google Fonts kliknete na "Select this font". Zobrazí se vám takovéto okno:

(S nastavením vašeho fontu si můžete ještě pohrát, když kliknete na "Customize".)

Jako první vás bude zajímat text ve špičatých závorkách. Zkopírujte si ho a přejděte do HTML editoru. V něm si vyhledejte <b:skin> a váš zkopírovaný text vložte nad něj. Pokud teď zkusíte šablonu uložit, zobrazí se vám upozornění, že váš odkaz není uzavřený. Abyste jej uzavřeli, musíte doplnit / před poslední špičatou závorku toho odkazu, který jste uzavřeli. Jestli vám to stále hlásí nějakou chybu, zkuste se podívat, zda se v odkazu někde neschovává & a kdyžtak za něj doplňte amp;.

Poté přejděte do personalizace vaší šablony a přidejte tento CSS kód:

.jump-link a {
  *** doplňte text z druhého textového pole Google Fonts ***
  font-size: 23px;
}

Číslovku za "font-size:" si upravte podle potřeby. Váš odkaz může potom vypadat takto:

Číst dále >>

V jednoduchosti je krása

Jako další jsem si pro vás připravila odkaz v minimalistickém stylu, který sama velmi ráda používám. Na místo hvězdiček doplňte hex code vaší zvolené barvy, pokud žádný kód nedoplníte a hvězdičky odstraníte, bude barva ohraničení stejná jako barva vašeho odkazu.

Kód opět zkopírujte do textového pole pro vlastní CSS v pokročilé personalizaci šablony.

.jump-link a {
  padding: 10px;
  border: 1px solid *** ;
}

Odkaz potom bude vypadat přibližně takto:

Číst dále

... když najede myš...

Další mojí oblíbenou vychytávkou, kterou si odkaz můžete vylepšit a kterou můžete vidět i na mém blogu, je změna barev po najetí myši. Místo hvězdiček opět doplňte vaše vybrané barvy. (Dejte si pozor, aby vše šlo dobře přečíst.)

.jump-link a:hover {

background: *** ;

color: *** ;
}

V kombinaci s předchozím kódem bude váš odkaz vypadat takto: (nezapomeňte přes něj přejet myší)

Číst dále

S obrázkem místo textu

Rádi byste měli plnou kontrolu nad tím, jak bude odkaz vypadat? I to je možné, když text odkazu nahradíte obrázkem. Bude to sice potřebovat zásah do HTML kódu vašeho blogu, ale slibuji vám, že se to vyplatí.

Zmáčknutím kombinace Ctrl + F si ve vašem HTML kódu vyhledejte  <data:post.jumpText/> a místo něj do kódu zkopírujte váš obrázek ve formátu:

 <img src=" přímý odkaz na váš obrázek " />

Já jsem jako obrázek použila šipku z IconMonstru, což je jeden z mých oblíbených zdrojů na všeljaké ikonky, a můj odkaz potom vypadal takto:

Obrázek s efektem

Líbilo by se vám mít jako odkaz vlastní obrázek, ale zároveň chcete, aby vaši čtenáři při přejetí myší viděli, že se jedná o odkaz? I to se dá zařídit. Postup je velmi podobný jako u minulé části, pouze s dvěma malými rozdíly: potřebujete dva různé obrázky a tento kód:

<img src=" přímý odkaz na první obrázek " onmouseover="this.src=' přímý odkaz na druhý obrázek '" onmouseout="this.src=' přímý odkaz na první obrázek'"/>

Odkaz potom bude vypadat takto:

A to je pro dnešní návod vše. Pokud máte nějaké nápady, jak byste odkaz chtěli vylepšit, a nevíte jak, napište mi a já se vám můžu pokusit pomoct. To samé platí, pokud máte nějaké nápady na návody, které byste chtěli u mě na blogu vidět.

Jestli se rozhodnete některý z mých návodů vyzkoušet, napište mi o tom v komentáři, ať se můžu podívat, jak vám to dopadlo.