Blogerské vychytávky #4

Zdravím všechny čtenáře a dnes jsem tu s dalším dílem - troufnu si říci úspěšné - série, která se zabývá blogerskou problematikou po stránce technické, zahrnuje tedy různé rady, tipy a vychytávky související především s čarováním HTML kódem. Tentokrát jsem sepsala návody na dvě praktické vymoženosti, bez kterých se sice celkem bez problémů obejdete, ale mohou váš blog mile oživit, udělat ho přehlednějším a svým způsobem bude také působit drobet profesionálnějším dojmem.

Jak profi způsobem zvýraznit text 

v článku?

Zvýraznit text tímto způsobem (pomocí editoru při psaní článku) svede každej blbec.

Ovšem způsob za pomoci HTML kódu působí na oči o poznání přívětivěji a taktéž o dost profesionálnějším dojmem.

Rozdíl mezi těmito dvěma způsoby je přímo rapidní - přitom postup k druhé verzi je snadný jako facka dokonce i pro úplné začátečníky.

Při vytváření nového příspěvku na blogu si v levém horním rohu překlikněte z "Napsat" na "HTML", kam posléze vložíte tento kód:

 <div style="background-color: #525a70; color: yellow; padding: 10px;"> Sem vložte text, který si přejete zvýraznit </div>

Klikněte pro zvětšení.

Pokud byste přece jenom měli problém se v tomto poměrně jednoduchém kódu zorientovat, je dobré uvědomit si, že:

× #525a70 představuje barvu pozadí

× yellow zastupuje barvu písma

× 10px značí velikost okrajů rámečku

Poté už stačí jen překliknout zpět do "Napsat". Je také dobré poznamenat, že před stejně jako i za zvýrazněným textem může být cokoliv - obyčejný text, fotografie... je to úplně jedno.

Klikněte pro zvětšení.

Jak na číslování komentářů?

Číslování komentářů je opět čistě vizuální záležitostí, ale dle mého skromného názoru o dost napomáhá v orientaci. První, co je potřeba udělat, je otevřít si HTML blogu.

Zde klikněte myší kamkoliv do napsaného kódu, posléze zkratkou CTRL + F vyvolejte vyhledávací okno, do něhož je potřeba vložit kód: ]]></b:skin> a poté ENTER. V HTML blogu by se vám měl tento kód zvýraznit a před tento zvýrazněný úsek následně vložte tento dlouhatánský kód (oproti originálu jsem tento lehce poupravila - to samé ale můžete snadno udělat i vy):

 .comment-thread ol {

counter-reset: countcomments;

}

.comment-thread li:before {

content: counter(countcomments,decimal);

counter-increment: countcomments;

float: right;

z-index: 0;

position:relative;

font-size: 16px;

color: #555555;

padding-left:15px;

padding-top:13px;

background: url(http://ripplemedia.net.au/images/Myself-circle-outside.png) no-repeat;

margin-top:10px;

margin-left:10px;

width: 45px;

height: 45px;

}

.comment-thread ol ol {

counter-reset: contrebasse;

}

.comment-thread li li:before {

content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);

counter-increment: contrebasse;

float: right;

font-size: 16px;

color: #555555;

}

Klikněte pro zvětšení

Nyní už jen uložte novou šablonu a mělo by být hotovo. Pokud já osobně ale něco na blogu upravuji nebo vkládám kódy, ráda rozumím tomu, co vlastně dělám (nebo alespoň částečně) - pojďme si tedy ještě trochu podrobněji rozebrat, co tento kód vlastně zahrnuje a znamená:

 .comment-thread ol {

counter-reset: countcomments;

}

.comment-thread li:before {

content: counter(countcomments,decimal);

counter-increment: countcomments;

float: right; --- obtékání prvku, jinými slovy: na které straně bude číslo a bublina

z-index: 0; --- překrývání prvků, posunutí jednoho prvku oproti druhému

position:relative;

font-size: 16px; --- velikost číslic

color: #555555; --- barva číslic, vědecky vzato se jedná o tzv. hexadecimální kód barev (naleznete ho v jakémkoliv grafickém programu např. PFS-X a Photoshopu nebo na internetu)

padding-left:15px; --- šířky vnitřních okrajů

padding-top:13px;

background: url(http://ripplemedia.net.au/images/Myself-circle-outside.png) no-repeat; --- tato část se dá libovolně měnit, na googlu můžete najít bezpočet pozadí (kroužky, bublinky), ale pozor: obrázek si musíte zmenšit (já ho mám schválně nastavený velký, protože mi více vyhovují samotné číslice) - pokud máte zájem o původní znění kódu, můžete si na toto místo doplnit: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPANvyN5uc_iP4qxAqbsy4ZFI0zo3GnHu2VO5KjxV10TusHn0EQzuP6MqhH4jXNE2WmrhaGP9iMnqnxVFXeg6LwbqWXXh7YSuHUvSUT60PQABmBJW5mU9nLAeSytp8jlGeETsRX9UkQR4/s1600/comment+bubble2.png

margin-top:10px; --- šířka vnějších okrajů

margin-left:10px;

width: 45px; --- šířka a výška obrázku, bubliny - zkrátka podklad pro číslice

height: 45px;

}

.comment-thread ol ol {

counter-reset: contrebasse;

}

.comment-thread li li:before {

content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);

counter-increment: contrebasse;

float: right;

font-size: 16px;

color: #555555;

}

Výsledek nakonec vypadá asi nějak takto:

To bude ode mne pro dnešek všechno - pomohl vám některý z návodů?

Znáte nějaké další vychytávky?