[BG/EN] Как да разкрасим статиите си? / How to beautify your articles?

This is a simple guide for newbies on how to understand better the platform, mostly prepared for the Bulgarian communities but it could be useful for everybody!

The English version is below the Bulgarian version!

Това е опростено ръководство за начинаещи как да разберат по-добре платформата, подготвено е предимно за българските общности, но може да бъде полезно за всички!

Английската версия е под българската!

От дълго време се занимавам с изработката на сайтове. В началото любителски в последствие професионално. Свикнала съм от край време когато пиша съдържание да ползвам различни клавишни команди или направо HTML и CSS код за да постигна различни ефекти в текста и оформлението му. Когато се регистрирах в платформата още с първата си статия се узорих. Ами тези команди/кодове не работеха, аз ги пишех, а в Изгледа на статията те не се появяваха. Публикувах първата си статия, но честно казано не останах впечатлена от нея, тя трябваше да е по-симпатична, но нищо и така се получи добре.

За следващите статии започнах свое собствено "разследване" къде какво работи. За проверка ползвах уроците от w3schools. Нормално не всички кодове работеха, но не се отказах. Намерих варианти за почерняне на текста, накланяне, почерняне и накланяне, уголемяване, смаляване на текст, подравняване в различни посоки и още малко от тези чудесии.

Но все пак не намирах как да разделя страницата на две части и във всяка да има нещо различно.

Какво направих за да го открия това заветно разделяне на текст?

Направих възможно най-лесното нещо. Първо издирих статия в която имаше такова разделяне и след това натиснах трите точки

Отваря се меню се избира История на Редакцията (Edits History)

Сега ще споделя с вас откритото

• Подравняване на текст (в ляво, в дясно или от край до край)

За да подравните текста си в ляво (по подразбиране е винаги на ляво) трябва да добавите следния код като замените текста за маймунките с вашия.

• • Как изглежда

• • Код

<div class="text-left">
Маймунки с шарени чорапи скачат на въже на една шарена поляна докато си пеят песнички за любовта.
</div>

• За да подравните текста си в дясно (по подразбиране е винаги на ляво) трябва да добавите следния код като замените текста за хипопотама с вашия.

• • Как изглежда

• • Код

<div class="text-right">
Весел хипопотам цамбурка в топлата вода на реката. Там той играе на воля. 
</div>

• За да центрирате текста си (по подразбиране е винаги на ляво) трябва да добавите следния код като замените текста за мечето с вашия.

• • Как изглежда

Малкото кафяво мече обичаше мед.

• • Код

<center>Малкото кафяво мече обичаше мед.</center>

"Разкрасяване на текста"

• Удебеляване на текст. Трябва да добавите следния код като замените текста за самолета с вашия.

• • Как изглежда

Лети високо самолет към неизвестна дестинация

• • Код

Вариант 1

**Лети високо самолет към неизвестна дестинация**

Вариант 2

<b>Лети високо самолет към неизвестна дестинация</b>

Вариант 3
Освен ръчно въведен код можете да ползвате и вградените функции

• Накланяне на текст. Трябва да добавите следния код като замените текста за гората с вашия.

• • Как изглежда

Колко красива била есента в гората

• • Код

Вариант 1

*Колко красива била есента в гората*

Вариант 2

<i> Колко красива била есента в гората </i>

Вариант 3

<em>Колко красива била есента в гората</em>

Вариант 4
Освен ръчно въведен код можете да ползвате и вградените функции

• Почерняне и накланяне. Трябва да добавите следния код като замените текста за морето с вашия.

• • Как изглежда

Не познавам човек, който да не обича морето!

• • Код

***Не познавам човек, който да не обича морето!***

• Подчертаване на текст. Трябва да добавите следния код като замените текста за зайчето с вашия.

• • Как изглежда

Малкото зайче, тръгнало на пътешествие из гората сам самичко.

• • Код

<u> Малкото зайче, тръгнало на пътешествие из гората сам самичко.</u>

