Blogger tips - číslování komentářů

Dneska bych vám ráda představila návod na číslování komentářů v bloggeru. Jsou dva způsoby, jeden jednoduchý jak facka, ale funkční jen napůl a druhý je trochu složitější, ale zato perfektní. Věřím, že s mou pomocí zvládnete i ten složitější, není těžký, jen je třeba se v kódu trochu orientovat, ale budu se vám snažit vše vysvětlit tak, aby to pochopil každý.

Nejprve jednodušší varianta: 
Komentáře se číslují klasicky, před ikonou uživatele a jeho jménem je usazená číslice. Problém ale nastává, když někdo odpoví na komentář. Odpověď se totiž v tomto případě počítá jako další komentář, s dalším pořadovým číslem, což vám může nadělat neplechu například při pořádání giveaway.

Návod je jednoduchý, v záložce Šablona klikněte na Personalizovat.

Pak se přesuňte do záložky Pokročilé a v druhém sloupci až dole najdete Přidat CSS. Do pole vložte tento kód:









Níže vidíte vyznačené spojení, které je třeba najít a fialově je vyznačený kód, který budete vkládat. Ke zkopírování níže.

Originální kód:

Mnou použitý a upravený kód: (pokud použijete tento, mělo by číslování vypadat stejně, jako na mém blogu)

 .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: 15px;
color: #555555;
padding-left:15px;
padding-top:13px;
background: url(http://img32.imageshack.us/img32/9563/21qy.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: 15px;
color: #555555;
}
A teď to pojďme trochu rozebrat... Kód musí samozřejmě obsahovat určité HTML náležitosti, aby vše fungovalo, ale také obsahuje hodnoty, které lze upravovat v případě potřeby. Ideální je kód si upravit podle svých požadavků, abyste věděli, co kde a jak nastavit, přináším vám malou barevnou nápovědu vyznačenou v kódu níže.

Fialová pozice znázorňuje tzv. obtékání prvku. V praxi to znamená, na které straně bude číslo a bublina. V kódu je "right", což znázorňuje pravou stranu. Pokud přepíšete "right" na "left", bude číslování vlevo.
Okrová znázorňuje překrývání prvků. Dá se to definovat i jako posunutí prvku oproti tomu druhému.
Hodnoty se určují čísly, já jsem to změnila na nulu. Můžete zkusit vyzkoušet, co to udělá, pokud tam nastavíte třeba 20, 50 apod.
Zelená určuje velikost písma, respektive číslic komentářů.
Modrá udává barvu písma, respektive číslic. #555555 je tzv. hexadecimální kód. Přehled barev a kódů najdete třeba zde.
Oranžová je šířka vnitřního okraje. "Left" je například šířka levého vnitřního okraje. Opět můžete měnit hodnoty čísel, doporučuji vyzkoušet, co vám bude nejvíc vyhovovat.
Vínová určuje, jak budou vypadat bublinky, v kterých se budou nacházet čísla komentářů. Je to prakticky jen kopírování. Do závorky stačí zkopírovat adresu obrázku, který jste si vybrali jako podklad. Na Googlu jich najdete spoustu, ale můžete si i vytvořit vlastní. Já to vzala jednoduše, udělala jsem jen obyčejné kolečko v Zoneru, nahrála na Imageshack, zkopírovala adresu obrázku a vložila do závorky.
Svítivě zelená je pak šířka vnějšího okraje. Viz barva oranžová.
Červená udává šířku a výšku obrázku, respektive bubliny, kterou jste si zvolili jako podklad pod číslice. Opět ozkoušejte, jak velké vám budou obrázky vyhovovat. Doporučuji mít obě hodnoty stejné, jinak se vám bude obrázek deformovat, resp. z kolečka byste měli oválek nebo elipsu.

 .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: 15px;
color: #555555;
padding-left:15px; 
padding-top:13px; 
background: url(http://img32.imageshack.us/img32/9563/21qy.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: 15px;
color: #555555;
}

Hotovo, uložit, vyzkoušet, v případě potřeby upravit hodnoty. Nezapomeňte zkopírovat všechny závorky, uvozovky, lomítka a další náležitosti, aby vám vše fungovalo. Když se na to kouknu zpětně, není to tak složité, je to jen hraní s čísly a hodnotami. Doufám, že mé vysvětlování pochopíte a v případě, že něčemu nebudete rozumět nebo vám něco nebude fungovat, klidně mi napište na FB nebo na blueberrypink@seznam.cz a snad to dáme dohromady :)

Pokud budete tento návod používat, napište mi prosím do komentářů, jak se vám s ním pracovalo, jak byl (ne)srozumitelný a zda vám to funguje.

Děkuji a přeji pěkný zbytek dne! :)