13 августа 2014

Как добавить на боковую панель баннер/конфетку/кнопку?

Для меня это конечно уже давно пройденный этап, но наверняка кому-то из новичков пригодится! Тем более, что я как обычно пойду своим путём и покажу не столь очевидный вариант, как просто добавление картинки, через пункт меню "Дизайн".


Мой вариант чуть более сложный, но зато имеет и ряд важных преимуществ:
     - возможность выравнивания картинки по центру (для эстетов :))
     - открывание ссылки в новом окне (чтобы при переходах, не закрывался наш блог)
     - возможность расположить в ряд или друг под другом сразу нескольких кнопок.

На самом деле это даже не все возможности. Но пока нам хватит и этого, так что перейдём к делу. Покажу весь процесс на примере Конфетки.

1. Находим нужную нам картинку, наводим на неё курсор, жмём левую кнопку мыши и открывшемся окне выбираем "Копировать URL картинки".


2. Далее создаём у себя в блоге новое сообщение и выбираем в панели задач "Вставить изображение". Из предложенных вариантов нам нужен "По URL". И вставляем туда скопированный нами ранее URL.

Можно конечно добавлять изображения и с компьютера или из альбомов Гугл+, если нужные картинки находятся там.



3. Так в сообщении у нас появляется нужная картинка. Теперь нам надо сделать её кликабельной. На самом деле он уже кликабельна, но ведёт ссылка не туда.

Кому интересно - она ведёт на файлообменник, где хранится оригинал картинки, и таким образом при нажатии на картинку позволяет ей красиво открываться в Лайтбоксе (на чёрном полупрозрачном фоне с миниатюрами других картинок внизу экрана). Вот.

Нам в данном случае это ненужно, поэтому убиваем эту ссылку и вставляем свою. Очень просто! Жмём на картинку - подсвечивается слово "Ссылка". Жмём на него и всё! Старая ссылка удалена.


Теперь снова жмём на картинку и видим, что слово "Ссылка" уже не подсвечивается, а при наведении курсора на него предлагаются варианты "Добавить или удалить ссылку". Ну удалять нам уже нечего, так что добавляем!


4. Заходим на тот ресурс, куда нам нужно будет совершать переход, копируем адрес из адресной строки и вставляем его в открывшееся окошко для добавления ссылки.



И тут обратите внимание на фразы "Открывать в новом окне" и "Добавить атрибут rel=nofollow".

С первым всё ясно и он нам как раз нужен, чтобы люди при переходе по ссылке не уходили безвозвратно с нашего блога.

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

5. А теперь начинается самое страшное :) Переходим в режим редактирования сообщения "HTML". Заходим и видим, что страшного-то ничего и нет! Просто стираем для удобства дальнейшего редактирования картинки информацию о её ширине и высоте, как показано на первом скрине. А затем меняем ширину на нужную, как показано на втором. У меня например было 1600, поменяла на 260. Точнее это будет либо ширина, либо высота изображения в зависимости от того, какая сторона длиннее.



6. Теперь выделяем текст полностью ил как показано у меня и копируем.


7. Заходим в дизайн. Там жмём "Добавить гаджет". Из списка выбираем "HTML/JavaScript".



8. В названии пишем что нам нужно или вообще ничего не пишем - данный гаджет это позволяет. И вставляем в "Содержание" наш код.


Ну вот собственно и всё! Редактировать размер картинки можно в любой момент, изменяя всю ту же цифру после буквы "S".

Можно точно также, как описано выше, в режиме редактирования сообщения расположить две, три и более картинок с разными ссылками и вставить их в блог всем скопом в один гаджет.

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

Ну и последняя фишечка. Кто ещё не знает горячие клавиши?
CTRL+C - копировать
CTRL+V - вставить

