Как поднять виджет поиск по блоку выше сайдбара.

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

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

Посмотрите, как это вписывается в строку вкладок

окно поиска

Для этого нам необходимо сделать небольшие изменения в шаблоне блога.  Для тех, кто пока не совсем уверен в своих действиях, сделайте резервное копирование шаблона. Нажимаем изменить HTML и в строке список виджетов выбираем CustomSearch1'.


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

<h2 class='title'><data:title/></h2>. Аккуратно её удаляем.


Затем с помощью горячих клавиш Ctrl+F находим заветную и всеми любимую строчку  ]]></b:skin> и сразу над ней вставляем следующие.

#sidebar-right-1{
position: relative;
top: -65px;
display: inline-block;
}

Небольшое пояснение. Мы задали  позиционирование нашему элементу position: relative; и
и значение top: -65px; - эта величина и будет поднимать или опускать наше окно поиска  на нужную высоту. Так что уменьшая её или увеличивая мы сможем добиться нужного результата. В моём случае в строку вкладок окно поиска встало при значении -65px.

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

Так как вопросы о том где эта строка опять перенаправлю вас на этот пост. И пожелаю вам удачи во вех делах.

У меня на сегодня всё. Спасибо, что читаете мой блог.

Ой, а что это там ниже? Ну надо же! Нажимаем!

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

Введите Ваш email ...:


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

  1. Отличное решение Вика. Я думаю многим пригодится твоя шпаргалка.

    ОтветитьУдалить
  2. Привет Ольга. Вот сейчас сижу и думаю. надо было ещё поиграться с top: -65px; если в шапке никаких прибамбасов нет и туда встанет. Попробовать надо.

    ОтветитьУдалить
  3. Здравствуйте, давно искал ответ на этот вопрос и наконец-то нашел, большое спасибо вам. Еще, вы не могли бы подсказать, как убрать рамку вокруг окна поиска?

    ОтветитьУдалить
  4. Не за что Сайхан. А у Вас поиск от Блоггер стоит или сторонний?

    ОтветитьУдалить
  5. от блоггер, но могу и сторонний поставить. Главное чтобы рамку убрать, а то с ней, весь вид пропадает.

    ОтветитьУдалить
    Ответы
    1. Сайхан, если родной то я предложу вам перейти на этот блог http://www.magentawave.com/2013/01/change-search-form-on-blogger.html
      У меня нет статью на эту тему.
      Посоветую почитать этот пост про меню с окном поиска у меня. http://www.shpargalochki.ru/2014/10/prostoe-gorizontalnoe-menju.html

      Удалить
  6. Хорошо, обязательно прочитаю. Спасибо вам большое.

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

Пользовательский поиск
Foto Saya
My Photo