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


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


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


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

Например, у меня это теги: #кукусянаспорте для постов о спорте или #дашаthedeveloper для постов вроде этого.


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



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



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


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



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


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


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

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

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

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

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

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

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

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

<hr/><center><a href="https://goldvoice.club/created/ru--kukusinyreczepty"><img src="http://i.imgur.com/OXCc4SK.jpg" alt="Рецепты" /></a><a href="https://goldvoice.club/created/ru--kukusyashxet"><img src="http://i.imgur.com/Ov6KXzd.jpg" alt="Шитьё" /></a><a href="https://goldvoice.club/created/ru--kukusyaputeshestvennicza"><img src="http://i.imgur.com/efow3C1.jpg" alt="Путешествия" /></a><a href="https://goldvoice.club/created/ru--kukusinysovety"><img src="http://i.imgur.com/YW8TnR3.jpg" alt="Советы" /></a><a href="https://goldvoice.club/created/ru--kukusyanasporte"><img src="http://i.imgur.com/C3l8WyJ.jpg" alt="Спорт" /></a><a href="https://goldvoice.club/created/ru--kukusyachitaet"><img src="http://i.imgur.com/L7qtmtn.jpg" alt="Книги" /></a><a href="https://goldvoice.club/created/ru--kukushonok"><img src="http://i.imgur.com/1h4HGvV.jpg" alt="Антошка" /></a><a href="https://goldvoice.club/created/ru--dashazyedeveloper"><img src="http://i.imgur.com/aakAcqe.jpg" alt="ДашаTheDeveloper" /></a><a href="https://goldvoice.club/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://goldvoice.club/@qqc"><img src="https://i.imgur.com/wRfVRgp.gif" alt="Подписаться" /></a><a href="https://goldvoice.club/@qqc"><img src="http://i.imgur.com/aLW8zqO.jpg" alt="@qqc" /></a> <a href="https://goldvoice.club/created/ru--urokiqqc"><img src="http://i.imgur.com/SSNE6XQ.jpg" alt="Все уроки" /></a><a href="https://goldvoice.club/created/ru--urokiqqcfrontend"><img src="http://i.imgur.com/Y412Ypf.jpg" alt="Фронтенд" /></a><a href="https://goldvoice.club/created/ru--urokiqqcjavascript"><img src="http://i.imgur.com/g8g4jKg.jpg" alt="JavaScript" /></a>/

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


/>
РецептыШитьёПутешествияСоветыСпортКнигиАнтошкаДашаTheDeveloperЯ
ИнстаграмТелеграмГитхабПодписаться@qqc
Все урокиФронтендJavaScript
a hres://golos.io/~witnesses"><" />

РецептыШитьёПутешествияСоветыСпортКнигиАнтошкаДашаTheDeveloperЯИнстаграмТелеграмГитхабПодписаться@qqcВсе урокиФронтендJavaScript


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


Комментарии 6


Чтобы читать и оставлять комментарии вам необходимо зарегистрироваться и авторизоваться на сайте.

Моя страницаНастройкиВыход
Отмена Подтверждаю
100%
Отмена Подтверждаю
Отмена Подтверждаю