-Рубрики

 -Всегда под рукой

 -Цитатник

Интерфейс с личными сообщениями обещают вернуть! - (2)

С Новым годом + о личных сообщениях Главное. С прошедшими Новогодними праздниками и хорошо встр...

Царский яблочный пирог - (20)

Потрясающе вкусный пирог на песочном тесте с нежной яблочно-сливочной начинкой и с хрустящей посы...

Халат-кимоно. Выкройка + видео - (6)

Via

Супер ретро сайт! - (20)

Замечательный ретро-сайт, там есть ВСЁ! Нажимаем на квадратики и переносимся на много лет назад... ...

Платье-фартук. Идеи, выкройки - (8)

: в последние годы платье-фартук уже не домашняя вещь, а почти выходная. Почему? Я думаю, что при...

 -Приложения

  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни

 -Метки

burda ажурные ламбрекены асимметричный перекид базовое лекало бандо блузка болеро брюки буфы вечерние платья видео о шторах воланы воротник воротник хомут выжигание на ткани выкройки выпечка галстук гильоширование горловина декор декор мебели декор одежды дизайн штор для новичков лиру драпировка жесткий ламбрекен журнал с выкройками закуски зрение интерьер кардиган коверлок компьютерный крой корсет лабрекен-шарф ламбрекен ламбрекен-веер лапки люверсы мёд маски для лица мастер класс машинные шшвы многоярусная юбка мода для полных моделирование одежды молнии-застёжки музыка для лиру нарядные платья обработка трикотажа обучающее видео обучающие видеоуроки по шитью и рукоделию оверлок ольга никишичева омар_хаям омоложение онлайн-выкройки оформление блюд переделка пироги платье-трансформер платья плеер для дневника подушки потайная молния пошив ламбрекенов пояс оби пышные юбки рамки распошивалка римская штора рукава салаты сарафан сваг снятие мерок стрейч техника шитья торты трикотаж уроки лиру уроки тимофеева уроки шитья цветы из ткани швейная машина швы шитье детям шитье корсета шитье одежды шитье штор шторная лента шторы шторы на люверсах шторы своими руками элемент узел юбка юбка из фатина юбка хризантема юбка-пачка

 -Поиск по дневнику

Поиск сообщений в Nelya_Gerbekova

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 13.03.2010
Записей: 1052
Комментариев: 13718
Написано: 18908

Как создать кликабельную картинку или кнопку-переход в редакторе

Среда, 10 Апреля 2013 г. 23:28 + в цитатник

Сегодня  расскажу Вам, как  я делаю  баннер, или любое изображение в сообщениях   кликабельным. Это можно сделать несколькими способами.

1. Первый способ для картинок, которые загружены на фотохостинг  


<a href="адрес ссылки" target="_blank"><img src="адрес картинки" /></a> 


Для этого  нужно загрузить картинку  на  любой фотохостинг и и взять ссылку   т.е адрес картинки.

http://fotki.yandex.ru/   .  http://radikal.cc/)

Адрес ссылки это страница, которая будет открываться при нажатии на картинку или баннер.   (Яндекс - фотки - ссылка №3 , Радикал- фото - ссылка №1)

3726295_20130410_203939 (700x190, 45Kb)

Скопируйте код в блокнот на ПК и внимательно вставьте адреса ссылки и картинки(не перепутайте)  

3726295_20130410_203250 (700x147, 38Kb)

Вставьте  в сообщение в расширенном редакторе при нажатии на ИСТОЧНИК

3726295_20130410_203417 (700x153, 23Kb)

Отправьте сообщение в ПРЕДПРОСМОТР или ЧЕРНОВИК и проверьте результат на кликабельность. Я. например,  провожу все манипуляции с картинкой в ЧЕРНОВИКЕ,а затем каждый  раз беру готовый код картинки из черновика и вставляю в сообщение.

2. Подготовка кода для  кликабельной картинки в Радикал-фото.

Этот метод очень удобен для вставки кликабельной картинки в эпиграф дневника, в приложение "Всегда под рукой" или в блок "О себе"

  • Загружаем картинку на фотохостинг
  •  В последней графе удаляем ссылку на фотохостинг и прописываем свою ссылку на страницу перехода. Щелкаем по  ПЕРЕХОД НА URL ( при этом в ссылках должно произойти изменение т.е замена на вашу ссылку)  В результате получаем готовый код №2 или №6. 

