суббота, 7 декабря 2013 г.

Как разместить кнопку или баннер в боковой колонке?


У новичков много вопросов зачастую простых, но найти ответ на них не так то просто, тем более, если не знаешь как задать вопрос правильно. Сегодня тема касается только новичков, у блоггеров хотя бы с полугодовым стажем есть знание КАК НА БОКОВОЙ ПАНЕЛИ РАЗМЕСТИТЬ БАННЕР. Мне не нравится слово "баннер" хотя бы потому, что каждый имеет ввиду что-то своё. Сегодня рассмотрим задачу: ПО УСЛОВИЯМ КОНКУРСА (или например требованию Базы блогов) НЕОБХОДИМО НА БОКОВОЙ ПАНЕЛИ РАЗМЕСТИТЬ БАННЕР. 

Почему еще не люблю слово баннер? Да потому, что новичков оно сразу ставит в ступор и в голове одна мысль я не справлюсь. Стоит только слово "баннер" заменить словом "картинка" и страха нет. 

Кому нужен сегодняшний урок? Рукодельницам, которые участвуют в розыгрышах конфеток, конкурсах. Тем, кто хочет продвинуть свой блог через Базу блогов (есть такие, но толку от них кот наплакал). Многие рекламируют свой блог через Блоги мам, где тоже требуется разместить кнопочку. ААА, точно, часто это так и называют КНОПКОЙ. 


Чтобы показать на чем-то конкретном я использую именно "блоги мам". Мне они больше симпатичны. 

Кстати, если кому требуется лучше рассмотреть картинку, кликните по ней, она откроется в бОльшем размере. 


В кружочек я обвела саму кнопку, которая должна появиться в моем блоге на боковой панели. В прямоугольнике ниже спрятан код, который нам необходим, чтобы выполнить задачу. Но он реально спрятан и многие по незнанию мучаются и не могут скопировать его полностью. Обратили внимание на стрелочку? Нужно навести курсор (стрелочку у мышки) на этот уголок и, удерживая нажатой левую клавишу мышки, немного потянуть вниз. Вот что получится.

Теперь код как на ладони и его легко скопировать полностью. Что мы и делаем.

Дальше открываем в своем блоге на панели управления ДИЗАЙН. 

Получаем по большому счету макет своего блога, состоящий из прямоугольников. Вот мой.


В боковой колонке находим ДОБАВИТЬ ГАДЖЕТ и смело кликаем туда. 

Откроется окно,  в котором находим HTML/Java Script и жмём на плюсик.


Это окно после недолгого раздумья сменится другим. На скриншоте видно куда именно я вставила скопированный ранее код. Чуть ниже обведена кнопка СОХРАНИТЬ. То есть сначала вставили свой код, а потом нажали на сохранение.


Уф, мы сделали две трети дела, осталось лишь совсем не много. А именно перенести кнопку (баннер) туда, куда нужно. Потому что сейчас кнопка у меня находится в самом верху боковой колонки, а мне нужно ее спустить ниже.

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

В боковой колонке у меня есть верхний гаджет HTML/Java Script, именно он сейчас и является кнопкой (если сомневаетесь, то нажмите вверху справа слово ПРОСМОТР и увидите на новой странице свой блог с готовым баннером, но пока не в том месте)




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


Обратите внимание, на этот раз я справа вверху стрелочкой указала на кнопку ПРОСМОТР, но если Вы им уже воспользовались, то откройте ту вкладку, где открыт просмотр и обновите страницу (можно нажать F5...это кнопочка на клавиатуре в самом верхнем ряду)

Перетащили? Посмотрели? Вас все устроило? Тогда жмём вверху справа на СОХРАНИТЬ РАСПОЛОЖЕНИЕ. 

Всёёёёё! А? Чего еще за стрелочка ниже? Это я показала, что гаджет разместила ниже гаджета КАК СДЕЛАТЬ СТРАНИЦЫ ВИДИМЫМИ. То есть это ориентир был мой на макете, а вот как стало в самом блоге. Показываю нижний фрагмент боковой колонки вместе с ориентиром и самой кнопкой.


