Изменить дизайн блога на blogger

  Конечно для тех, кто ведет давно блог на blogger не составит труда изменить дизайн, для новичка обычно это составляет определенные трудности. в этой статье будет описано как изменить оформление blogspot, пользуясь новым интерфейсом.
   Еще есть возможность пользоваться старым интерфейсом blogger, но необходимо приспосабливаться и к новому, так как думаю, что скоро наступит время, когда платформа полностью перейдет на новый интерфейс. У меня в Опере этот новый интерфейс постоянно выдает ошибку и требует установки с Google Chroma. В Firefox таких проблем не возникает.
Панель инструментов, с которой вы имеете доступ ко всем своим блогам теперь выглядит так:
панель инструментов blogger
В верхнем правом углу – ссылка Вернуться к старому интерфейсу.
Выбираете нужный блог (если у вас их несколько) и попадаете на привычную страницу Обзор, где отображена статистика блога за неделю, общее количество сообщений блога, комментариев и другая общая информация.
обзор
Нас интересует изменение дизайна блога, поэтому остановимся на вкладке Дизайн. Она имеет тот же внешний вид, что и в старом интерфейсе, отличие только лишь в цветовой гамме страницы:
дизайн
Эта страница состоит из элементов - гаджетов. Благодаря им легко представить из каких составных частей состоит отдельная страница блога. Каждый элемент можно менять, удалять или добавлять новые на своё усмотрение. Если вы хотите редактировать гаджет, то нужно лишь нажать на ссылку Изменить. При добавлении нового элемента необходимо нажать на Добавить гаджет, при этом появится окно с гаджетами:
..
добавить_гаджет
Они поделены на группы – основы, избранное, самое популярное и дополнительные гаджеты. все как и в старом интерфейсе. Пожалуй, самый ходовой из них это:
html_JavaScript
HTML/JavaScript – с его помощью можно вставить кнопки и счетчики, рекламные коды Adsense, изображения, флэш (не советую – сильно грузит блог), видео и др.
С помощью гаджетов вы также можете создать поиск по блогу, вставить форму подписки по e-mail, вывести на боковую панель блога трансляцию комментариев, ссылки на самые популярные сообщения и многое другое.
В  верхнем левом углу вкладки Дизайн есть элемент значок, редактируя этот гаджет вы можете изменить фавикон в блоге на свой.
Вкладка Шаблон. Именно в ней мы редактируем шаблон блога. Здесь можно выбрать стандартный шаблон, выбрать новинку от blogger - Dynamic Views (динамические шаблоны). В верхней части мы видим превью внешнего вида блога сейчас и интерфейс для мобильных устройств:
шаблоны
Под ними – 2 кнопки :

  • кнопка Настроить, нажав ее вы попадете в дизайнер шаблонов, где можете создать свой уникальный шаблон, изменить фон блога, выбрать расположение элементов и количество колонок в блоге, отрегулировать ширину основной (текстовой) части блога, настроить цвет и шрифт текста, ссылок и пр.

Дизайнер шаблонов:
дизайнер_шаблонов

 

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