3726295_20130411_215940 (700x394, 90Kb)

Чем отличается ссылка №2 от ссылки №6 . 

Они выполняют одинаковую функцию, но имеют разный вид в редакторе.  Важно! Код №6 вставляется в при нажатии на кнопку "Источник"

3726295_20130419_195703_1_ (627x231, 38Kb)

Для примера  взяла  картинку  и сделала ее ссылкой на собственные фоны klavdia-France , которые мне очень понравились .Кликните по  картинке!

 

3. Третий способ - создание кликабельной картинки в тексте сообщения 

 Этот способ применяется для создания картинки-ссылки в тексте сообщения.  Рекомендую загружать изображения  в  расширенный(визуальный) редактор напрямую из ПК  Как говорят опытные пользователи: "На фотохостинг надейся,а сам не плошай!" Загрузив картинку  из ПК в редактор, с  помощью простых манипуляций можно сделать любую картинку не только кликабельной,  но  и со всплывающим текстом  при наведении на картинку.   Для этого жмем на иконку ИЗОБРАЖЕНИЕ и загружаем картинку из ПК. Когда картинка загрузится переходим на вкладку ССЫЛКА 

3726295_20130410_222342 (505x466, 57Kb)

В выпавшем окне в графе URL вписываем  ссылку на страницу перехода

3726295_20130410_222642 (448x189, 34Kb)

Далее переходим на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК  пишем всплывающий текст.

3726295_20130410_223044 (502x299, 42Kb)

Жмем ОК и любуемся результатом . 

3726295_ (352x491, 34Kb)

 

4. Самый простой способ создания кликабельной картинки в расширенном редакторе

Загрузите картинку в редактор, через кнопку "Изображение"

3726295_99617934_3726295_20120521_142229 (237x117, 65Kb)

Выделите картинку мышкой и жмите на кнопку  "Вставить /редактировать ссылку" .  В выпавшем окне в графу URL вставьте ссылку на страницу перехода. Вот и все! Баннер готов!  Как видите, любую даже уже загруженную ранее картинку можно сделать кликабельной. Здесь, как и в предыдущем способе можно перейти на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК  написать  всплывающий текст в качестве подсказки. При наведении курсора на картинку появится текст - подсказка

3726295_20131116_101038 (394x455, 52Kb)

 Читайте пост:  Как создать кнопку-переход 

Все самые популярные коды здесь:  Коды для оформления блога

P.S. Для желающих работать с кодом, для кликабельной картинки со всплывающим текстом, даю код ,только не забудьте вместо width=100 height=100  вставить размеры картинки, где width-ширина, а height - высота картинки 


<a href="Адрес страницы, на которую будет указывать баннер" target=_blank><img src="Адрес картинки из Интернета или из Радикала (ссылка№1)" border="0" title="Текст, видимый, в качестве подсказки, при наведении на ссылку." width=100 height=100></a>

3726295_0586d8d05e60 (499x3, 0Kb)

Читайте пост: Как создать  ссылки в расширенном редакторе дневника.

Серия сообщений " Оформление дневника ":
Часть 1 - Как создать кнопку-переход
Часть 2 - 7 причин по которым не стоит вставлять в комментарии картинки
...
Часть 22 - Добавление к предыдущему посту .Как изменить размер плеера
Часть 23 - Как сжать размер картинки (фона) до требуемой величины для загрузки в дневник.
Часть 24 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 25 - Почему пропадают картинки и фотки?
Часть 26 - Украшаем дневник! Как применить и управлять схемами
...
Часть 32 - Все коды для оформления дневника в одном месте
Часть 33 - Еще один способ создания и вставки музыкального плеера в сообщение дневника.
Часть 34 - Все варианты создания и вставки плеера в текст сообщения или в рамку с кодом

Серия сообщений "Для новичков ЛИ.РУ.":
Часть 1 - Для самых начинающих лирушников.
Часть 2 - С чего начинать дневник?
...
Часть 25 - Что может раздражать ваших читателей в вашем дневнике. Для новичков и не очень.
Часть 26 - Урок для самых новеньких! Как загрузить картинку для фона дневника
Часть 27 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 28 - Урок по использованию рамочек от Летиция
Часть 29 - Как добавить рубрику прямо из редактора при цитировании поста
...
Часть 35 - Читаем дневники не прерывая музыку!
Часть 36 - Наводим порядок в дневнике!Как разложить все сообщения в дневнике по полочкам и другие самые важные рекомендации для новичков!
Часть 37 - Уроки для новичков Лиру.

