neděle 5. června 2016

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: http://4.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/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?


6 komentářů:

  1. Začínám těmhle věcem díky tvým a dalším skvělým návodům docela rozumět :)

    OdpovědětVymazat
  2. Tyhle blogerské tipy jsou super, děkujeme moc :))

    OdpovědětVymazat
  3. To zvýrazňování asi neupotřebím, nicméně až bude někdy chuť a čas, číslování komentářů bych si ráda nastavila, takový systém se mi taky líbí. :)

    OdpovědětVymazat
  4. Pěkné vychytávky. Jo, hrabání se v kódech je vždycky něco :D

    OdpovědětVymazat
  5. Tak ja tomu nerozumim vubec, ale takovyhle navody jsou super. Zkusim a mrknu na dalsi. Moc diky

    OdpovědětVymazat
  6. Já jsem totální počítačový antitalent, takže hrozně moc díky za tuhle sérii :)
    Měj se krásně, Lory

    OdpovědětVymazat

Děkuji za komentář, nezapomeňte za sebou nechat stopu v podobě odkazu na blog a přidat se k mým pravidelným čtenářům, aby vám nic nového na blogu neuniklo. Hezký zbytek dne přeji! ♥

Related Posts Plugin for WordPress, Blogger...