77 ответов к «Изменить дизайн блога на blogger»

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

  2. Убрать значки редактирования сообщений можно таким образом. Зайдите в редактор html в админке блога, найдите в отрезок кода и удалите его. Так у вас будет меньше исходящих ссылок с вашего блога.

  3. здравствуйте и спасибо за пост!
    не могли бы вы подсказать,как изменить цвет фона для комментариев или цвет шрифта самих комментариев.
    получилась так что фон и шрифт одного цвета и комментарий виден только при выделении его курсором..
    не могу найти нужный пункт в дизайнере шаблонов (

  4. soi, если у вас стандартный шаблон, то изменить код комментариев можно так — ищите в коде отрезок — background-color: $(post.footer.background.color); и меняете $(post.footer.background.color) на нужный вам цвет (например, #00FFFF).

    Второй вариант — чаще в нестандартных шаблонах. Ищите в коде блога код .comment-block и изменяйте background. Это будет выглядеть так:
    .comment-block {
    background: #FFFFFF;

  5. Во вкладке Дизайн добавить гаджет "Ярлыки", настройте их облаком или списком, можете выбрать нкжные вам, а также отображать количество записей с определенным ярлыком.

  6. Чтобы поменять шрифт в шаблоне блога, в редакторе html найдите Font (точнее, font-family) и поменяйте его на нужный вам шрифт. Шрифты можете подобрать в записи "Шрифты html". Пройдитесь по всему шаблону, чтобы изменить шрифт во всем шаблоне (все заголовки (h1, h2 и др.), в комментариях и прочее.

  7. Возможно Вы сможете мне что-то посоветовать для решения такой задачи.
    У меня Блог всегда начинается с одного и того же поста(сообщения), как бы "пролога". Я это решил путем присвоения ему даты 2015 года. Но я хочу, что бы этот пост открывался в окне как единственный (он достаточно тяжелый), т.е. после него сразу шла ссылка на предыдущие посты этой страницы, которые уже распологаются, как у меня принято, по 4 поста. Какой скрипт необходимо утановить для такого порядка? Спасибо (http://markfrm.blogspot.co.il/)

  8. Здравствуйте , подскажите пожалуйста , как сделать вот такую панель с кнопочками в динамическом дизайне блога :
    http://1.bp.blogspot.com/-33KGDbSsiQs/T9jmeMSMOgI/AAAAAAAABAU/RgLHCFL6uGU/s640/%D0%B0%D0%BD%D0%B0%D1%81%D1%82%D0%B0%D1%81%D0%B8.png

    Заранее спасибо большое 🙂

  9. Аиша Моруа, такую интерактивную панель с кнопочками в динамическом шаблоне специально устанавливать не нужно. Для того, чтобы она появилась достаточно создать во вклидке Дизайн необходимые гаджеты Blogger в сайдбар, или боковую колонку блога (про то как редактировать вкладку Дизайн читайте в этом сообщении). Имейте в виду, что работать могут не все гаджеты, но лучше всего кнопочки будут отображаться в Google Chrome, а в Opera вообще их не будет видно.

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

  11. Эта "прозрачная занавеска" — навигационная панель blogger, так называемый "навбар". Чтобы убрать навбар,
    1. нужно перейти а редактирование html-шаблона в административной панели blogger,
    2. при помощи CTRL + F найти отрезок кода /* Variable definitions
    3. вставить код #navbar-iframe { display: none !important; } сразу перед найденным выше кодом

    В результате получим код:
    #navbar-iframe { display: none !important; }
    /* Variable definitions

    Перед редактированием шаблона не забываем делать резервную копию, чтобы восстановить шаблон в случае неудачи.

    После того, как вы убрали навбар остается закономерный вопрос — как зайти в административную панель блога. Вы можете осуществить это двумя путями:
    1. Через ссылку в адресной строке http://www.blogger.com/
    2. Сделать кнопку или ссылку в вашем блоге на http://www.blogger.com/ для быстрого входа в админ.панель.

  12. Здравствуйте 🙂
    Скажите пожалуйста , как сделать сообщения , так скажем, в сокращенном виде. То есть видны только первые три — четыре сообщения, а для того,чтобы увидеть весь пост нужно нажать на кнопку "Детали". Вот пример : http://thorn-and-rose.blogspot.com/

    Заранее огромное спасибо,с нетерпением жду ответа .

  13. Аиша Моруа, это называется "убратьтекст пд кат". Для этого, когда вы пишите сообщение в текстовом редакторе в простом режиме (активна кнопка "Создать"), то в месте, где будет разрыв текста, нажмите на кнопку "Вставить ссылку Дальше".
    Второй способ — это в режиме HTML в месте разрыва текста вставьте код <!—more—>
    Пример:
    текст на главной странице <!—more—> продолжение текста.

    Аиша Моруа, если непонятно, то пишите комментарий, и я опубликую запись с картинками.

  14. @cummins распакуйте архив и загрузите файл в расширении .xml в блог (Шаблон -> Резервное копирование и восстановление -> загрузите шаблон из файла на компьютере). Перед тем, как загрузить шаблон обязательно нужно сделать резервную копии (Шаблон -> Резервное копирование и восстановление -> кнопка "Загрузить шаблон полностью).

  15. Вообще дико выбешивают шаблоны. Что в блогере, что на народе, что на других бесплатных площадках. Впечатление такое, что специально делают убого. Руки бы по отрывал.

  16. Андрей, что есть, то есть… К сожалению, выбрать нормальный шаблон для blogger бывает достаточно сложно. Приходится искать среди англоязычных. Там нормальных тем оформления предостаточно.

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

  18. Anastasia, похоже, что вы уже нашли ответ на свой вопрос. Проще всего, это сделать при помощи виджета HTML / Javascript и расположить его непосредственно под шапкой.

  19. Такой вопрос, который мне задал один мой читатель: в случае, если посетитель оставил комментарий к моему посту, а я на него ответил, можно ли сделать, чтобы человеку, писавшему комментарий на почту пришло сообщение об ответе не его комментарий? Заранее спасибо.

  20. Антон, о получении вашего ответа должен позаботится сам комменатор. Он получит ответ, если подпишется на комментарии.

  21. У меня на блоге в окне "Комментарии" стоит стандартный текст "Комментарии". Мне хочется вставить туда такой текст
    "Вам понравилась статья? Оставьте свое мнение о статье и о сайте.
    Добавить комментарий".
    Как это сделать?

  22. Татьяна, можете добавить надпись-обращение к читателям над окном "Комментарии".
    Админка blogspot -> Настройки -> Сообщения и комментарии -> В поле "Сообщение формы создания комментариев" введите обращение к комментаторам "Вам понравилась статья? Оставьте свое мнение о статье и о сайте.
    Добавить комментарий". Сохраните изменения

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

  24. Катерина, зайдите во вкладку "Дизайн", добавьте новый гаджет справа от основной части своего блога (я вижу, что у вас трехколоночный блог с 2мя сайдбарами справа и слева).
    У вас откроется окно списка гаджетов. Обратите внимание на, то что список разбит на категории, которые отображены в левой части общего списка гаджетов. Это категории:
    1. Основы,
    2. Дополнительные гаджеты,
    3. Добавить свой собственный.

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

  25. У меня еще вопрос. На сайте http://chasikov.net.ru/ -флеш часики даны великолепные часики,которые можно установить на блоге.Как это сделать на blogspot.com?

  26. Скажите пожалуйста. Как сделать, чтоб комментарии в сообщениях были адресными. То есть я могла ответить конкретному оппоненту. Как вот в этом блоге…есть активная функция Reply и ответ идет конкретному человеку.http://anechka-tyulpanechka.blogspot.ru/2012/03/blog-post_31.html#comment-form

  27. Здравствуйте, хочу установить в шапку блога анимированный файл, бегающие блестки , вокруг текста-ничего не получается(( сохраняется только картинка без эффекта.
    подскажите, что я делаю не так? и есть ли возможность установить подобный файл

  28. Екатерина, чтобы сохранить анимацию вашей шапки, ее не нужно загружать через вскладку Дизайн. Нужно загрузить ее на какой-нибудь фотохостинг с поддержкой анимации и вставить ее в виде кода в редакторе html.

    Екатерина, какой вы используете шаблон — стандартный или нет?
    В случае с нестандартным шаблоном все проще — нужно найти код изображения, который отвечает за отображение шапки (ориентировочно нужно искать что-то вроде .header и открывать рядом расположенные ссылки на изображения (они заканчиваются на jpg ли png) в новом окне до тех пор пока не найдете вашу шапку. Как только нужная ссылка будет найдена, замените ее на ссылку на изображение новой шапки. останется лишь исправить размеры в шаблоне html. Однако, если у вас новая гапка точно подходит по размерам, то этого делать не придется.

  29. Здравствуйте! Уже час маюсь с тем, чтобы изменить шрифт сообщений. Хочу более красивый себе. Делаю как нужно: Шаблон — изменить HTML и дальше выходит сразу этот текст с кучей символов, слов и т.п… Но в этому тексте я совсем не могу найти font-family. Ctrl-f тоже не помогает. Что делать? Помогите, пожалуйста…

  30. Victoria, значит ищите просто font. Вы найдете что-то вроде
    body {
    font: normal italic 12px Arial;
    бла-бла-бла
    }

    Измените последнее значение (семейство) шрифта (в моем случае это Arial) на другой шрифт.

    И последнее, в связи с изменениями в редакторе blogger, замечено, что не всегда адекватно работает поиск по коду. Лучше редактировать код в любом другом редакторе кода. Рекомендую использовать Notepad +

  31. Спасибо за ответ! Да у меня и просто font не ищется… Тогда Notepad. А у вас нет статьи по этому редактору? Я просто понятия не имею пока что это…

  32. после "читать дальше" изменяется заголовок статьи.
    Как его можно сохранить.Спасибо

    http://img6.imageshack.us/img6/5421/28726539.jpg

    http://img213.imageshack.us/img213/5086/31745450.jpg

    http://markfrm.blogspot.co.il/2013/03/blog-post_18.html

  33. Я хотела поменять шрифт и еще кое-то в блоге, но когда выбираю и нажимаю ок, никаких изменений не происходит. Как быть тогда?

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

  35. Катерина, эти значки видны только вам 😉
    Другим пользователям они не видны, и уже тем более никто, кроме вас, не может редактировать ваш блог.
    Лучше все равно убрать их, так как они дают вашему шаблону лишние внешние ссылки.
    1. Убираем значок "отвертка и гаечный ключ" (иконка редактирования гаджетов). Удалите все коды и шаблона blogger.
    2. Удалить значок "карандаш" (редактирование записей блога). Находим код
    <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
    <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
    <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif&#39; width='18'/>
    </a>
    </span>
    </b:if>
    и заключаем его между
    Должно получиться:
    <!—<b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
    <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
    <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif&#39; width='18'/>
    </a>
    </span>
    </b:if>—>

    3. Удаляем иконку корзину — удаление комментариев. Меняем код
    <b:if cond='data:showCmtPopup'>
    <div class='goog-toggle-button'>
    <div class='goog-inline-block comment-action-icon'/>
    </div>
    <b:else/>
    <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
    <img src='//www.blogger.com/img/icon_delete13.gif'/>
    </a>
    </b:if>
    на
    <b:if cond='data:showCmtPopup'>
    <div class='goog-toggle-button'>
    <div class='goog-inline-block comment-action-icon'/>
    </div>
    <!—<b:else/>
    <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
    <img src='//www.blogger.com/img/icon_delete13.gif'/>
    </a>—>
    </b:if>

  36. доброго вечера..чистила фотки в пикассе и видимо удалила те фотографии которые вставила для аватараки .. и теперь когда пишу каменты..нет красивой картинки … просто серый значек….подскажите как пошагово вставить фото ( или несколько)
    заранее благодарна

  37. s_wetik, попробуйте загрузить аватар в профиль еще раз. Перейдите в свой профиль blogger (можете это сделать, например, перейдя по ссылке с комментария). Нажмите на кнопку "Изменить" и загрузите свой аватар еще раз.

  38. при нажатии на профиль- картинка там есть….. и нет строчки или окошечка чтоб добавить/исправить… в альбом пикассы пару фоток добавила..но изменений не почувствовала….. не удалять же профиль вообще и создавать новый…

  39. s_wetik, если вы залогинены, то при переходе в свой профиль должна быть кнопка "изменить профиль". Скриншот тестового профиля здесь

    После этого попадете на страницу редактирования, где можно удалить фотографию профиля и загрузить новую.

    1. Смотря какую картинку вы хотите поменять. Универсальный вариант — найти ссылку на изображение в шаблоне html и заменить ее на новую ссылку на картинку.
      Если конкретизируете вопрос — напишу более конкретный ответ.

  40. Какая грандиозная работа — ответить лаконично и ёмко каждому "чайнику"! Мне очень нравится, огромное спасибо! Как-то возьмусь за свой слишком уж шаблонный блог, руководствуясь Вашими советами…

  41. Извините, делая комплимент вашей работе, забыл задать вопрос — могу ли я поменять стандартный голубенький фон шаблона на выбранную мною для фона фотографию? Оставлять ли её полностью, или сделать в виде рамки, подогнав размеры?

    1. Vital, конечно можно! В стандартном шаблоне blogspot это делается очень просто.
      Вкладка Шаблон -> кнопка настроить (под миниатюрой прсмотра вашего блога) -> Фон -> Нажмите на стрелочку под надписью "Фоновое изображение" -> Загрузить изображение.
      Кстати, в видеоуроке в этой статье вы можете увидеть, как поменять фоновое изображение. Для того, чтобы не смотреть весь видеоурок, вы можете перейти по этой ссылке и посмотреть урок с того, момента, где я изменяю фон на блоге. А вот и ссылка на видеоурок

  42. Хочу сделать что-то наподобие интернет-магазина. И вот такая проблема. Нужно вместо слова Оставить комментарий, чтобы было Сделать заказ. Как заменить стандартную надпись? А так же убрать надпись Комментариев нет? Спасибо!

  43. Может быть , подскажете, почему макет блога адекватно отображается только при входе на любую страницу, кроме главной? Исчезают гаджеты с боковой панели. На главной странице — не видно, разворачиваешь сообщение или уходишь на др. страницу — все в порядке! Что за беда?

  44. Хоббирум, значит у вас в коде каждого виджета прописаны условные операторы, которые и скрывают виджеты с главной.

    Каждый ваш виджет на блоге (в редакторе html блога) иммет код:
    <b:widget id='HTML1' locked='false' title='Ваш заголовок виджета' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <!— only display title if it's non-empty —>
    <b:if cond='data:title != &quot;&quot;'>
    <h3 class='title'>
    <data:title/>
    </h3>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:if>
    </b:includable>
    </b:widget>

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

  45. Спасибо, помогло, однако осталось неясным, как это могло поменяться, второй год один и тот же шаблон стандартный

  46. Здравствуйте, подскажите пожалуйста. Я загружаю видео на страницу в блоге, а видео почему — то не активно, что сделать чтобы его можно было на странице просмотреть?

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

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

  49. Елена, вкладки у вас не пустые. Просто у вас текст написан тем же цветом, что и цвет вкладок. Вам нужно изменить лишь цвет текста на вкладках.
    Когда вы вставляли код меню — вы его весь добавляли в виджет HTML? или часть в редактор шаблона блога?

    Вам нужно CSS код меню:
    .tabs-inner .widget li a {
    display: inline-block;
    margin: 0;
    margin-right: 1px;
    padding: .65em 1.5em;
    font: normal normal 12px Lobster;
    color: #7f3f3f;

    Найдите этот код (он может быть или в виджете HTML "Горизонтальная панель" или в шаблоне блога) и измените последнюю строчку, отвечающую за вывод цвета текста на цвет #1b1b1b или на другой.

  50. Спасибо, Наталья, большое. Но я имела ввиду не это. КАК их заполнить: наполнить их содержанием. Проще говоря, как втолкнуть туда файлы(текстовые и.т.п.)…

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

  52. Наталья, спасибо за советы… Если не трудно, уделите мне еще внимание))) Поставила меню горизонтальное, но оно, во-первых, раскрывается аккордеоном вниз только втом случае, если я его перемещаю под заголовок блога, во-вторых, исчезают при нажатии уже 2,3,4 подменюшки)))…Заранее благодарна)))

  53. Елена, выпадающие меню в блогспот, особенно в стандартных шаблонах — еще та головная боль. Попробуйте воспользоваться кодом:
    .tabs-outer, .tabs .widget ul {overflow: visible;}
    .tabs .widget ul li {position: relative; z-index: 1000;}
    .tabs .widget ul li a:nth-child(n+2) {position: absolute; bottom: -100%; left: 0; z-index: 2000; width: 20em; border-radius: 0; display:none;}
    .tabs .widget ul li a:nth-child(3) {bottom: -200%;}
    .tabs .widget ul li a:nth-child(4) {bottom: -300%;}
    .tabs .widget ul li a:nth-child(5) {bottom: -400%;}
    .tabs .widget ul li a:nth-child(6) {bottom: -500%;}
    .tabs .widget ul li a:nth-child(7) {bottom: -600%;}
    .tabs .widget ul li a:nth-child(8) {bottom: -700%;}
    .tabs .widget ul li a:nth-child(9) {bottom: -800%;}
    .tabs .widget ul li a:nth-child(10) {bottom: -900%;}
    .tabs .widget ul li:hover a {display: inline-block; box-shadow: none; background: rgba(0,61,118,.95);}
    .tabs .widget ul li:hover a:hover {color: rgba(66,170,255,1);}

    Его нужно вставить в шаблон перед кодом: ]]>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *