Редактирование HTML-кода Blogger

Познакомить с редактированием HTML-кода Blogger было основной целью, ради которой я обратилась к теме HTML в статьях "Что должен знать блогер о HTML и CSS" и "HTML-код страницы, HTML-теги". В них было дано поверхностное представление о языке гипертекстовой разметки. Если у вас возникнет желание более детально изучить язык HTML, к вашим услугам в сети огромное количество разнообразных обучающих материалов.

Ну а в данной статье рассмотрим непосредственно HTML-код шаблона Blogger.
Для примера я скопировала начальную часть HTML-кода двух своих блоггеровских сайтов. Один из них тестовый, и там сохранился девственный код Blogger (замаркирован фиолетовым).

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */

Второй фрагмент кода взят с сайта одной из партнерок (замаркирован желтым). Он содержит внесенные мною коррективы:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='4008cdbac3230534' name='yandex-verification'/>    
<meta content='LbDACtz9TkfoA7Z-z4EkNUAyUEZHQEytgIfDZMNSm58' name='google-site-verification'/>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
<b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<meta content='Удивительный подарок ...Сказки написаны...Они воспитывают ...' name='description'/>
</b:if>
<meta content='детские сказки,...,детские книги' name='keywords'/>
<script type='text/javascript'>
  var _gaq = _gaq || [];
  _gaq.push([&#39;_setAccount&#39;, &#39;UA-24141835-3&#39;]);
  _gaq.push([&#39;_trackPageview&#39;]);
  (function() {
    var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
    ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
    <b:skin><![CDATA[/*-----------------------------------------------
Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
URL:      www.noaesthetic.com
------------------------------------------------------------------ */

Не надо быть специалистом в HTML, чтобы заметить, что коды отличаются, хотя для обоих сайтов я использовала один и тот же шаблон. Попробуем препарировать измененный  код (желтый).
В самом начале кода объявляется используемая в Blogger кодировка ("UTF-8") и тип документа (DOCTYPE). Тег <html>, как видим, не используется - ненаказуемо.
Далее помещен открывающий тег <head>.

Содержимое тега <head>


Тег head
На содержимом заголовочной части документа остановимся подробнее, т.к.сюда заносится значительная часть персональных настроек кода. Сюда помещаются различные мета-теги, тег <title> и пр. Как мы уже знаем, содержимое тега <head> является рабочей информацией для браузера и не выводится на экраны мониторов, за исключением тега < title >.

Свои настройки, внесенные лично мною в код, я выделила цветным шрифтом.
  • Следом за открывающим тегом <head> я разместила мета-теги идентификаторы веб-ресурса Яндекс и Google (выделены зеленым). Это те самые идентификаторы, о которых говорилось в статье "Регистрация блога в поисковых системах". В этой же статье указывалось, что для блогов на платформе Blogger регистрация в Google производится  автоматически при условии выполнения соответствующих настроек. При создании блога я перестраховалась: и настройки установила, и код внесла. В принципе, он здесь не нужен, но уже не вижу смысла убирать.
<meta content='4008cdbac3230534' name='yandex-verification'/>    
<meta content='LbDACtz9TkfoA7Z-z4EkNUAyUEZHQEytgIfDZMNSm58' name='google-site-verification'/>
  • Далее идет часть кода, обеспечивающая доступ пользователей к блогу посредством мобильных телефонов.
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
  • Следующие 2 строки кода отвечают за заголовок блога. Под заголовком понимается шапка блога, включающая в себя название, описание, титульное фото блога.            Первая строка  обеспечивает автоматическое выведение в заголовок необходимых мета-тегов. Если просмотреть исходный код страницы сайта (кликнуть правой кнопкой мышки на странице сайта, а затем в выпавшем меню выбрать пункт "исходный код страницы" или "просмотр кода страницы"), то там не будет самой строчки <b:include data='blog' name='all-head-content'/>. Вместо нее будут выведены мета-теги, ссылки на иконки, на CSS, скрипт-файл и т.д.  
  • Вторая строка отвечает за содержание тега <title>. Стандартный шаблон Blogger выводит в <title> такую комбинацию: "Название домашней странички: название текущей страницы". Поскольку меня данный вариант не устраивает, вторую строку я убрала из кода, а вместо нее добавила другой код, приведенный в следующем пункте. 
<b:include data='blog' name='all-head-content'/>
 <title><data:blog.pageTitle/></title>


Стандартная структура тега title
  • Эта часть кода (синего цвета) была добавлена мною с целью изменения структуры тега  <title>. При такой комбинации название блога выводится в title только для главной страницы сайта. Для всех остальных страниц в title отображается только название текущей страницы.
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Измененный тег title

Возможно, у кого-нибудь возникнет вопрос: "К чему все эти манипуляции с кодом? Не проще ли оставить все без изменения?" Что касается тега  <title>, он требует особого внимания. Грамотное написание данного тега является одним из ключевых моментов внутренней оптимизации сайта. В статье "Влияние тега title на продвижение сайта"
тег <title> рассмотрен более детально.
<meta content='Удивительный подарок ...Сказки написаны...Они воспитывают ...' name='description'/>
</b:if>
<meta content='детские сказки,...,детские книги' name='keywords'/>
  • Замыкает список внесенных мною персональных настроек в HTML-код скрипт (зеленый шрифт), содержащий идентификатор веб-ресурса Google Analytics. Сервис Google Analytics и установка кода отслеживания подробно рассматривались в статье "Регистрация в Google Analytics".
Мы рассмотрели важный фрагмент HTML-кода  шаблона Blogger и минимальный набор корректировок кода, которые должен уметь сделать рядовой блогер. Правке CSS, позволяющей изменить размеры и расположение элементов, я планирую позже посвятить отдельную статью.

    Правила внесения изменений в код-HTML Blogger


Хочу еще раз напомнить о необходимости соблюдения техники безопасности при правке кода-HTML Blogger.
  • Прежде всего желательно сохранить резервную копию шаблонаЭто даст возможность вернуться к прежней версии шаблона при неудачной его правке. Чтобы проделать эту операцию, в Blogger предусмотрена специальная кнопка "Резервное копирование и восстановление".

  • Резервное копирование шаблона

    После нажатия на кнопку появится окно:

    Резервное копирование и восстановление

    Для сохранения шаблона на жестком диске компьютера следует нажать на "Загрузить шаблон полностью", а для загрузки старой версии шаблона со своего компьютера на сервер - "Выберите файл".
    Данная функция позволяет сохранить шаблон сайта.
    Для сохранения содержимого сайта в Blogger предусмотрена функция "Экспорт блога". Она доступна на странице Настройки - Другое.

  • После сохранения шаблона с панели инструментов Blogger перейдем на вкладку Шаблон - Изменить HTML - Приступить.
  • После внесения изменений в код нажмем на клавишу "Просмотр". Если страница отобразится правильно и не появится предупреждающих надписей, можно жать на клавишу "Сохранить".
Related Posts : Как продвигать сайт

Анонимный комментирует...

My brother recommended I might like this website. He was entirely right.
This post actually made my day. You can not imagine simply how much time I had spent for this information!
Thanks!
Feel free to visit my homepage ... web design agency

Марина комментирует...

Thanks a lot for visiting my blog and for your nice comment! I hope you'll come back to view future posts.

Антон комментирует...

Ладно, это все хорошо. А как можно разместить javascript-файлы, не размещая непосредственно код в теле шаблона? Ну если код скрипта не большой, то его еще можно поместить в сам шаблон. А как быть с фоновыми картинками?

Марина комментирует...

Добрый день, Антон! Вопрос не совсем по теме моего блога, т.к. он предназначен для новичков.
Здесь я пишу о том, в чем непосредственно сама разобралась, а тема скриптов пока не стояла на повестке дня.
Если фоновая картинка в формате JPG, GIF или PNG, которые можно загрузить в дизайнере шаблонов Blogger, не устраивает, то может сделать ее в фрейме? Загрузить скрипт на сторонний ресурс, который это позволяет, а затем показать его в отдельном окне?

Марина комментирует...
Этот комментарий был удален автором.
Анонимный комментирует...

Добрый день! У меня к Вам вопрос. Я новичок во всем этом, вот с миру по нитке читаю и делаю.

Вот мой сайт: http://www.pc-technologies.ru я его делаю так просто для себя "хобби". Как мне сделать чтобы описание статьи было не 2 строчки как сейчас у меня, а 3 или 4. Это как я понял прописано где то в шаблоне. Как мне это найти?

Если знаете как это сделать попрошу Вас ответить тут или на почту написать: Paschok888@yandex.ru

Елена и Александр Никитины комментирует...

Здравствуйте!
Не смог в инете найти ответ, решил в очередной раз обратиться к специалисту. Подскажите, где мне найти инфо, как вот здесь http://www.oricoach.ru/ сделать вместо главной страницы что-то типа http://spo565.blogspot.ru/ . Кроме как создать ещё один блог с ссылками в голову не приходит. Буду очень признателен.

Марина комментирует...

Здравствуйте, Елена и Александр! Для сайта на платформе Blogger мне видится единственная возможность добиться желаемого результата - использование шаблона "Динамический просмотр", причем его разновидности "Mosaic".

Анжела Анжела комментирует...

Здравствуйте, нужна помощь для чайника.
1.есть страница, как бы с содержанием, перечисляем сотни названий первых блюд, но писать сотни рецептов на одной странице, идиотизм, кто будет искать, никто. Значит нужно нажать на суп и перейти на другую страницу. вот здесь и загвоздка, размещаю текст у себя в черновиках на блоге, но никто не видит эту страницу. как правильно сделать?
2. Даже часы и календарь не могу разместить. нашла рекомендации, сделала по описанию, перехожу посмотреть блог и пустота. Может что подскажите?

Марина комментирует...

Анжела, если я правильно поняла из ваших слов "размещаю текст у себя в черновиках на блоге, но никто не видит эту страницу" - вы не публикуете материал, оставляете в черновиках и хотите, чтобы его было видно? Для этого надо опубликовать.
2. В Блоггере есть специальный гаджет - "Календарь". Дизайн блога -Добавить гаджет - Другие гаджеты. Не забывайте нажать на кнопку "Сохранить"

Elena комментирует...

Здравствуйте! Кто-нибудь знает, как вырезать из динамического шаблона кнопки социальных сетей?

Dominoda комментирует...

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

Марина комментирует...

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

Сергей Беляков комментирует...

Как найти подскажите пожалуйста!

Марина комментирует...

Что найти?

Василиса Докторова комментирует...

добрый день. в какую часть кода, нужно вставить код рекламы google/adsense?

Александр Глуцкий комментирует...

С кодом шаблона все ясно и понятно.А КАК получить доступ к правке кода главной страницы??

Katya Fryk комментирует...

Марина, здравствуйте!
Я горе-новичок:( хотела вставить в блог кнопку для фейсбук-комментариев, полезла в настройки шаблона html. И видать что-то там подтерла успешно. Теперь блог видно только с домашней страницы - то есть все посты друг за другом. Открыть по одному не выходит - ни одна из прямых ссылок на пост не работает.
Подскажите, как исправить беду? (конечно, сохранить шаблон я не додумалась:(

Марина комментирует...

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

Отправить комментарий