Всем красивых баннеров!
Ваша Katrin Black

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

  1. Кать, ну вот прям ОГРОМНОЕ сПаСиБо!!! :)
    так меня всегда интересовало: "как это сделать, что б в отдельном окне открывалось???" и нигде для чайников нет инструкции))))
    а про горячие клавиши я знала, но недавно мужу показала, так он себя тАААким лохом почувствовал - успокаивать пришлось)))

    ОтветитьУдалить
    Ответы
    1. Ну я старалась что-то пооригинальней написать :) А кстати кроме горячих клавиш есть ещё одна супер-штука - колёсико мышки! Если при наведении на ссылку жать на него, а не на кнопку, то ссылка будет открываться в новом окне автоматически.

      Удалить
    2. А если нажать Ctrl и при этом крутить колёсико мышки, всё будет уменьшаться и увеличиваться!)))
      Спасибо, Катюха! Как всегда - информативно и мудрёно! Мы простых путей не ищем!!! ;)

      Удалить
    3. Оль, ну по-простому все умеют :) Иногда я тоже добавляю баннеры простым способом, но например Конфетки мне больше так нравится вставлять.

      Удалить
  2. Катя, про колесико это новость для меня! Тебе эту инфу надо в пост закинуть - очень нужная и полезная (как и сам пост конечно)!

    ОтветитьУдалить
    Ответы
    1. Элси, а я уже думала об этом! Просто надо ещё чего-то добавить к ней, чтоб посолидней смотрелось :)

      Удалить
    2. а ну горячих клавиш я много знаю)), например Alt+F4 интересная =))) , но реально ей никогда не пользуюсь
      а вот на работе бывает быстро сворачиваю все окна - значок Wind+D

      Удалить
    3. Да горячих клавиш видимо-невидимо! Другое дело, что учить их надо как-то порционно, а то толку не будет - ни хрена не запомнится!

      Удалить
  3. почувствовала себя продвинутым блогером как Катя =))), у меня все ровно так же давно копирую скрипт из конфетки на новые, а первый не помню как писала, может у кого-то типа тебя спёрла =D , единственное отличие - я делаю конкретную ширину картинки, чтобы не вылезали за рамки, а то у меня стали как-то глючить и загораживать сам блог

    ОтветитьУдалить
    Ответы
    1. Я тоже выставляю нужную ширину. В ссылке на изображение автоматически стоит максимальная - 1600. Её всегда надо менять на свою.

      Удалить
  4. Ай-я-яй! А как просто, оказывается, ларчик-то открывается!)))) Спасибо! А я то я всё голову ломала, почему у других открывается в другом окне, а у меня нет)))) И ведь, главное-то, делала так уже!!!

    ОтветитьУдалить
    Ответы
    1. Рада, что помогла найти тебе ответ на мучивший вопрос :)

      Удалить
  5. Катя, привет! Нравятся мне Твои посты о блоговедении. Всегда доступно.

    Вижу Ты не раз участвуешь в фотозаданиях. Решила немного разнообразить игрушечный мир? ;-)
    Думаю Тебя заинтересует новый фотоблог ”Я – фотограф!» Попробуй и там поучаствовать в фотозадании. Думаю, Твои яркие и глазастые игрушки будут рады помочь! ;-)

    ОтветитьУдалить
    Ответы
    1. Юль, я с радостью! Только у меня сейчас какая-то беда с Интернетом - половина блогов почему-то заблокирована, а остальные без картинок открываются :(

      Удалить
  6. Ай, умница, Катерина, кину сейчас мужу на почту ссылку, может, чего и себе от тебя приобретенного присобачим?!...

    ОтветитьУдалить
    Ответы
    1. Всегда рада поделиться секретным знанием :)))

      Удалить
  7. Катя! Спасибо огромное за пост! Очень-очень пригодился! Только кликабельная почему-то ссылка получилась, а не картинка) Что-то я упустила, но главное начать. Продолжу попозже себе мозг выносить))

    ОтветитьУдалить
    Ответы
    1. Людмила, если что, спрашивайте - постараюсь помочь :)

      Удалить
  8. Катя, и от меня спасибище - по вашим инструкциям у меня все получилось, ураааа! Смогла повесить у себя свою конфетку!

    ОтветитьУдалить
    Ответы
    1. Рада, что всё получилось :)))

      Удалить