Навигация по вашему блогу. Инструкция и советы от @qqc

Почти три месяца назад я уже писала пост о том, как сделать навигацию по своему блогу. Но ещё тогда сразу стало ясно, что я объяснила совсем непонятно. Многие продолжали спрашивать совета, кто-то просто не заметил тот пост. Сегодня, обновляя собственное меню, я решила сделать и небольшой урок по созданию навигации для своей странички.

🌸 Уникальные теги

Во-первых, вы должны заранее продумать свои теги. И, по возможности, расставить их в уже созданных постах. Ваши теги должны быть уникальными, такими, чтобы никто, кроме вас не додумался их использовать.
Например, у меня это теги: #кукусянаспорте для постов о спорте или #дашаthedeveloper для постов вроде этого.

🌸 Сделать макет

Я задала размер - 720 на 200 (хотя на анимации я указала 700, но все мои категории не уместились, и пришлось увеличить немного). Главное - не перестараться: если вы укажете размер больше, чем размер контейнера, в котором отображается ваш пост, то все ваше меню может некрасиво разъехаться.

🌸 Нарезать макет

Для меня эта часть самая неприятная - слишком много раз приходится повторять одно и то же действие. Но на третьем элементе доходит до автоматизма - выделить область, скопировать совмещенные данные, создать новый документ, вставить и сохранить (конечно, я использую горячие клавиши).

🌸 Загрузить изображения

Теперь нам нужно загрузить изображения на какой-нибудь хостинг. Я храню обычно на imgurе, но знаю, что недавно @rpcmp сделали специальный хостинг изображений для Голоса.

Если вы хотите создать анимацию, вы можете сделать это прямо в фотошопе (у меня это не работает) или создать с помощью какого-нибудь сервиса (я использовала gifmaker.

🌸 Всё это собрать

Если вы видели мои уроки по HTML, то, наверное, знаете, как делать ссылки и добавлять изображения.

Здесь же у нас будет ссылка, внутри которой изображение:

<a href="https://golos.io/created/ru--ваштег"><img src="ссылка на изображение" alt=""/></a>

Если вы пользуетесь Markdown, логика та же:

[![](ссылка на изображение)](https://golos.io/created/ru--ваштег)

😳😅 Вот такой код я вставляю в конце каждого своего поста:

<hr/><center><a href="https://golos.io/created/ru--kukusinyreczepty"><img src="http://i.imgur.com/OXCc4SK.jpg" alt="Рецепты" /></a><a href="https://golos.io/created/ru--kukusyashxet"><img src="http://i.imgur.com/Ov6KXzd.jpg" alt="Шитьё" /></a><a href="https://golos.io/created/ru--kukusyaputeshestvennicza"><img src="http://i.imgur.com/efow3C1.jpg" alt="Путешествия" /></a><a href="https://golos.io/created/ru--kukusinysovety"><img src="http://i.imgur.com/YW8TnR3.jpg" alt="Советы" /></a><a href="https://golos.io/created/ru--kukusyanasporte"><img src="http://i.imgur.com/C3l8WyJ.jpg" alt="Спорт" /></a><a href="https://golos.io/created/ru--kukusyachitaet"><img src="http://i.imgur.com/L7qtmtn.jpg" alt="Книги" /></a><a href="https://golos.io/created/ru--kukushonok"><img src="http://i.imgur.com/1h4HGvV.jpg" alt="Антошка" /></a><a href="https://golos.io/created/ru--dashazyedeveloper"><img src="http://i.imgur.com/aakAcqe.jpg" alt="ДашаTheDeveloper" /></a><a href="https://golos.io/created/ru--kukusyaosebe"><img src="http://i.imgur.com/nfhnD6A.jpg" alt="Я" /></a> <a href="https://www.instagram.com/qqcky/"><img src="http://i.imgur.com/rGuftRH.jpg" alt="Инстаграм" /></a><a href="https://telegram.me/qqcky"><img src="http://i.imgur.com/1WDvRdd.jpg" alt="Телеграм" /></a><a href="http://qqcky.github.io/dbaklanova/"><img src="http://i.imgur.com/Xoduwkt.jpg" alt="Гитхаб" /></a><a href="https://golos.io/@qqc"><img src="https://i.imgur.com/wRfVRgp.gif" alt="Подписаться" /></a><a href="https://golos.io/@qqc"><img src="http://i.imgur.com/aLW8zqO.jpg" alt="@qqc" /></a> <a href="https://golos.io/created/ru--urokiqqc"><img src="http://i.imgur.com/SSNE6XQ.jpg" alt="Все уроки" /></a><a href="https://golos.io/created/ru--urokiqqcfrontend"><img src="http://i.imgur.com/Y412Ypf.jpg" alt="Фронтенд" /></a><a href="https://golos.io/created/ru--urokiqqcjavascript"><img src="http://i.imgur.com/g8g4jKg.jpg" alt="JavaScript" /></a></center>

А вот, что получается:

---

🌸 Надеюсь, этот пост будет вам полезен! 🌸