2/20/2011

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

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

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

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

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

Итак, начинаем творить собственную кнопку :)
Я действовала по инструкции, которую нашла тут Вообще, этот блог поражает количеством красивых и полезных штук! Но, опять же, переведу инструкцию на русский для тех, кому это необходимо.
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. Собственно, это всё. Жмите "сохранить" и получайте свою кнопку на боковой панели :)

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

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

  1. блин, ну я наверное тогда самый тупой чайник) я вообще ничего не понимаю( про дизайн с шаблонами почитала понятнее было для меня и легче, ох, как же не легка доля скрапбукера!)

    ОтветитьУдалить
  2. Ну да, здесь сложнее чуть-чуть)) что конкретно непонятно, давай объясню?

    ОтветитьУдалить
  3. ох, решила пока оставить эту идею с кнопкой, займусь другими , тем более ты уже выложила)))) а за этой вернусь с вопросами)

    ОтветитьУдалить
  4. спасибо большое,нигде не могла понять,а здесь все понятно написано.У меня получилось!)

    ОтветитьУдалить
  5. спасибо, я воспользовалась. очень круто

    ОтветитьУдалить

Спасибо за комментарий!
Не забудьте вернуться на эту страничку за ответом :)