March 04, 2015

Blogging tips | How to center Blogger elements

Ako centrovať prvky v Bloggeri

Pekný deň želám všetkým ~
V dnešnom článku vám ukážem zopár blogerských tipov na to, ako sa centrujú (čiže umiestňujú na stred) rôzne prvky stránky, blogu. Pokiaľ sú niektorí z vás nováčikovia alebo absolútne nerozumejú prvkom, ktoré sa vo vašej šablóne nachádzajú, nezúfajte. Dnes si práve niektoré podstatné z nich ukážeme. Samozrejme, existuje oveľa viac možností, ako sa s takýmito prvkami vyhrať a na internete takéhoto druhu informácií nájdete viac než dosť.

Hello my lovely little licornes ~ In today´s article, I would like to share with you a few blogging tips on how to centre different template elements. If you are a total newbie in "coding", do not be afraid! There are many different tutorials on the Internet as well. It just takes time to practise.

Slovenská verzia

Ako centrovať nadpis článku?

Nadpis článku sa nazýva post-title. Ide o "hlavný" nadpis, ktorý musíme definovať pomocou tagu h3. Ak chceme umiestniť nadpis do stredu, bude to vyzerať ako nižšie uvedený príklad. Pokiaľ by sme chceli nadpis vľavo/vpravo, miesto center napíšeme left / right.

h3.post-title{
text-align: center;}


Ako centrovať dátum príspevku?


Dátum má označenie .date-header. Ak ho chceme umiestniť na stred, musíme to zadefinovať rovnako, ako nadpis článku. Opäť platí, vľavo/vpravo left / right. To sa nemení nikdy.

.date-header {
text-align:center;}


Ako centrovať pätu článku?


Päta článku, resp. to, kde je uvedené meno autora, ikonky na zdieľanie, prípadne rubriky a iné sa označuje ako .post-footer.

.post-footer {
text-align: center;}


Ako centrovať "whole article, read more .."?

V tomto prípade mám na mysli text indikujúci pokračovanie článku, ktorý vás presmeruje na pokračovanie článku, resp. ho zobrazí celý. U mňa to je "whole article ..". V CSS ho nájdeme označený ako .jump-link.

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


Ako centrovať nadpisy v menu?

Názvy prvkov v bočnom menu.

.sidebar h2 {
text-align: center;}


Ako centrovať header na stred?

Header alebo to, čo ako prvé uvidia návštevníci vášho blogu, je dôležitým prvkom celej stránky. Pozíciu tohto prvku nastavíme nasledovne.

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}


Kde tieto kódy vložiť?


Otvorte si Blogger a prejdite do sekcie Šablóna. Následne kliknite na Upraviť kód HTML. Ak budete mať pred sebou kód, "roztvorte"/kliknite na čiernu šípku, ktorá sa nachádza pri čísle riadku vľavo <b:skin>. Otvorí sa vám sekcia modrého textu a kódov. Pomocou "CTRL+F" vyhľadajte }]]></b:skin>, prípadne iba </b:skin>. Pred tento kód môžete umiestniť akékoľvek vaše požiadavky a príkazy, len nezabudnite, že dve "}" nemôžu ísť za sebou. Zakončenie je vždy iba jednou :-)


English version

 How to center a post title?

The post title is something like the main title, which we must define as an "h3" tag. If you want to centre this text, you can use the code which is down below. If you want to put it on the side, you can change "centre" to "left / right".

h3.post-title{
text-align: center;}


How to center a date header?

Date of your post is a ".date-header". If you want to centre it, we can define it the same as a post title. If you want to put it on the side, then change the "centre" to "left / right".

.date-header {
text-align:center;}


How to center a post footer?

Post footer is a place, where things like the author´s name, icons for sharing, labels and others are placed.

.post-footer {
text-align: center;}

How to center a jump-link?

When you want to continue reading the whole article, you click on a perex indicator. It´s something that shows just a little information about your article. In the CSS it´s defined as ".jump-link".

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

How to centre the sidebar titles?

Sidebar titles are the titles of the components, widgets, placed in the sidebar.

.sidebar h2 {
text-align: center;}

How to center a header?

The header is the first thing which is shown to your visitors. It is truly important element on your blog. You can set its position by this:

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

Where to place the codes?

Open the Blogger, then click on the Template and Edit the HTML (or something like that). If you see the codes, click on the first black arrow, which is situated next to a number on the left side <b:skin>. There will be a lot of blue text appeared. After that look for "}]]></b:skin>" or "</b:skin>" only. Above it you can past any codes and components you would like to have in your own template :-)

10 comments:

  1. Super článek! S timhle se vždycky dlouho hledám. :)

    ReplyDelete
  2. ďakujem za super článok! hneď si idem nadpis vycentrovať aj ja :D :)

    ReplyDelete
  3. Skvělý článek, který poradí. :-)
    http://www.vmemzivote.blogspot.sk/

    ReplyDelete
  4. Super tipy, občas taky musím zapátrat co a jak, i když teď mám hotovou šablonu, tak to zrovna moc neřeším :-)

    ReplyDelete
    Replies
    1. Ja nemám rada vytvorené šablóny :c

      Delete
  5. wonderful post! have a great day! :D

    mfashionfreak♥blog

    ReplyDelete
  6. veľmi pekne si to napísala toto sa mu určite hodí aj ked ja mam pocit, že som na tieto veci strašne nešikovna :/

    pokiaľ chceš budem veľmi rada ak sa zapojiš do moje giveaway o dva nahrdelniky a náušničky :)
    Giveaway!!!!

    ReplyDelete
  7. super clanek, to se bude urcite hodit :) zvlast tem co s blogem zacinaji

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete

Thank you very much for every single lovely comment, visit nad follow ♥
Have a nice day ~
- - - - - - - - - - -
IG → @rosebonniee.1996