• Задраскване на текст. Трябва да добавите следния код като замените текста за фотографа с вашия.

• • Как изглежда

Фотографа успя да заснеме как вълните се разбиваха в кея.

• • Код

<del>Фотографа успя да заснеме как вълните се разбиваха в кея.</del>

• Шрифтове

• Намаляване на големината на текста. Трябва да добавите следния код като замените текста за небето с вашия.

• • Как изглежда

_{Небето е толкова прекрасно днес}

• • Код

<sub>Небето е толкова прекрасно днес</sub>

• Добавяне на разделител. Добавя се сива хоризонтална линия, която разделя текста.

• • Как изглежда

---

• • Код
    Вариант 1

<hr>

Вариант 2 (3 минуса/тирета)

---

Вариант 3 (3 звездички)

***

• Добавяне на "Цитат". Трябва да добавите следния код като замените текста за обувките с вашия.

• • Как изглежда

Щастлива съм, че успях да намеря точно тези обувки!

• • Код
    Вариант 1

<blockquote>Щастлива съм, че успях да намеря точно тези обувки!</blockquote>

Вариант 2

>Щастлива съм, че успях да намеря точно тези обувки!

• Текст в кутия. Трябва да добавите следния код като замените текста за котките и кучетата с вашия

• • Как изглежда

Обикаляйки из града успях да заснема много улични котки и кучета.

• • Код

<pre>Обикаляйки из града успях да заснема много улични котки и кучета.</pre>

• Стигнахме и до заветното разделяне на страницата на 2 колони. Трябва да добавите следния код като замените текста с вашия, като там можете да добавите и снимка вместо текст. За съжаление след като се добави трябва да добавите разделител ( < /hr>, --- или *** ) или изображение с по-голяма ширина за да не се счупи текста и цялата последваща информация да се помести само в ляво или дясно.

• • Как изглежда

---

• • Код

<div class="pull-left">

Колко е прекрасно да се разхождаш сред природата!

</div> 
<div class="pull-right">

Зимата наближава и мравката започна да събира зимнина.
    
</div>

Всички тези описани кодове можете да ги използвате като ги добавите в "Откъси" в Ecency, Peakd или от където публикувате.

През Ecency

Нещо се обърка и не успях да сложа стрелка. Бутона в менюто се казва "Snippets" или ако ползвате платформата на български се нарича "Откъси". Оттам се отваря следния прозорец

Добавяте си кода от който имате нужда и натискате синия бутон. От изключителна важност е преди <div и след да има един празен ред, ако няма се чупи и текста се измества само от едната страна.
Както се вижда на втората снимка има голямо разстояние в кода, Вашия текст трябва да се добави в средата на празното пространство. Тоест трябва да има и вътре по един празен ред под и над текста.

I have been making websites for a long time. In the beginning amateur and later professionally. I am used to using different keyboard commands or straight HTML and CSS code to achieve different effects in the text and its layout. When I registered on the platform with my very first article I was amazed. Well these commands/codes weren't working, I was typing them and they weren't appearing in the Article View. I posted my first article, but honestly I wasn't impressed with it, it should have been more sympathetic, but never mind and it turned out fine.

For subsequent articles I started my own "investigation" into where what worked. For verification I used the tutorials from w3schools. Normally not all the codes worked, but I didn't give up. I found options for blackening text, tilting, blackening and tilting, enlarging, shrinking text, aligning in different directions, and some more of these wonders.

But I still couldn't find how to split the page into two parts and have something different in each.

What did I do to find that cherished separation of text?

I did the easiest thing possible. First I searched for an article that had such a separation and then I clicked the three points

A menu opens and selects Edits History

Now I will share with you what I found

• Align text (left, right or end to end)

To align your text to the left (default is always to the left) you need to add the following code replacing the text for the monkeys with yours.

• How it looks

• Code

<div class="text-left">
Monkeys with striped socks jump on a rope in a striped meadow while singing love songs to each other.
</div>

