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

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

Eva-Lana  написала  вчера в 19:09  в ответ на #3216

Я, может быть, старый,
но полезный и милый

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

Оба можно заранее увидеть во всей красе на моем 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'/>

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