[Tutorial] Организация коллективных блогов

Навеяно Vedont ом

хочешь помочь – пиши в личку

---

В данном посте, рассматривается использование HTML на Табуне для быстрой навигации по блогу.

---

Проблема блогов

У коллективных блогов чаще всего возникает проблема с новичками. И каждый раз появляются посты, в которых пытаются снизить порог вхождения в коллектив, за счет различных инструкций и лекций. Но такие посты на Табуне как правило пропадают из вида. Достаточно недели, чтобы о посте забыли, а новички повторяли один и тот же вопрос — где, что, когда?
Выявив проблему, мы попробуем решить её. Для этого мы реализуем динамические посты, вместо статичных.

Используем не популярные функции табуна

Многие пользователя Табуна не используют ~50% функционала портала. Из-за этого в IT-Pony не редко взлетают различные скрипты-расширения для браузеров. Но даже эти скрипты необходимо еще найти, поэтому мы сделаем единую форму для навигации пользователя по блогу. Для этого мы реализуем в полную меру встроенный редактор и не популярную вкладку — О блоге.
У каждого блога есть одна особая вкладка. После разговора с idem_id , меня убедили в том, что данная вкладка интересна пользователям и не проходят мимо нее. А значит попробуем ее задействовать в нашем деле.

При ее нажатии, мы наблюдаем простое информативное сообщение: Краткое описание, дата создания блога, администраторы, модераторы и так далее. Должен заметить, что описание блога так-же используется, при написании блога. Оно отображается справа от формы редактирования поста.

Создаем интерактивные меню

Администраторы блогов давно могли заметить, что редактор частично поддерживает HTML, а значит могли разнообразить свои посты и «О блоге» по разному. Для примера, мы создадим интерактивное меню для нашего специального блога. Конечно нам стоит научится рисовать кнопочки :3 Но мы рассматриваем не рисование эллипсов и квадратов, а написание таких меню. Поэтому мы честно украдем возьмем готовые кнопочки.
Готовые кнопочки :3

А вот тут можно найти кнопочки, которые мы сейчас сделаем в специальном блоге — imgur.com/LTOz15j,BDoBMvn,A5zE3xn

Редактирование блога

Перед тем как редактировать, необходимо понять как минимум два HTML-тега, которые мы будем использовать для создания меню блога.

• <img src="Путь до изображения"/>

• <a href="Адрес сайта"> Объект или текст </a>

Первый тег используется для вставки изображений, который вы давно знаете по кнопочке в редакторе. Второй же используется для создания гиперссылки. Гиперссылка — это ссылка на сайт, изображение, а по сути на что угодно. Эти два тега, мы будем использовать для создания меню. Для интересующихся, лучше стоит изучить атрибуты и другие теги. В них можно реализовать такие свойства как особый размер изображения или выравнивание без span aligh. Например лого HTML 5 сделан в один тег.

<img src="http://i.imgur.com/jpXRhdt.png"  alt="" height="200" align="center"/>

Приступим же к редактированию пункта «О блоге». Для простоты меню и редактирования, мы сделаем вертикальный список кнопочек. Чтобы это сделать, достаточно просто вставить изображение наших кнопочек через Enter.

<img src="http://i.imgur.com/AcyS0tN.png"/>
<img src="http://i.imgur.com/LTOz15j.png"/>
<img src="http://i.imgur.com/A5zE3xn.png"/>

Примечание: Enter — это не совсем правильно использование переноса строки в редакторе. Для переноса строки используется тег br
Если мы сейчас попробуем создать пост для блога, то мы увидим честно выстроенные кнопочки.
Результат
Конечно, клавиши не рабочие, так как мы лишь вставили изображения. Для их функциональности, мы должны сделать гиперссылки на изображения. Для этого нужно поместить тег img в тег a href. Для наших клавиш, я буду использовать следующие ссылки на

• tabun.everypony.ru/profile/Sparin/ — Sparin
• tabun.everypony.ru/page/faq/ — FAQ
• minecraft.everypony.ru/ — Minecraft

Если вы правильно поняли конструкцию тега a href, то у вас должно получиться примерно следующее.

<a href="http://tabun.everypony.ru/profile/Sparin/" ><img src="http://i.imgur.com/AcyS0tN.png"/></a>
<a href="http://tabun.everypony.ru/page/faq/" ><img src="http://i.imgur.com/LTOz15j.png"/></a>
<a href="http://minecraft.everypony.ru/" ><img src="http://i.imgur.com/A5zE3xn.png"/></a>

Чтобы открыть ссылку в новой вкладке, необходимо после href="" написать target="_blank"

<a href="http://tabun.everypony.ru/profile/Sparin/" target="_blank"><img src="http://i.imgur.com/AcyS0tN.png"/></a>
<a href="http://tabun.everypony.ru/page/faq/" target="_blank"><img src="http://i.imgur.com/LTOz15j.png"/></a>
<a href="http://minecraft.everypony.ru/" target="_blank"><img src="http://i.imgur.com/A5zE3xn.png"/></a>

Вывод

Благодаря данному меню, не обязательно заносить каждый пост в избранное или писать новые посты с обновлением старой информации. Такие ссылки позволяют постам быть вечно актуальными, находясь всегда на видном месте. На примере Гильдии Переводчиков, из-за которой был написан данный туториал, можно распределить во вкладке «О блоге» следующие клавиши

• Программы
• Шрифты
• Словари
• Рекомендации
• Гайды
• FAQ

Эти клавиши помогут понизить порог вхождение не на временной основе, а на постоянной. Новичок пришел, увидел яркие клавиши, научился.

Не бойтесь пользоваться кнопочками блога, на котором мы основывались. Он проживет еще длительное время, чтобы закрепить материал данной статьи.

---

Радио

как слушатьПрямые ссылки: (открывать прямо в окне браузера)
*.aac mono (48 kbps) | *.mp3 (128 kbps) | High Quality *.mp3 (320 kbps)

Плейлисты: (открывать в проигрывателях)

Low Quality aac 48 kbit/s
*.m3u | *.xspf

mp3 128 kbits
*.m3u | *.xspf

High Quality mp3 320 kbit
*.m3u | *.xspf

Слушать прямо с сайта:

Страничка для мобильных устройств