среда, 4 марта 2015 г.

Редактирование 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 : Как продвигать сайт

0 коммент.:

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