воскресенье, 5 февраля 2012 г.

И еще два гаджета: полезный + милый + бонус)

Катя, приветик) Ну насчет нового гаджета ты погорячилась в эти морозные дни - ему сто лет в обед)))

Я, может быть, старый,
но полезный и милый
Опубликовав свой предыдущий пост я немножко порадовалась, но... судя по посещаемости и меткому комменту на нашем Адвего форуме - у того гаджета, действительно, длинная седая бородушка))) Теперь я буду более осмотрительна и не назову свои предложения "новыми". Один из них полезный, а другой - просто милый.

Оба можно заранее увидеть во всей красе на моем FarFarFriend блоге (обновление: вон слева ездит кнопка для заказа контента:). Но начнем по порядку...

Полезный гаджет - приклеенные кнопки почты, твиттера и чего угодно

Все видели кнопочки подписок, которые елозят сбоку, пока читатель скроллит текст. Наверное, все, кто хотел - уже сделали себе такие кнопки. Новость в том, что вчера я разобралась, как это сделать совершенно самим, установив свои иконки кнопок (ну, или те, которые нам нравятся, а не те, которые прикрутил кто-то). Также:
  • Можно совершенно произвольно разместить кнопки 
  • Можно сделать одну великолепную кнопку или целый паровоз полезных кнопулечек
  • Можно налепить кнопок и слева, и справа
  • Можно сделать такое ползающее за читателем меню блога
  • Можно разместить вообще не кнопку, а, например, ваше фото, которое будет преследовать читателя повсеместно, куда бы он не кинулся...
Короче говоря, я обрела полную свободу в приклеивании полезных кнопок и спешу поделиться ею с вами! Приступаем. Вот код, который вставляется на страницу через обычный инструмент Блоггера "открытый код" (во вкладке Дизайн > добавить гаджет):

<br/><a style="display:scroll;position:fixed;bottom:200px;right:1px;" href="http://www.twitter.com/FarFarFriend" target="_blank"><img style="border:0;" src="http://img-fotki.yandex.ru/get/4606/14403710.0/0_68f3a_ea5a8175_S.jpg"/></a>

Теперь рассматриваем все по-порядку:

1.<br/><a style="display:scroll;position:fixed;bottom:200px;right:1px;" 

bottom:200px; - высота размещения кнопки от нижней границы экрана. Можно произвольно менять эту величину. Это понадобится, чтобы разместить несколько кнопок. 
right:1px; - место приклеивания (справа в 1 пикселе от края). Если хотите переклеить кнопку налево - пишите там left. Если хотите чуть отступить от края - меняйте количество пикселей.

2.href="http://www.twitter.com/FarFarFriend" target="_blank">

Здесь мы видим адрес, куда наша кнопка "посылает" того, кто имел неосторожность на нее нажать. В данном случае - это твиттер для моего англоязычного блога. Если будете делать кнопку Follow - просто поменяйте имя твиттер-аккаунта http://www.twitter.com/... Если же хотите, чтобы кнопка вела куда-то еще - ставьте соответствующий адрес. Если хотите сделать кнопку E-mail, то пишем так href="mailto:ваш e-mail адрес"

3.<img style="border:0;" src="http://img-fotki.yandex.ru/get/4606/14403710.0/0_68f3a_ea5a8175_S.jpg"/>
</a>

http://img-fotki.yandex.ru/get/4606/14403710.0/0_68f3a_ea5a8175_S.jpg - наконец адрес картинки кнопки. Это адрес моей картинки для кнопки Follow (которую вы видите слева). Можете использовать ее - не меняйте тогда адрес. Можете загрузить свою картинку на любой сервис по хранению фото. Например на Яндекс-фотки. После загрузки получаем код картинки и вставляем на место адреса:
<img style="border:0;" src="ваш адрес картинки"/></a>

Так мы разобрались с одной кнопкой, а как сделать две и больше?!

Да очень просто! Вот так выглядит код для двух кнопок на FarFarFriend:

<br/><a style="display:scroll;position:fixed;bottom:250px;right:1px;" href="http://www.twitter.com/FarFarFriend" target="_blank"><img style="border:0;" src="http://img-fotki.yandex.ru/get/4606/14403710.0/0_68f3a_ea5a8175_S.jpg"/></a>

<br/><a style="display:scroll;position:fixed;bottom:115px;right:1px;"
href="mailto:farfarfriend.katyaru@gmail.com" target="_blank">
<img style="border:0;" src="http://img-fotki.yandex.ru/get/4402/14403710.0/0_68f54_74a63ae2_S.jpg"/></a>

Основное, что тут важно соблюсти - высоту размещения кнопок. Т.е. я задрала кнопку Follow на bottom:250px; а кнопка E-mail располагается ниже на bottom:115px; Между ними нет расстояния, но можно его сделать, изменяя уровни расположения кнопок. К тому же, вы можете захотеть использовать совсем другие иконки для кнопок - соответственно, у них будет другая высота. Поэтому придется подкорректировать уровни приклеивания кнопок. Вот!

Бонус для моих подписчиков: за символические 5 wmz нарисую кнопки для вашего блога, подходящие по дизайну, цветам и размерам!

Милый гаджет - переливающиеся линки

Наведя курсор на любой линк на блоге FarFarFriend, вы заметите, что он начал переливаться всеми цветами радуги. Скажу сразу - на светлых фонах это смотрится не очень (попробовала здесь, на Копирасте - мне не понравилось). А на темных фонах - может пригодиться. Поэтому, просто и без дальнейших рассусоливаний, открываем редактирование HTML блога и сразу под тегом <head> вставляем следующий код:
<script language='javascript' src='https://sites.google.com/site/farixsan/javava/FarixsanRainbow.js'/>

Усё! Дело сделано.



8 комментариев:

  1. В общем развлекаться с сайтом можно бесконечно :)))

    ОтветитьУдалить
    Ответы
    1. :) я не знаю блоггеров, которые бы не грешили этим:)))

      Удалить
  2. Ответы
    1. Этот комментарий был удален автором.

      Удалить
  3. я чета не поняла с кнопками? Это что, вот та синенькая фигулинка, что прямо к тексту прилепилась?

    ОтветитьУдалить
    Ответы
    1. На этом блоге слева ползает рекламка с лисой - это тоже кнопка, которая отправляет прямо на "мыло". Но можно, что угодно и где угодно прилепить, чтоб куда угодно вело)))

      Удалить
  4. Катюша, ты просто Умница! Такую красоту да так подробно расписала =)
    И заметь, я ни словечка не произнесла о морозах и возрасте гаджетов)))
    Хорошего вечера и приходи на ДР... завтра, тортик и шампанское обещаю!
    С наилучшими пожеланиями ♥Lana♥

    ОтветитьУдалить
    Ответы
    1. Спасибо! Обязательно загляну!

      В нашем случае (с морозами и возрастом) такая "критика" (пишу в кавычках, так как это даже и не критика была, хи-хикалка какая-то:) пошла на пользу - получилась целая статья! Почаще бы так!

      Удалить