Делаем свою собственную кнопку в блоге

Ммм, девочки, какой я штуке научилась только что... Не могу не поделиться :)

Наверняка вы не раз обращали внимания в блогах всяких крутых магазинов или не менее крутых рукодельниц, что на боковой панельке висит красивая картинка с названием магазина, к примеру, а под ней - код для вставки в ваш собственный блог. Если вы его себе копируете и вешаете на страницу - у вас в блоге появляется баннер магазина или другого блога. Это называется еще Grab Button - "хватательная кнопка", то есть кнопка, которую ваши читатели могут схватить и утащить к себе в блог :) Чтобы поделиться со своими друзьями ссылкой на вас, ненаглядных. Хотите себе такую? :)

К примеру, вот что получилось у меня:

<a border="0" href="http://made-by-yolka.blogspot.com/" target="_blank"><img src="http://i1086.photobucket.com/albums/j450/Yolka2802/mybutton1.jpg" border="0" alt="Photobucket" /></a>> 

Код под картиночкой можно скопировать себе - и убедиться, что при его вставке у вас появится эта самая картинка, а при клике на нее вы вернетесь в мой блог.  Вот так:

Конечно, картинка сама не супер, но я делала кнопку для примера и поэтому взяла что под руку попалось :)

Итак, начинаем творить собственную кнопку :)

Я действовала по инструкции, которую нашла тут Вообще, этот блог поражает количеством красивых и полезных штук! Но, опять же, переведу инструкцию на русский для тех, кому это необходимо.

1. Первое, что нужно сделать - это сотворить картинку, которая и будет служить вам кнопкой. Я сделала первое, что пришло в голову - взяла фото своей открытки, обрезала, уменьшила и добавила свое имя. Все это делала с помощью фотошопа, и если об этом этапе нужно написать подробнее - обращайтесь. Вообще, в фотошоп я "чайник", умею только самое простое, так что над дизайном картинки стоит еще поработать :)

2. Картинку нужно уменьшить до 200 пикселей в ширину (тоже можно в фотошопе)

3. Теперь необходимо загрузить нашу красивую картинку на любой сайт, предназначенный для загрузки изображений. На shabbyblogs предлагают сайт http://photobucket.com/, я им и воспользовалась. Он на английском, но регистрация элементарная, а пользоваться им очень удобно, позже скажу почему. Итак, загружаем картинку на сайт.

4. Открываем новую вкладку в браузере и переходим в панель инструментов нашего блога. Дальше выбираем "Дизайн", а там - "Элементы страницы". Жмем "Добавить гаджет" и выбираем "HTML/Java script".

5. В пустое окошко, которое нам открылось, копируем вот что:

<img src="http://YOURBUTTONLOCATION.jpg" /> <br /> <textarea style="text-align:center" rows="4" cols="22"><a border="0" href="http://YOURBLOGADDRESS.com" target="_blank"><img src=http://YOURBUTTONLOCATION.jpg></a></textarea>

Этот код я тоже взяла в блоге Shabby Blogs

6. Оставляем пока это окошко открытым и возвращаемся на вкладку сайта, куда загрузили фотографию. Нам нужно добыть ее адрес.
Для Photobucket все очень просто. Вы выбираете свое фото в созданном альбоме, и вам сразу предалгают кучу ссылок для его вставки куда угодно:

Поле со ссылками я выделила красным. Щелкните мышкой по строчке, рядом с которой написано HTML code, и ссылка автоматически будет скопирована.
7. Теперь вернитесь к коду, который вы вставили в новый гаджет своего блога. Там дважды повторяется такая фраза: http://YOURBUTTONLOCATION.jpg Ее нужно полностью заменить на ссылку с вашей фотографией (которую вы только что скопировали на загрузочном сайте)
8. Теперь нам нужно заменить еще одну строчку. Вот эту: http://YOURBLOGADDRESS.com - на адрес вашего блога :)
9. Собственно, это всё. Жмите "сохранить" и получайте свою кнопку на боковой панели :)

Не знаю, пригодится ли вам, но штука занятная. Ее, к примеру, можно предлагать копировать читателям, если вы разыгрываете конфетку. Будете точно уверены, что на вас сделали прямую ссылку.
Если что-то непонятно - с радостью разъясню :)