• To align your text to the right (it always defaults to the left) you need to add the following code by replacing the text for the hippo with yours.

-How it looks

• Code

<div class="text-right">
A cheerful hippopotamus chirps in the warm water of the river. There he plays at will. 
</div>

• To center your text (it always defaults to the left) you need to add the following code by replacing the text for the bear with yours.

-How it looks

The little brown bear loved honey.

• Code

<center>The little brown bear loved honey.</center>

"Beautify the text"

• Bolding text. You need to add the following code by replacing the text for the plane with yours.

• How it looks

Fly high plane to unknown destination

• Code

Option 1

**Fly high plane to unknown destination**

Option 2

<b>Fly high plane to unknown destination</b>

Option 3
In addition to manually entered code, you can also use the built-in functions

• Tilt Text. You need to add the following code by replacing the text for the forest with yours.

• How it looks

How beautiful was autumn in the forest

• Code

Option 1

*How beautiful was autumn in the forest*

Option 2

<i>How beautiful was autumn in the forest</i>

Option 3

<em>How beautiful was autumn in the forest</em>

Option 4
In addition to manually entered code, you can also use the built-in functions

• Blackening and tilting. You need to add the following code by replacing the text for the sea with yours.

• How it looks

***I don't know anyone who doesn't love the sea !

• Code

***I don't know anyone who doesn't love the sea!***

• Underline text. You need to add the following code by replacing the text for the bunny with yours.

• What it looks like

The little bunny, set off on a journey through the forest alone.

• Code

<u>The little bunny, set off on a journey through the forest alone.</u>

• Strikethrough text. You need to add the following code by replacing the text for the photographer with your own.

• What it looks like

The photographer was able to capture the waves crashing against the pier.

• Code

<del>The photographer managed to capture how the waves crashed into the pier.</del>

• Fonts

• Reduce text size. You need to add the following code by replacing the text for sky with yours.

• How it looks

_{The sky is so beautiful today}

• Code

<sub>The sky is so beautiful today</sub>

• Add a separator. Adds a gray horizontal line that separates the text.

• How it looks

---

• Code
  Option 1

<hr>

Option 2 (3 minuses/terets)

---

Option 3 (3 asterisks)

***

• Add "Quote". You need to add the following code by replacing the text about shoes with yours.

• What it looks like

I'm happy I was able to find these exact shoes!

• Code
  Option 1

<blockquote>I'm glad I found these exact shoes!</blockquote>

Option 2

>I'm happy I was able to find these exact shoes!

• Boxed text. You need to add the following code by replacing the text about cats and dogs with your

• What it looks like

Wandering around the city, I managed to capture a lot of street cats and dogs.

• Code

<pre>Wandering around the city I managed to capture a lot of street cats and dogs.</pre>

• And we came to the cherished splitting of the page into 2 columns. You need to add the following code by replacing the text with yours, and you can add a picture there instead of text. Unfortunately once added you need to add a separator ( < /hr>, --- or *** ) or an image with a larger width to prevent the text from breaking and all subsequent information being placed only on the left or right.

• How it looks

---

• Code

<div class="pull-left">

How wonderful it is to walk in nature!

</div> 
<div class="pull-right">

Winter is approaching and the ant has started to gather winter food.
    
</div>

You can use all these described codes by adding them to "Excerpts" in Ecency, Peakd or from wherever you post.

Via Ecency

Something went wrong and I couldn't put an arrow. The button in the menu is called "Snippets" or if you use the English platform it is called "Snippets". From there it opens the following window

You add the code you need and click the blue button. It is very important to have one blank line before <div and after , if there is none it breaks and the text is shifted to one side only.
As you can see in the second picture there is a large gap in the code, your text should be added in the middle of the blank space. That is, there should also be one blank line inside, below and above the text.

---

^{Originally posted on HIVE Blogchain - Хайв блогчейн. Hive blog powered by ENGRAVE.}