Gerta, я очень надеюсь, что именно этот урок Вам срочно требовался и я максимально подробно все показала. Отпишитесь, пожалуйста, о результатах.

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

  1. Нат, такое понятное объяснение! я знала, но все равно полезно)

    ОтветитьУдалить
    Ответы
    1. Спасибо, Алина. Я понимаю, что не совсем новички справятся без проблем. Вопрос на эту тему прозвучал и мне очень захотелось помочь человеку.

      Удалить
  2. Так всё понятно!) Я и не знала где код картинки найти)

    ОтветитьУдалить
    Ответы
    1. Натали, в данном случае способ, когда код для вставки идет сразу с картинкой. Просто многие (я и сама когда-то), не знали что с этой картинкой и этим кодом делать.

      Удалить
  3. Это мне-мне-мне! Ответ-отчет я написала в нашей переписке. Кстати, я так и не нашла этого кода, но нашла другой выход. Спасибо за волшебное слово "код", Вы мне очень помогли. Как приятно, когда тебе помогают от всей души!!!

    ОтветитьУдалить
    Ответы
    1. Герта, Вы настоящая умница!!! Кстати, решение, найденное самостоятельно даже более важно, оно уж точно запомнится и Вы легко сможете его повторить и без шпаргалки.

      Удалить
  4. Энн спасибо вам за разьяснение! А вот не подскажете как на боковой панельке, там же где и Топ комментаторов и популярные сообщения разместить просто текст??? Скажем обьявление какое-нибудь. Нужно что бы оно там висело и все видели, но картинка не нужна. Спасибо заранее!

    ОтветитьУдалить
    Ответы
    1. Rukodelkino-made, это сделать достаточно просто. Можно я коротко?
      1).ДИЗАЙН 2)ДОБАВИТЬ ГАДЖЕТ. 3)В открывшемся окошки найти ТЕКСТ (он позволяет разещать текстовые сообщения) и нажать на крестик-плюсик 4)Далее я так понимаю в новом открывшемся окне написать текст, СОХРАНИТЬ. 5)Перетащить гаджет на нужное место 6)СОХРАНИТЬ РАСПОЛОЖЕНИЕ

      Попробуйте и, если не сложно, напишите, все ли получилось.

      Удалить
    2. Энн спасибо большое!!! Все получилось!!!!

      Удалить
  5. Энн, здравствуйте. Оченнннно нужна Ваша помощь. Всё делаю как у Вас описано. Но у меня ничего не выходит, вернее сказать выходят кракозябры в панельке вместо баннера и даже не реагируют как ссылка. Что я делаю не так?

    ОтветитьУдалить
    Ответы
    1. Виктория, у меня для начала есть вопрос. При картинке код был изначально? Если да, то инструкция должна работать. Но если нет, то действия другие. Напишите, я попытаюсь помочь. Можно прямо мне на почту nata59blogspot@yandex.ru

      Удалить
  6. Здравствуйте.Вот и мне интересно, а где код взять? Подскажите пожалуйста.

    ОтветитьУдалить
  7. Спасибо большое за помощь! Всё доступно и понятно!!!!!!!! Спасибо, сберегли моё время!!!!!

    ОтветитьУдалить
  8. Спасибо большое! Всё очень доходчиво и понятно!

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

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

    ОтветитьУдалить
  11. Спасибо , очень понятно .Воспользовалась на своем блоге для похудения http://ketopia4you.com/

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

Дорогой мой читатель, если Вам понравилась статья, то напишите отзыв, мне очень приятно читать комментарии. А если Вы посчитаете, что статья достойна того, чтобы ее порекомендовать остальным, нажмите на +1.

Хотите сохранить полезную информацию в соц.сетях? Выбираем и сохраняем!

LinkWithin

Related Posts Plugin for WordPress, Blogger...