Сообщений - как подключить css файл к своему блогу - очень и очень много. Поэтому ещё одно погоды не сделает. Единственное отличие - тут будет сообщено ещё и про настройки, которые я сделал для своего блога.
Если почитать кучу всяких полезных и не очень статей по оптимизации, то можно сильно изуродовать свой сайт. Есть такая даже поговорка - с дуру можно и х*й сломать.
Это я к чему. Можно делать много всяких ништяков. Но для себя я решил что файл стилей должен быть один. И файл с JavaScript один. Их нужно упаковать и не трогать - что бы пользователь зайдя раз к тебе сайт, скачал их и пользовался до конца второго пришествия (ребрендинга например)))).
Поэтому крайне важно где будет размещён этот файл со стилями. Если вы положите у себя на компьютере, а компьютер по диалапу будет вечно в сети... ну можете попробовать, но поверьте на слово. Работать будет очень и очень медленно!
Так вернёмся к нашим баранам. Что бы подключить css файл к своему блогу, необходимо сделать следующее.
- В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
- Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
- Ищем конструкцию </head> и над ней вставляем код:
- Сохраняем шаблон
<!-- Описание подключаемого файл BEGIN --> <link rel="stylesheet" href="Путь к файлу"> <!-- Описание подключаемого файл END-->
- Наслаждаемся!
Так - очередной рассказ как подключить файл я рассказал. А! Если не знаете где разместить файл - почитайте сообщение Где разместить файлы в сети для blogger или как изменить mime type в хранилище кода Google.
Теперь опишу что я размещу в этом файле. Но для начала я его создам. Где его размещать и как создавать - выше ссылку уже дал. В результате у меня файл подключается так
Отмечу то, что файл пока будет не упакованный. Пока идёт разработка - будет в общем виде. А как закончу, так и упакую.
Что я буду туда помещать. Ну начну с того, что изменю стиль заголовка сообщения - сейчас он выглядит как ссылка. А мне это не нравится. Для этого я добавил вот такую вот строчку
Теперь что касается панели вверху. Может кому то и удобно, но лично мне это всё напоминает панельку на сайтах народру. Этакая напоминалка что блоги не нам принадлежат. В общем кому как - мне не нравится!
А раз мне не нравиться, значит я её уберу. Google пока не пришёл к тому, что бы её вывод сделать настраиваемым (во всяком случае я в данный момент об этом не знаю), а раз так - будем её прятать.
Что бы избавиться от панельки сверху блога в файл со стилями добавим следующий код
Кого то может сказать - но там же были удобные кнопки! Об этом попозже - я расскажу как сделать что бы эти кнопки были и никому не мешали!
Обновление от 23.08.2011: Делаем панельку
Ну и последнее на сегодня. Если зайти в текст шаблона, то можно увидеть примерно следующее
Для этого мне надо как бы заполнить переменные. Но сделаю проще - открываю свой блог, затем открываю на просмотр текст страницы и вижу
Всё прекрасно заполнено.
Теперь надо это всё убрать из шаблона и поместить в моём файле.
Теперь опишу что я размещу в этом файле. Но для начала я его создам. Где его размещать и как создавать - выше ссылку уже дал. В результате у меня файл подключается так
<!-- Файл стилей для блога sedegoff.com BEGIN -->
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/sedegoff.com.css"/>
<!-- Файл стилей для блога sedegoff.com END-->
Отмечу то, что файл пока будет не упакованный. Пока идёт разработка - будет в общем виде. А как закончу, так и упакую.
Что я буду туда помещать. Ну начну с того, что изменю стиль заголовка сообщения - сейчас он выглядит как ссылка. А мне это не нравится. Для этого я добавил вот такую вот строчку
h3.post-title a{
color: #444;
}
Теперь что касается панели вверху. Может кому то и удобно, но лично мне это всё напоминает панельку на сайтах народру. Этакая напоминалка что блоги не нам принадлежат. В общем кому как - мне не нравится!
А раз мне не нравиться, значит я её уберу. Google пока не пришёл к тому, что бы её вывод сделать настраиваемым (во всяком случае я в данный момент об этом не знаю), а раз так - будем её прятать.
Что бы избавиться от панельки сверху блога в файл со стилями добавим следующий код
#navbar{
display: none;
}
Кого то может сказать - но там же были удобные кнопки! Об этом попозже - я расскажу как сделать что бы эти кнопки были и никому не мешали!
Обновление от 23.08.2011: Делаем панельку
Ну и последнее на сегодня. Если зайти в текст шаблона, то можно увидеть примерно следующее
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
Это не что иное, как шаблон для стиля. Иными словами эти переменные заполняет генератор страницы. А так как с шаблоном я уже определился - то смысла в нём уже и нет. Поэтому выношу его в свой файл.Для этого мне надо как бы заполнить переменные. Но сделаю проще - открываю свой блог, затем открываю на просмотр текст страницы и вижу
body {
font: normal normal 14px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
color: #444444;
background: #ffffff none repeat scroll top left;
padding: 0 0 0 0;
}
Всё прекрасно заполнено.
Теперь надо это всё убрать из шаблона и поместить в моём файле.
- В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
- Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
- Далее открываем блог на просмотр и затем открываем исходный код страницы. В файл со стилями нужно перенести содержимое представленных ниже тегов. По хорошему надо ещё объединить одинаковые значения. Например в обеих этих секциях идёт настройка для тега body
<style id='page-skin-1' type='text/css'> .... </style> <style id='template-skin-1' type='text/css'> .... </style>
- Теперь надо убрать это всё в шаблоне. Для этого в панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
- Теперь внимательно. Нужно в тексте шаблона конструкцию
заменить на конструкцию<b:skin> ... </b:skin> <b:template-skin> ... </b:template-skin>
Внимание! Троеточие - это всё что угодно между этими тегами.<b:skin></b:skin>
- Сохраните шаблон
- Проверяйте. Возможно понадобиться обновит страницу через Ctrl+R (Ctrl+F5). Если после этого страница выглядит криво, значит в файл Вы не перенесли всё что нужно. Восстановите шаблон из файла. И попробуйте ещё. Если будет время, то и я могу посмотреть и помочь.
Комментариев нет:
Отправить комментарий