Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  вторник, марта 29, 2011  

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

Чтобы отличиться и придать своему блогу оригинальности, можно заменить эти дьявольские отметки, например, на изображения красочных ссылок на последующие страницы или анимированные переходы к другим сообщениям блога. Что-то похожее вы можете посмотреть здесь.

Остается провести небольшие изменения непосредственно в коде html вашего шаблона.
На странице "Дизайн" переходим во вкладку "Изменить HTML" и отмечаем галочкой "Расширить шаблоны виджета". В диверсии будет участвовать три секции навигации. А именно, ссылка на Главную страницу, ссылка на Предыдущие сообщения, ссылка на Следующие сообщения. Заменим каждую из них на собственную картинку или анимированное изображение, обычно в формате gif. Перед изменениями рекомендую сохранить шаблон.

Альтернативный переход на Главную страницу.

Находим код в шаблоне:
<data:homeMsg/>
и меняем его на изображение:
<img src="адрес изображения" alt="Главная страница" width="ширина изображения" height="высота изображения"/>
куда вместо участка кода адрес изображения вписываем адрес вашей картинки. Вместо слов ширина и высота изображения указывайте размеры картинки. Чтобы изображения в навигации гармонично вписались в дизайн вашего блога, прописывайте значения аналогично для всех картинок.

Альтернативный переход к Следующим сообщениям.

Находим код:
<data:newerPageTitle/>
Снова меняем его на изображение:
<img src="адрес изображения" alt="Следующие сообщения" width="ширина изображения" height="высота изображения"/>
Здесь с выделенными значениями поступаем как было описано выше.

Альтернативный переход к Предыдущим сообщениям.

Продолжаем поиски:
<data:olderPageTitle/>
Также безжалостно изменяем на изображение:
<img src="адрес изображения" alt="Предыдущие сообщения" width="ширина изображения" height="высота изображения"/>
Прописываем адрес картинки и указываем значение высоты и ширины.

Чтобы совсем соригинальничать, можете заменить обозначения подсказок к картинкам навигации. Для этого вместо слов "Главная", Следующие сообщения и "Предыдущие сообщения" в теге alt вы можете вписать собственные фразы, но по-прежнему понятные читателю.

После всего сохраните шаблон и возрадуйтесь. А мне пора кормить крокодилов в моем желудке.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.