Метки:  

Процитировано 263 раз
Понравилось: 83 пользователям



Elina750   обратиться по имени Среда, 10 Апреля 2013 г. 23:50 (ссылка)
Спасибо за полезный сей рассказ!
Он очень нужен! В самый раз!!!

Картинка
Ответить С цитатой В цитатник
Перейти к дневнику

Сеё не выразишь словами

Пятница, 12 Апреля 2013 г. 01:54ссылка
Стихами мы ответить вправе -
Сеё не выразишь словами...
Картинки, право - Баннерами
Кликабельными стали.

Картинка - не ссылка!
Картинка
Перейти к дневнику

Пятница, 12 Апреля 2013 г. 02:57ссылка
Ура! Ура! Склоняюсь перед Вами -
Вы первый, кто ответил мне стихами!

Люблю я это дело, право слово -
Я рифмоплётствовать всегда готова!
Картинка
Перейти к дневнику

Понедельник, 21 Октября 2013 г. 17:21ссылка
Все советы попробовала а кликабельной"картинки" не получается как у вас в коменте,разжуйте,если не трудно
RiaArei   обратиться по имени Среда, 10 Апреля 2013 г. 23:53 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
LudmelaRU   обратиться по имени Четверг, 11 Апреля 2013 г. 01:40 (ссылка)
Спасибо дорогая! Очень интересно!
Ответить С цитатой В цитатник
ДарьяС   обратиться по имени Четверг, 11 Апреля 2013 г. 02:06 (ссылка)
Спасибо за урок!
Ответить С цитатой В цитатник
Сплетня   обратиться по имени Четверг, 11 Апреля 2013 г. 04:06 (ссылка)
на самой первой картинке справа вверху есть "переход на URL", там же можно сразу указать нужный адрес и взять готовый код :)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 11 Апреля 2013 г. 22:18ссылка
pospletnichaem, Огромное спасибо за подсказку.
Перейти к дневнику

Четверг, 11 Апреля 2013 г. 23:47ссылка
да не за что :)

