Как сделать кнопку с кодом для блога

Вы уже видели мою хорошенькую новую кнопочку вон там, справа вверху? Вам придется согласиться, что она хорошенькая, потому что она мне нравится и я очень долго с ней мучалась, поэтому я не готова выслушивать критику 🙂

Когда я только собралась ее делать, я задала поиск в Яндексе «как сделать кнопку для блога сайта с кодом» и мне не попалось вообще ничего подходящего. Наверное, я просто не знаю, как это правильно называется по-русски, у меня частенько такая проблема бывает 🙂
Потом я загуглила «blog button with code tutorial» и он мне выдал целую кучу. Мне пришлось покопаться в этой куче, и после четвертого объяснения и двадцатой попытки у меня получилось то, что хотелось.

Я подумала, что, если я так мучаюсь, наверное, есть и другие люди, которые не умеют делать кнопки и хотят научиться. Поэтому я решила попытаться хоть чем-то помочь.
Больше всего мне понравилось объяснение на блоге Iceydesigns. У нее самый простой и короткий код, с которым-то у меня, наконец, все и получилось. Поэтому я не буду выдумывать велосипед, а отошлю вас на ее блог, а сама прокомментирую то, что мне показалось наиболее трудным.

Итак, шаг 1. Для кнопочки вам нужно изображение. Если вы знакомы с графическими редакторами, это не будет сложно, обработайте любую фотографию. Я увековечила свою махровую петунию:)

Я пользуюсь GIMP и iPiccy — хорошая онлайн программа. Размер советуют брать 125*125 пикселей, но это не железное правило, но во всяком случае шириной не больше 150 пикселей. Если вы не дружите с графическими редакторами, не отчаивайтесь, для вас тоже хорошие новости — автор блога предлагает несколько бесплатных шаблонов для кнопки! Вам нужно просто скопировать картинку. Хотя в редактор все-таки придется залезть, чтобы написать название своего блога:)

Шаг 2. Когда изображение готово, вам надо его где-то разместить в интернете. Легче всего, на мой взгляд, открыть черновик в вашем блоге (как будто вы собираетесь писать новый пост, хотя на самом деле вы никогда не будете его публиковать, он будет просто местом хранения изображения — смотрите, не удалите этот черновик случайно!) и загрузить туда изображение. Затем откройте HTML вид вашего черновика (надо нажать на кнопку HTML рядом с кнопкой создать) и вы увидите адрес вашего изображения. Адрес находится в кавычках и начинается с http:// и заканчивается jpg. Оставьте его открытым, чтобы быстро найти.
Вот так он выглядит у меня (адрес изображения я выделила):

Шаг 3. Найдите на блоге Iceybooks HTML код для кнопки между двумя пунктирными линиями.  Скопируйте его или в документ Word или тоже в черновик — вам просто нужно место, где с ним работать.

Шаг 4. Самый ответственный. Приготовьтесь морально, что с первого раза может не получиться. В код надо вставить в двух местах адрес изображения (он там красным) и один раз адрес вашего сайта в том виде, какой он у вас написан в браузере. Мой например http://thetimeofsinging.blogspot.com/ Аккуратно все вставляйте, проверьте все кавычки, все < >. При копировании эти значки могут отобразиться бессмысленным (для нас, чайников :)) набором букв. Я не знаю, надо ли их менять или так будет работать, но на всякий случай меняла вручную.

Шаг 5. Теперь открываем панель для гаджетов. В блоггере это Дизайн, добавить гаджет, выбираем HTML/Javascript код, вставляем, просматриваем —  не получилось 🙂 Если получилось с первого раза — вы герой, жму вам руку, напишите мне об этом. Если не получилось, возвращаемся к шагу 4 и все тщательно проверяем.

Пишите мне, если есть вопросы, будем мучаться вместе, а потом вместе любоваться на наши кнопочки!

 

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

Как сделать кнопку с кодом для блога: 7 комментариев

  1. Роман

    А где код самой кнопки

    [Ответить]

    admin Reply:

    Поскольку я не писала свой код, а взяла с чужого сайта, я не стала помещать его у себя. Заходите по этой ссылке http://www.iceybooks.com/2012/03/how-to-make-blog-button-with-grab-code.html найдите код между двумя пунктирными линиями (у меня на скриншоте показано, как он выглядит), замените адрес сайта и адрес изображения, и все должно получиться.

    [Ответить]

  2. Мария

    Спасибо вам огромное!!!! Я столько мучались, что просто уже отчаялась эту кнопочку когда нибудь создать!!!!

    [Ответить]

    admin Reply:

    На здровье, Таня! Я так рада всегда, когда удается кому-нибудь хоть чем-то помочь 🙂

    [Ответить]

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

wp-puzzle.com logo
Хотите разместить ссылку на одну из Ваших статей?