в помощь блоггеру • СЕКРЕТЫ оформления блога


Сразу оговорюсь, что образование у меня лингвиста :) и со всеми этими кодами, скриптами и т.п., я до блоггера дела общего никакого не имела. Все осваивала уже по ходу. Поделюсь "полезностями", которые могут вам пригодиться при написании постов и при оформлении блога в общем. Свой блог я "причесываю" постоянно. Быть подкованным в данной теме, я считаю, не помешает ни одной мастерице :) Наш блог - это наш творческий дом, наше лицо!

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

• Удалить, спрятать или восстановить "Панель навигации"

Как вы заметили, у меня в блоге нет панели навигации. Я ее спрятала уже давно. Моя панель навигации всплывает, если навести курсор внизу экрана. Как это сделать, смотрим здесь - настройка Navbar



• Как убрать ненужные отступы •

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

[картинка из моего тест-блога]

Чтобы это исправить, нужно внести небольшие изменения в коде шаблона. Как это сделать смотрим в этой статье - Убрать пустое пространство над/под заголовком Blogger. А в этой статье - Разница между padding и margin - отлично все разложено по полочкам, еще и с наглядными примерами. Задавая разные параметры padding и margin, вы можете подогнать отступы под свои нужды.


• Таблицы •

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



 Код таблицы я вставляю через закладку HTML при написании сообщения.



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


• Не показывать боковую панель на определённой странице •

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


• Таблица с постами • 

В предыдущей картинке ↑ с Креативной мамой видно, что кроме удаления боковой панели, я еще сделала один финт - добавила таблицу с сообщения с одноименным ярлыком "Креативная мама". В таком виде и смотрится все аккуратно, и картинки видно, и названия можно прочитать, и перейти по ссылке в сам пост. И! самое главное, что сюда новые посты добавляются автоматически :) Как это сделать, читаем здесь - Красивое оглавление Blogger.


• Как красиво оформить блок цитаты • 

Эту фишку в блоге я сделала уже давно, но воспользовалась ей, если не ошибаюсь, только один раз :)  когда писала пост о детских книгах. Тогда я решила вставить цитату из википедии. И чтобы выделить ее из общего потока текста, я оформила ее с помощью этой примочки :) Как оформить в блоге блочную цитату читаем здесь - всё для blogger. блочная цитата.





• Несколько картинок рядом на боковой панеле •

С помощью этого кода можно красиво оформить, например, ссылки на ваши соц.сети и подписку на блог, как у меня в блоге. Таким же образом я разместила фотографии девочек в блоге Скрапкритика. На самом деле это все отдельные изображения, которые к тому еще и ведут на определенные сайты. Размер изображений рассчитывайте из расчета ширины вашей боковой панели (не забудьте вычесть из общей ширины боковой панели где-то 20 пикс. на отступы слева и права). В Скрапкритике все картинки вставлены с помощью всего одного кода - очень длинного кода.


Вставить этот код нужно через закладку Добавить гаджет - Добавить HTML/JavaScript. Вставлять его нужно столько раз, сколько картинок с ссылками вы хотите добавить: один код - одна картинка. Обратите внимание, что ссылки заключены в кавычки - не удалите их ненароком :) они там нужны.



Чтобы оцентровать картинки в пределах боковой панели, нужно заключить код в тег center:



• Favicon для Blogger • 

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



***
htmlbook.ru - самоучитель и справочник по HTML, CSS, верстке веб-страниц.
Шпаргалка блоггера - море полезной информации, и хозяйка сайта всегда приходит на помощь, если у вас что-то не получается.
Названия цветов в HTML, CSS и JavaScript
Blogger Forum - форум создан в помощь пользователям платформы Blogger.

***
фухх, четыре дня писала пост, когда появлялась свободная минутка :)

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

  1. Спасибо!!! Такой труд и все для нас))

    ОтветитьУдалить
  2. Таня, спасибо огромное!! Очень актуально! Скоро буду шаманить!:))

    ОтветитьУдалить
  3. Таня, супер!!! актуально и полезно! огромное тебе спасибо!!!

    ОтветитьУдалить
  4. Спасибо большущее!!!

    ОтветитьУдалить
  5. Таня, спасибо! давно хочу привести блог в порядок, твой пост как раз то, что нужно, столько полезной информации и ссылок♥ осталось только время найти :))

    ОтветитьУдалить
  6. Таня, полезный пост, спасибо)

    ОтветитьУдалить
  7. Спасибо! Как все на одной волне)

    ОтветитьУдалить
  8. Таня, это такая огромная помощь! Спасибо большое пребольшое!!!

    ОтветитьУдалить
  9. кладезь полезной информации! спасибо! А я уже давно хочу красиво оформить сноски для страниц. Но никак не разберусь. Может, у тебя найдется ссылка на то, как это сделать?)))

    ОтветитьУдалить
    Ответы
    1. Катюш, ты имеешь ввиду сделать закладки страниц (главная, о себе..) картинками?

      Удалить
    2. ну, да)) чтобы были красивые "кнопочки")))

      Удалить
    3. я пока не нашла вариант который бы мне понравился :(

      Удалить
  10. Спасииибо, Танюш! очень нужный и мегаполезный пост!!!!

    ОтветитьУдалить
  11. какая полезная статья! Спасибо тебе большое!!!

    ОтветитьУдалить
  12. Таня, спасибо огромное! Большой и очень полезный труд!

    ОтветитьУдалить
  13. Здорово! Спасибо большое!
    Таня, а что значит - "ссылка на изображение"? Помоги, плз..

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

      Удалить
    2. Оооо...., мерси...))))

      Удалить
  14. Таня,спасибо большое-пребольшое! Код HTML -это просто темный лес, теперь знаю где почитать, когда хочется что-то изменить. А изменить хочется постоянно!))

    ОтветитьУдалить
  15. Огроменное спасибо! Надо теперь все попробовать!

    ОтветитьУдалить
  16. Таня, спасибо вам огромное! столько всего сразу!! и так у вас красиво в блоге, что и в своем сразу хочется все применить)))

    ОтветитьУдалить
  17. Спасибо, Таня, вот именно таких подсказок не могла найти.

    ОтветитьУдалить
  18. Таня, спасибо еще раз большое за статью!
    Прости мне мою лень.., что-то не могу разобраться..
    Ты не подскажешь, какой код нужно вставить, что бы - как у тебя, фон шел сразу, без отступов слева и справа..? Это же в CSS вставлять нужно..? Paddigу и Margingi - это ооооооо......)))

    ОтветитьУдалить
    Ответы
    1. Ты имеешь ввиду в шапке?

      Удалить
    2. Неет.., с шапкой наверху я справилась.., я имела ввиду вдоль всей страницы..

      Удалить
  19. От текста до края? Надо покопаться в коде, потому что это я не меняла. Вроде не меняла ))) я правда уже настолько изменила код )) за все время существования блога. Посмотрю вечером, какие цифры у меня стоят, ок

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

Related Posts Plugin for WordPress, Blogger...