Blogging tips | How to center Blogger elements

Ako centrovať prvky v Bloggeri

Ahojte zlatíčka,
v dnešnom článku vám ukážem, ako sa centrujú (dávajú na stred) rôzne prvky (nadpisy, stránky a pod.). Pokiaľ sú niektorí z vás nováčikovia alebo absolútne nerozumiete prvkom, ktoré sa vo vašej šablóne nachádzajú, dnes si niektoré z nich pomenujeme. Samozrejme, existuje veľa možností, ako sa s prvkami vyhrať a na internete toho nájdete viac než dosť.

Hello sweeties ~ Today I am gonna show you some tricks which you can use in your blog template. I will be talking mostly about centering the different template elements and I am gonna show you how to center for example post title, sidebar title and anothers. Of course, you can find another codes and tips for that on the Internet.

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.

How to center a post title?
Post title is something like a main title, which we must define a "h3" tag. If you want to center this text, you can use the code which is down below. If you want to put it on the side, you can change the word "center" to "left/right".

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

Ako centrovať dátum príspevku?
Dátum má označenie .date-header. Opäť, 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.

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

.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 a pod., sa označuje .post-footer.

How to center a footer?
Footer is a place, where the things like author´s name, icons for sharing and others are placed. This element is a ".post-footer".

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

Ako centrovať "whole article, read more .."?
V tomto prípade mám na mysli text pred perexom, ktorý vás hodí na pokračovanie článku vtedy, ak naň kliknete. U mňa to je whole article ... V CSS ho nájdeme označený ako .jump-link.

How to center a jump-link?
When you want to continue reading the whole article, you use a perex. It´s something that shows just a little information about your article. In the CSS it´s defined like ".jump-link".

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

Ako centrovať nadpisy v menu?
Resp. názvy widgetov ako sú napr. u mňa About me, Licorniatka a tak ďalej.

How to center the sidebar titles?
How to center the titles of your sidebar widgets?

.sidebar h2 {
text-align: center;}

Ako centrovať header na stred?
Header, alebo to, čo prvé uvidia návštevníci vášho blogu, je dôležitým prvkom celého blogu, respektíve stránky. Pozíciu nastavíme pomocou tohoto:

How to center a header?
Header is the first thing which is shown to your visitors. It is a really 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;}

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 prvú čiernu šípku, ktorá sa nachádza pri čísle riadku vľavo <b:skin>. Otvorí sa vám sekcia modrých kódov a hľadajte }]]></b:skin>. Pred tento kód môžete umiestniť všetky kódy, len nezabudnite, že dve "}" nemôžu ísť za sebou. Nemuselo by vám to potom fungovať :)

Where to place these 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 a number on the left side <b:skin>. New window will be opened with a lot of blue codes. After that look for }]]></b:skin>. Then past the codes which you want to have in the template before it.

Wanna read more like this?
→ How to prepare your blog for the new year?
→ How to edit your blog headings?
→ Tips for better blogging