Как разместить «конфетку» на своем блоге/сайте/форуме. Мастер-Класс.

За время проведения своей конфетки, столкнулась с тем, что многие новички не знают как размещать ссылки. Да я их понимаю прекрасно, мне просто повезло - под боком программист живет. )))
Поэтому для новичков мы с мужем подготовили МК по размещению ссылки  на боковой панели. Думаю, кому-нибудь пригодится.)


Пару слов о том, что такое конфетка.

Конфетка - это способ рассказать о своем блоге и возможность сделать подарок своим читателям. Победитель выбирается случайным образом, например, с помощью программы Рандом.

Итак, конфетка состоит из 2-х элементов:

• Картинки-миниатюры, которую вы размещаете у себя, и
• Ссылки на страничку конфетки, на которой конфетка объявлена и описана.

Например:

От надписи «Ссылка на страничку» идут 2 стрелки:

• Одна указывает на адрес/ссылку странички (http://komkofa.blogspot.com/2011/02/1.html).
• Вторая на то, что это именно та страничка, где объявлена конфетка.

3-я стрелка указывает на картинку-миниатюру. 

Код конфетки

Чтобы разместить у себя конфетку, нужно разместить ее код:

<a   href="Ссылка на страничку"   />

<img   src="Ссылка на картинку-миниатюру"  height=""  width=""  />

</a>

Чтобы этот код стал полностью рабочим, нужно вместо Ссылка на страничку вставить реальный адрес/ссылку странички-конфетки. Для примера выше это http://komkofa.blogspot.com/2011/02/1.html.

А вместо Ссылка на картинку-миниатюру реальный адрес/ссылку на картинку-миниатюру.

Адрес/ссылка на картинку-миниатюру

Как можно получить этот адрес?

Нужно щелкнуть ПРАВОЙ кнопкой мышки по картинке-миниатюре. Появится меню, в котором нужно отыскать что-то типа такого:

• Копировать адрес изображения ИЛИ
• Копировать ссылку на изображение ИЛИ
• Копировать URL картинки ИЛИ
• Что-то подобное, где есть слова копировать, адрес, ссылка, URL, картинка, изображение.

Например, это может выглядеть так:

Однако может оказаться, что у вас нет ничего такого. Тогда в меню надо поискать пункт «Свойства», щелкнуть по нему и в открывшемся окне отыскать Адрес (URL). Выделить реальный адрес и скопировать его.  

Для конфетки, пример которой мы тут рассматриваем,  адрес/ссылка на картинку-миниатюру довольно страшен, однако не стоит его пугаться:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaCnaxLqdjGzvtzRYSKgUANdPpuU6ELHEk2gSn5y4jtonA06soptk78rMBjapBL4tP3DT3_u_ZJCbJKBtL5gh9QQca5AVHaq3pJikuMa9-puPuPRBJnWP1fA6pOdNz8KdT14UIoo3fooGI/s1600/%25D1%2584%25D0%25BE%25D1%2582%25D0%25BA%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BB%25D0%25BB%25D0%25B0%25D0%25B6%25D0%25BD%25D0%25B0%25D0%25B51.jpg

Итак, подставив оба адреса в наш код, получим:

<a   href="http://komkofa.blogspot.com/2011/02/1.html"   />

<img   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaCnaxLqdjGzvtzRYSKgUANdPpuU6ELHEk2gSn5y4jtonA06soptk78rMBjapBL4tP3DT3_u_ZJCbJKBtL5gh9QQca5AVHaq3pJikuMa9-puPuPRBJnWP1fA6pOdNz8KdT14UIoo3fooGI/s1600/%25D1%2584%25D0%25BE%25D1%2582%25D0%25BA%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BB%25D0%25BB%25D0%25B0%25D0%25B6%25D0%25BD%25D0%25B0%25D0%25B51.jpg"  height=""  width=""  />

</a>

А зачем нужны height и width?

Это высота и ширина картинки-миниатюры в так называемых пикселях. Частенько бывает так, автор конфетки не позаботился о том, чтобы картинка конфетки действительно была миниатюрной. Исправить это можно как раз с помощью этих height и width.

Например, 

То есть ширина нашей миниатюры 190 пикселей, а высота 143. Меняя эти значения можно подобрать подходящие вам значения.

Итоговый код конфетки:

<a   href="http://komkofa.blogspot.com/2011/02/1.html"   />

<img   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaCnaxLqdjGzvtzRYSKgUANdPpuU6ELHEk2gSn5y4jtonA06soptk78rMBjapBL4tP3DT3_u_ZJCbJKBtL5gh9QQca5AVHaq3pJikuMa9-puPuPRBJnWP1fA6pOdNz8KdT14UIoo3fooGI/s1600/%25D1%2584%25D0%25BE%25D1%2582%25D0%25BA%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BB%25D0%25BB%25D0%25B0%25D0%25B6%25D0%25BD%25D0%25B0%25D0%25B51.jpg"  height="143"  width="190"  />

</a>

Размещение конфетки в Blogger-е

• Добавляем гаджет:

•  Выбираем гаджет с именем «HTML/JavaScript»:

• Вставляем код:

Конфетка готова! :)

P.S. По результатам комментариев и писем решила немного дополнить мастер-класс:

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

То есть, например, вместо указания height="143"  width="190" достаточно только width="190". 

За совет спасибо Yukkie Jenny.

2) Девочки, способ, который предлагается в этом мастер-классе универсальный. Ведь мастер-класс так и назван "Как разместить «конфетку» на своем блоге/сайте/форуме", то есть он подходит не только для Blogger-а, но и для обычного сайта, форума или другой блоговой системы. Кроме того, он самый гибкий, так как предоставляет вам возможность самим полность выбирать внешний вид размещаемой "конфетки". То, что вы говорите про возможность воспользоваться гаджетом "Картинка", это все верно, в Blogger-е вы можете это сделать, но ни универсальности, ни сравнимой гибкости в этом случае нет. 

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

Поняв один раз как нужно размещать картинку описанным мной способом, вы будете способны сделать это в любом другом месте.

Будут вопросы - задавайте. )