*у Вас отключена возможность отправлять симпочки :(
Перейти к дневнику

Понедельник, 21 Октября 2013 г. 18:26ссылка
по вашему совету вот что получилось по коду 2 http://s020.radikal.ru/i713/1310/6c/168bdc1619c1.gif,хотелось бы чтобы в коменте ставилось"картинка"...
Перейти к дневнику

Вторник, 22 Октября 2013 г. 21:28ссылка
Сизарка, Для того, чтобы вставить картинку в комментарий перейдите по ссылке "Перейти к полной форме", выберите файл с компьютера и публикуйте. Если пользователь НЕ отключил опцию "показывать картинки в комментариях", то в комментариях Вы увидите полное изображение картинки, если же показ картинок отключен, то вместо картинки Вы увидите ссылку на картинку "Картинка" .Картинки в таком случае отображаются только для друзей .

Как найти опцию? Настройки---старое оформление---основные настройки ( я привыкла к старым настройкам)
2013-10-22_210333 (700x96, 29Kb)
Selena-13-amazonka   обратиться по имени Четверг, 11 Апреля 2013 г. 20:41 (ссылка)
Спасибо за полезную информацию !!!
Ответить С цитатой В цитатник
Бузок_цветик   обратиться по имени Четверг, 11 Апреля 2013 г. 22:50 (ссылка)
Спасибо за урок.
Ответить С цитатой В цитатник
Nelya_Gerbekova   обратиться по имени Пятница, 12 Апреля 2013 г. 08:39 (ссылка)
Elina750, Браво!!!!
50421782_4a52e0231388d7fd00a78caff6aa57fb (115x115, 15Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 12 Апреля 2013 г. 09:09ссылка
Спасибо! Присоединяйтесь!!!
Давайте вместе! Попытайтесь!!!
Прошу Вас, только не стесняйтесь!!!
ФираЯ   обратиться по имени Воскресенье, 26 Мая 2013 г. 21:11 (ссылка)
От всей души благодарю за столь нужную мне информацию! С удовольствием забираю к себе.
Ответить С цитатой В цитатник
egmara   обратиться по имени Вторник, 27 Августа 2013 г. 14:27 (ссылка)
Nelya_Gerbekova, С благодарностью!:angel:
Ответить С цитатой В цитатник
Лариса_Виноградова   обратиться по имени Среда, 06 Ноября 2013 г. 22:07 (ссылка)
Спасибо огромное,кое-чему уже научилась,уроки очень доступные!!!!!!!
Ответить С цитатой В цитатник
Grateful   обратиться по имени Воскресенье, 17 Ноября 2013 г. 00:43 (ссылка)
Отличный урок, все получилось, спасибо!
Ответить С цитатой В цитатник
Концевич   обратиться по имени Среда, 08 Января 2014 г. 09:46 (ссылка)
Спасибо большое за Ваши уроки.С Вашей помощья, я смогла сделать кликабельную кнопку.


Ответить С цитатой В цитатник
Журавленок   обратиться по имени Воскресенье, 12 Января 2014 г. 01:42 (ссылка)
Благодарю за полезную информацию,будем разбираться.
Ответить С цитатой В цитатник
Надежда_Заломина   обратиться по имени Воскресенье, 16 Февраля 2014 г. 13:18 (ссылка)
Спасибо большое.
Ответить С цитатой В цитатник
ПУШИСТЫЙ__КОТЁНОК   обратиться по имени Вторник, 24 Июня 2014 г. 05:32 (ссылка)
Спасибо за урок!
Ответить С цитатой В цитатник
Нинуля_Смолина   обратиться по имени Среда, 31 Декабря 2014 г. 05:21 (ссылка)
Спасибо Нелля за урок ... С новым годом !!!!
Ответить С цитатой В цитатник
Нинуля_Смолина   обратиться по имени Воскресенье, 01 Февраля 2015 г. 17:54 (ссылка)
Нелля,куда то затерялся пост....цитирую еще раз ...Спасибо-все получилось !
Ответить С цитатой В цитатник
dekab12rina   обратиться по имени Понедельник, 09 Февраля 2015 г. 14:17 (ссылка)
Nelya_Gerbekova, ух, как интересно. Спасибо. Цитирую.
Ответить С цитатой В цитатник
MARIYA-VIKTORIYA   обратиться по имени Четверг, 19 Февраля 2015 г. 02:11 (ссылка)
Ответить С цитатой В цитатник
Васточка   обратиться по имени Суббота, 21 Февраля 2015 г. 00:58 (ссылка)
спасибо за науку
Ответить С цитатой В цитатник
Verik19803105   обратиться по имени Пятница, 06 Марта 2015 г. 10:42 (ссылка)
ничего не понимаю ,голова кругом, куда вставить этот код ?
как-то все поверхносно объясняют, а самый главный шаг "КУДА" не понятен...
вот вставляю его сюда в сообщение....
Картинка
Ответить С цитатой В цитатник
Verik19803105   обратиться по имени Пятница, 06 Марта 2015 г. 12:44 (ссылка)
А каким редактором Вы пользуетесь ? :)
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 07 Марта 2015 г. 20:29ссылка
Verik19803105,Пользуюсь только расширенным CKEditor
Verik19803105   обратиться по имени Воскресенье, 08 Марта 2015 г. 06:08 (ссылка)
Спасибо огромное!!!
Нашёл оф. сайт с установкой CKEditor,
только вот модуль для него не могу скачать ,ну просто не понимаю ГДЕ эта кнопочка Download...:(
хотелось бы по Вашим подсказкам пользоваться теми же инструментами.........
Попробую онлайном :
http://filyanin.ru/8-vizualnyy-HTML-onlayn-redaktor.html
У меня на своём сайте и тут без проблем, на другом проекте не получается переход на сторонние сайты через кликтабельность....
Ответить С цитатой В цитатник
Ванина_мама   обратиться по имени Среда, 02 Декабря 2015 г. 07:05 (ссылка)
Спасибо за урок!! Пока это всё ,,китайская грамота,, Буду разбираться. ))))
Ответить С цитатой В цитатник
Галина_Гражданова   обратиться по имени Воскресенье, 06 Марта 2016 г. 19:32 (ссылка)
Спасибо огромное!
Ответить С цитатой В цитатник
marinapetrova1950   обратиться по имени Вторник, 30 Августа 2016 г. 23:32 (ссылка)
Большое спасибо!
Ответить С цитатой В цитатник
leka312   обратиться по имени Среда, 25 Января 2017 г. 19:56 (ссылка)
благодарю!!!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку