Смысл бродилки состоял в том, чтобы можно было найти записи по какой-то теме, не перелистывая многочисленные страницы с лентой записей или архив блога. Это было актуально, когда метки еще не выводились отдельным виджетом в блоге.
Сейчас все уже привыкли к виджету с метками и признали его удобным, но на заре его появления многие блоггеры были огорчены, что уютная и привлекательная бродилка, можно сказать, сердце блога, заменена на безликий виджет.
Я использую небольшую бродилку на своем личном блоге, хотя и хлопотно ее создавать. Она не только придает блогу индивидуальный колорит, но и служит нескольким практическим целям.
Во-первых, она улучшает навигацию блога, что хорошо как для посетителей, так и нравится поисковым роботам.
Во-вторых, она повышает количество ссылок на статьи блога.
А в-третьих, у нее есть один полезный эффект, который основывается на психологии читателей блога.
Очень многие люди ведут свои блоги для удовольствия, не заботясь ни о каких других причинах. Им нравится украшать свои блоги и создавать дополнительные удобства для своих читателей.
Бродилка же основана на использовании красивых кнопочек, которые можно разместить в любом месте и всегда иметь под руками интересующие тебя статьи. Это могут быть кулинарные рецепты, модели по вязанию, схемы вышивок, народные рецепты и многое другое.
Если вы дадите своим читателям коды кнопочек своей бродилки, а материалы вашего блога будут по-настоящему интересными, то некоторые из ваших читателей обязательно разместят эти кнопочки в своем блоге. Это увеличит количество внешних ссылок на ваш блог и добавит вам посетителей.
Есть еще один несомненный плюс у бродилки. Она может очень помочь нам в продвижении персонального бренда, когда мы начнем осваивать социальный маркетинг.
Как создается бродилка?
Вы должны создать таблицу, в ячейки которой вставить картинки-кнопочки, которые своим содержанием обозначают важные темы или разделы вашего блога.
Все сообщения по определенной теме надо объединить под каким-то одним ярлыком по этой теме. Затем надо сделать картинку-кнопочку ссылкой на страницу, которая выводит все сообщения с данным ярлыком.
Затем вы создаете вторую страницу с кнопочками и кодами на них. У меня эта страница называется: Полезные кнопочки. Затем в бродилке можно сделать ссылку на страницу с кнопочками, а можно просто вставить эту страницу в меню. У меня сделано и то, и другое.
Вот и все. Теперь о деталях ее создания.
Если вы дружите с Дримвивером или каким-то другим HTML - редактором, то можете без труда создать таблицу с картинками-кнопочками в них. Однако, если вы совсем новичок, то сделать это будет труднее, так как HTML-редактор нашего блога на Blogger довольно капризен и не любит, когда ему предлагается чужой код.
Он начинает менять его на свой, и в результате бродилку может так перекособочить, что я не смогу понять, как можно будет вам помочь. Поэтому я постараюсь объяснить, как сделать бродилку вручную, а вам придется приложить некоторое старание, чтобы добиться хорошего результата.
На самом деле сделать таблицу вручную не так уж трудно, надо просто понять ее код и быть внимательным при ее создании. Разделим нашу работу на несколько этапов.
1. Сначала объедините все сообщения на одну тему одним общим ярлыком. Если сообщений у вас не так уж и много, то сделайте по одному сообщению на каждый ярлык по той теме, которую хотите внести в бродилку.
Имейте в виду, что создавать ссылки, которые никуда не ведут, категорически нельзя. Поэтому не создавайте кнопок впрок, если сообщений по данной теме нет. Лучше потом добавите еще кнопочек в свою бродилку.
2. Подготовьте картинки, которые будут кнопочками в бродилке. Они не должны быть слишком большими, иначе никто не захочет размещать их в своем блоге.
3. Создайте сообщение, в котором опубликуете все приготовленные картинки. Это сообщение надо сначала опубликовать, а потом можно вернуть его в черновик. Это надо нам для того, чтобы получить адреса картинок в интернете.
4. Начинаем создавать таблицу. Делать это лучше всего в блокноте, потому что редактор сообщений будет нам постоянно мешать это делать.
Сначала давайте разберемся с тегами, которые будут составлять нашу таблицу.
Прежде всего надо знать, что теги всегда заключаются в такие скобки: < >.
Почти все теги парные, т.е. они состоят из обязательных двух элементов. Первый элемент показывает, что тег открывается, а второй - что он заканчивается. Отличает их только символ: /, например: <div>########## </div>.
Все, что находится на месте красных решеток, является содержанием тега, а то, что находится внутри скобок тега, является его атрибутами.
Только тег картинок <img> уже перестал быть парным и не имеет закрывающего тега.
Второе обязательное правило: если в коде используется не один тег, то все теги располагаются всегда зеркально.
Например, если первым открывающим тегом является тег таблицы, потом идет тег ссылки, а потом тег картинки, то закрывающие теги будут располагаться в обратном порядке. Например:
<table>
<a href="">
<img>
</a>
</table>
Зеленым цветом окрашены открывающие теги, синим - закрывающие.
Теперь о тегах таблицы:
<table width="600" border="0" cellspacing="5">
#########
</table>
Это теги таблицы с атрибутами внутри открывающего тега, которые показывают, что открывается таблица шириной 600 пикселей с границами между ячейками 0 пикселей, с расстоянием между ячейками 5 пикселей.
Красные решетки обозначают содержание таблицы. Закрывающий тег показывает, что таблица закончилась. Пошли дальше. Внутри таблицы бывают строки и столбцы.
Строки обозначаются тегами: <tr></tr>
Столбцы обозначаются тегами: <td></td>
Например такой код:
<table width="600" border="0" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Будет обозначать, что мы имеем дело с таблицей 600 пикселей в ширину, без видимых решеток ( атрибут border="0" обозначает, что решеток таблицы не видно. Если вы подставите другую цифру вместо 0, то решетки между ячейками таблицы будут видны и будут толщиной столько пикселей, сколько вы обозначите цифрой).
Расстояние между решетками таблицы 5 пикселей.
В этой таблице две строки. В каждой строке 3 столбца.
Крокозябра: обозначает ячейку таблицы. На место этой крокозябры и надо вставлять содержание ячейки. Впрочем, эта крокозябра появляется только при автоматическом создании таблицы с помощью HTML-редактора. Если вы будете составлять таблицу вручную, то никаких крокозябр не будет.
Теперь давайте посмотрим, как будет выглядеть ячейка нашей таблицы. Мы знаем, что в ней должна быть наша картинка-кнопочка, которая должна быть ссылкой на страницу с определенным ярлыком. Как все это будет выглядеть в HTML-коде?
<td>
<a href="#######" target="_blank">
<img src="#######" alt="кулинария, рецепты" width="200" height="117">
</a>
</td>
Вообще-то такой код будет написан в одну строчку, но я для удобства восприятия разделила его на строчки. На самом деле деление кода на строчки неважно для результата отображения. Если вы будете составлять код вручную, то деление каждого тега по строчкам поможет вам не ошибиться.
Итак, что означает этот код?
Мы видим ячейку таблицу, т.е. одну строку столбца таблицы. Внутри у него находится картинка, об этом нам говорит тег <img>
Атрибут src="" внутри тега <img> обозначает адрес в интернете, где хранится наша картинка.
По атрибутам alt="", width="" и heigt="" мы видим, что картинка обозначает тему: Кулинария, рецепты, что она имеет размеры 200 пикселей в ширину и 117 пикселей в высоту.
Далее мы видим, что вокруг нашей картинки есть тег ссылки: <a href="#######" target="_blank"> и </a>
Он говорит о том, картинка является ссылкой на страницу, которая находится по адресу, стоящему вместо красных решеток, и что эта страница раскроется в новом окне, о чем говорит атрибут target="_blank"
На таком языке разговаривает HTML- код нашей страницы с нашим браузером и поисковыми роботами. Если мы на этом же языке напишем собственный код, то браузер покажет на экране монитора все, что мы ему напишем. Вот собственно, и вся премудрость.
А теперь давайте посмотрим, как составить свою собственную таблицу и внести в нее картинки-кнопки, которые будут при этом еще и ссылками на нужные нам страницы.
1. Прежде всего отцентрируем таблицу, поставим по ее краям теги выравнивания по центру: <center></center>
2. Создадим открывающий и закрывающий теги самой таблицы. Внутри тегов пропишем ее характеристики: ширину и расстояние между ее ячейками. Вписывайте свои значения вместо красных решеток.
<table width="#####" border="0" cellspacing="###">
</table>
3. Создадим столько строк в таблице, сколько нам надо при помощи повторения тегов: <tr></tr>.
Каждая строка таких тегов будет обозначать новую строку в таблице. Привыкайте писать сразу открывающий и закрывающий теги, чтобы не ошибиться.
В образце я сделаю две строки, а вы делайте столько, сколько вам надо.
4. Внутри каждого тега, обозначающего строки таблицы, при помощи тегов <td></td> вставим столько столбцов таблицы, сколько нам надо.
В образце я вставлю по два столбца, а вы ставьте столько, сколько вам надо.
5. Внутри каждого столбца (ячейки) вставим теги наших будущих ссылок для картинок-кнопок при помощи тегов: <a href="####" target="_blank">$$$$$$ </a>
Я советую вам вставлять решетки в места, где должны быть адреса ссылок, чтобы потом, когда у вас будет много ячеек, вам было легче их находить.
Между открывающими и закрывающими тегами ссылок вставьте какой-нибудь заметный значок, например $$$ для удобства дальнейшей работы.
Для того, чтобы не ошибиться, я советую вам создать внимательно один такой тег, а потом копировать его во все ячейки таблицы.
Если вы все делали правильно, то у вас должна получиться примерно такая таблица. Напоминаю, делать ее лучше в блокноте.
<center>
<table width="#####" border="0" cellspacing="###">
<tr>
<td><a href="####" target="_blank"> $$$$$$</a></td>
<td><a href="####" target="_blank">$$$$$$ </a></td>
</tr>
<tr>
<td><a href="####" target="_blank">$$$$$$ </a></td>
<td><a href="####" target="_blank">$$$$$$ </a>-</td>
</tr>
</table>
</center>
А теперь заполняем ее:
6. На место значков $$$$ вы должны вставить заполненные теги ваших картинок. Эти заполненные теги находятся в HTML-коде того сообщения, где вы опубликовали все свои картинки.
Надо открыть это сообщение в редакторе, перейти в режим HTML и найти в коде теги ваших картинок. Выглядеть они будут примерно так:
<img alt="Как сохранить гармонию" border="0" src="http://4.bp.blogspot.com/-UTY0zOc8_I0/URPJd0uEpAI/AAAAAAAAFZA/SsYRsTzIDqM/s1600/koleso-jizni-1.gif.png" height="200" title="Гармония" width="181" />
Хоть эти теги и выглядят страшно, однако найти их нетрудно. Вы это уже умеете.
Открываете окно поиска кнопками CTRL+F, вводите в окно поиска тег <img, не закрывая его и, нажимая на слово: Следующее в окне поиска, продвигаетесь каждый раз к следующему тегу.
С какой картинкой вы имеете дело, вы можете определить по тегам alt="" и title="".
Единственное, что вам надо, это очень аккуратно скопировать все эти теги от открывающей скобки: < до закрывающей скобки: > и очень аккуратно вставить их в ячейки своей таблицы вместо значков: $$$$.
Когда все картинки будут вставлены в таблицу, останется последняя стадия: проставить адреса ссылок.
7. Откройте свой блог в новом окне браузера. Войдите в нужное сообщение и кликните на название нужного вам ярлыка внизу сообщения. Откроется страница с названием: Показаны сообщения с ярлыком:....
Скопируйте адрес этой страницы в адресной строке браузера и вставьте его в нужную ячейку своей таблицы вместо решеток: #####. Просто будьте очень внимательны, и все получится в лучшем виде.
Все. Ваша таблица с будущей бродилкой готова.
Проверьте ее хорошенько перед публикацией, потому что редактор исказит ее и вставит в нее столько своих тегов, что потом в редакторе страницы вам сложно будет что-либо понять и придется все начинать сначала.
8. Теперь вам надо сохранить коды кнопочек, которые вы хотите предложить вашим читателям для копирования.
Для этого надо скопировать все, что находится между открывающим тегом: <a href... для каждой нужной кнопочки и кончается закрывающим тегом: </a>
Вставьте эти фрагменты кодов в другой блокнот и подпишите, какую тему обозначает каждый код, чтобы не запутаться потом.
9. Войдите в аккаунт Blogger на вкладку: Страницы и создайте новую пустую страницу.
10. Перейдите на вкладку: HTML в редакторе страницы и вставьте в нее код вашей таблицы с бродилкой.
Напишите заголовок страницы, запретите комментарии и опубликуйте страницу.
10. На вкладке: Страницы кликните на: Сохранить расположение в правом верхнем углу страницы.
Все. Бродилка готова, идите, проверяйте результат.
Как создать страницу с полезными кнопочками и связать с ней бродилку ссылкой, думаю, вы уже умеете.
Сохраните блокнот с кодом бродилки, он нам еще понадобится, когда мы начнем работать в социальных сетях.
На следующих занятиях мы с вами продолжим наполнять наш блог полезными служебными элементами и повышать его удобство для посетителей или, как это называется модным словом: повышать его юзабилити.
Источник: Социальные сети и профессиональный блоггинг
Комментариев нет:
Отправить комментарий