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

by - 13.1.14

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:

.comment-thread ol{

 counter-reset: contarcomentarios;
 }
 .comment-thread ol ol {
 counter-reset: contarbis;
 }
 .comment-header::before {
 content: counter(contarcomentarios,decimal)".";
 counter-increment: contarcomentarios;
 float: left;
 padding-right: 4px;
 }


Je možné, že již v poli budete mít nějaký další kód, například pro vycentrování headeru apod., v tomto případě nemažte nic, kód vložte normálně za něj jako další. A nezbývá nic, než v náhledu zkontrolovat, zda to funguje, jak má a uložit




Doufám, že to nevzdáte a zkusíte se mnou i druhou variantu! :)


Teď se tedy pojďme podívat na propracovanější a daleko lepší verzi, jen o něco málo složitější. V této verzi je odpověď na komentář zaznamenávána jeho číslem a písmenem. Tedy odpověď na komentář č.1 bude zaznamenána jako 1.a, další odpověď na komentář č.1 bude jako 1.b.

Kouzlit budeme v Šabloně

Jelikož budeme upravovat HTML kód, klikněte na Upravit HTML.


Potřebujeme šablonu upravit, takže se klikem na button Upravit šablonu přepneme mezi čísílka a písmenka.

 A teď budeme trošku hledat. Potřebujeme vložit kód níže uvedený před spojení  ]]></b:skin>. Pomocí zkratky CTRL + F vyvolejte vyhledávací pole a spojení zadejte a vyhledejte. Dá se dohledat i ručně, já ho našla cca u řádku 617. 


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:
 .comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(http://4.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px;
height: 48px;
}
.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: 18px;
color: #666666;
}

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! :)

You May Also Like

25 komentářů

  1. tyhle články jsou bezkonkurenčně nejlepší!:D díky!
    perko101.blogspot.cz

    OdpovědětVymazat
  2. Díky za tip, už mám taky číslování :))

    http://www.style-and-smile15.blogspot.cz/

    OdpovědětVymazat
  3. Super typ! Používám tu jednodušší variantu už nějaký pátek, ale ta druhá vypadá taky moc pěkně! :))
    Coffee with milk and two sugars

    OdpovědětVymazat
  4. Tyhle tvoje články jsou vážně super. Díky moc za radu :)

    OdpovědětVymazat
  5. Super tip, bohužel mi nefunguje ten obrázek pod čísla. Vyzkoušela jsem tři a nejde mi ani jeden, nevím co dělám špatně. Obrázek jsem nahrála na dropbox a url obrázku vložila na patřičné místo...a nic :(

    OdpovědětVymazat
    Odpovědi
    1. a máš tam to url před odkazem?

      Vymazat
    2. Ano, mám to přesně tak jak je v návodu...zatím jsem nepřišla na to, kde je chyba :(

      Vymazat
    3. Tak to zkus nahrát na jiný portál, třeba ten imageshack :) případně mi pošli printscreen na mail blueberrypink@seznam.cz a kouknu na to, snad chybu najdu :) Ale i bez obrázku to vypadá dobře ;)

      Vymazat
    4. Zkoušela jsem to nahrát prvně na dropbox, potom i do imageshack, ale pořád nic. Děkuju, seš moc hodná, ale nakonec to nechám bez obrázku, hlavní je přece jen to číslo :)

      Vymazat
    5. To mi taky bohužel nejde :(

      Vymazat
  6. Holky moc vám děkuji, vaše komentáře potěší, jsem ráda, že Blogger tips čte aspoň někdo :)

    OdpovědětVymazat
  7. jsi úžasná, komentáře už mám očíslované, jen jsem si je dala bez obrázku. nevěděla bys ještě, jak se zbavit čísla (celkového počtu) komentářů u nadpisu (viz můj blog)? já na to za půl roku nepřišla :D
    Once Upon a Time

    OdpovědětVymazat
    Odpovědi
    1. Ahoj, tak to nevím, ale zkus googlit :)

      Vymazat
  8. super návod :) už to mám na blogu, ďakujeme :)

    OdpovědětVymazat
  9. Na tohle jsem nikdy nemohla přijít a konečně to vím ! :)

    OdpovědětVymazat
  10. Tak už mám taky čísla...ještě to budu muset trošku poladit (zatím jsem nepřišla na to, jak se zbavit toho rámečku okolo čísla), ale díky za super návod! :)

    OdpovědětVymazat
  11. Veru ty jsi hotová čerodějka. Dnes vyzkousim. Kdepak jsi se to tak naučila?

    OdpovědětVymazat
    Odpovědi
    1. Měla jsem jako maturitní předmět tvorbu webových stránek, ale převážně je to jen o hledání, nic moc tvořivého na tom není :)

      Vymazat
  12. Ahoj, mohla bys mi prosím pomoct. Na blogu mi nejde čtenářům odpovědět na jejich komentáře. Jde odpovědět pouze tak, že napíšu nový komentář. A to nechci..

    OdpovědětVymazat
    Odpovědi
    1. Bohužel jsem se s tímhle případem nikdy nesetkala, zkus googlit..

      Vymazat
  13. Děkuji ti :) Dnes jsem si na to udělala čas, a díky tvému skvělému návodu se mi to jakž takž podařilo, i když to nemám tak pěkný a přehledný jako ty :) :D Ale aspoň něco,než-li nic :) Takže ještě jednou díky, jsi skvělá :) Měj se hezky.

    OdpovědětVymazat
  14. Skvely navod! Inspirovala som, ale background cisel mi nejak dosiahnut na blogu..skusim sa na to este pozriet. Zatial mam take obycajne komentare, ale casom ich snad vytunim :)
    Peacock & Pineapples

    OdpovědětVymazat
  15. Bohůžel mi nejde ani to lehčí. Pořád mám číslování stejné a to složitější dopadlo, tak že se mi celý blog posunul :D. Nevím kam to v toom HTML mám přesně dát nepoznám to z tvých screenů :D

    Sofi

    OdpovědětVymazat
  16. Funguje, díky! Stačí mi zatím první varianta, druhou případně až bude víc času. Zkus na oplátku můj návod :) Jak přidat tlačítko To se mi líbí do každého článku na blog od Google - http://kreativnesladybird.blogspot.cz/2013/04/jak-dat-tlacitko-to-se-mi-libi-do.html

    OdpovědětVymazat

Děkuji za komentář, pokud mne chcete kontaktovat i jinak, zkuste blueberrypink@seznam.cz. Díky a přeji pěkný zbytek dne! :)

Čtenáři