Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Как можно уменьшить расстояние между гаджетами в блоге


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

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

уменьшить расстояние между гаджетами

Достаточно большое расстояние. У меня тоже была такая беда после смены шаблона.

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

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

Вариант второй. Мы можем создать отдельный прозрачный гаджет и вставить в него вот такой  малюсенький код

<div style='margin: -5px 0px -5px 0px'> </div>

Здесь просто зададим отступы сверху и снизу значением-5. Однако эта величина может у вас быть и -20 или-30. Всё это делается экспериментальным путём. Опять же, в этом случае, максимального эффекта мы не добьёмся. Тут ещё один вариант есть. Разберём на примере с окном поиска по первому фото. Открываем этот гаджет и вставим вот такой код 

<div style="height:30px !important;">тут весь код верхнего гаджета<div>

Так же как в предыдущем варианте нужно подгонять значение height:30px. 

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

И всё на сегодня. До новых встреч. Увидимся.


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

введите пожалуйста свой адрес электронной почты :

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

  1. Как кстати, Вика! Я как раз заморачивалась над тем, что расстояние между гаджетами большое. Правда, у меня ничего не получилось. Установление прозрачного гаджета вообще никаких результатов не дал. А последний вариант установил дубликат гаджета, хотя расстояние между ними, конечно, уменьшилось. Я, наверное, что-то делаю не так.

    ОтветитьУдалить
    Ответы
    1. Елена, откройте код гаджета и заключите его в дивы, как показано выше. Только со значением height:30px надо поиграться. Но мне кажется, что ваши картинки вставлены через гаджет изображение, да? То в этом случае это не получиться.

      Удалить
  2. Очень пригодилось! Спасибо, Вика! Кое что уменьшила!!!

    ОтветитьУдалить
    Ответы
    1. Ирина, вроде бы мы с тобой уже это делали. Или я что-то подзабыла.

      Удалить
  3. Вика,здравствуйте! Посоветуйте пожалуйста как уменьшить высоту footer (подвала), чтобы экран блога был прижат к низу браузера? https://vos-torg.blogspot.com/

    ОтветитьУдалить
    Ответы
    1. Ту заморочек полно будет Вот статья, почитайте там http://css-live.ru/articles/uporyadochivanie-bagov-krossbrauzernosti-flexbox.html не все браузеры поддерживают
      И вот ещё http://dimox.name/press_footer_bottom_with_css/
      Не пойму что Вас не устраивает. смотрится очень симпатично. единственное что совсем не видно надписей Свадебные платья в свадебном салоне Восторг и Широкий выбор свадебных платьев в салоне Восторг

      Ещё бы счётчик метрики ниже поставить и левее

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

    ОтветитьУдалить
  5. Vostorg, ну если они Вам ( эти надписи) нужны пусть будут. И Вам всего доброго и удачи

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML