Сайт на платформе Blogger от компании Google – отличный вариант для тех лидеров гильдий, которые не хотят или по каким-то причинам не могут оплатить дизайн или хостинг для своего детища. Тем более, что создание уникального дизайна для сайта на заказ – не всегда верное решение, потому что в сети множество бесплатных шаблонов для той или иной CMS. Если вас все еще настораживают аббревиатуры вроде CMS и вы не читали моего обзорного материала о том, на какой платформе можно бесплатно сделать красивый сайт для гильдии – почитать можно здесь. Сегодня же речь пойдет не о том «где», а о том «как»:

• изменить логотип
• изменить/удалить часть меню
• изменить размеры сайдбара (в нашем случае – правой колонки)
• увеличить ширину основных сообщений
• настроить «карусель» и изменить ее размеры
• установить форум и другое

Все, что написано ниже – пошаговая инструкция по настройке конкретного шаблона. Его вы сможете скачать здесь и самостоятельно настроить – считайте, это ваша тренировка перед большим плаванием. Демо-версия находится по этому адресу.

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

Все шаблоны по структуре своей мало чем отличаются, и если вы разберетесь в строении одного, то при желании сможете настроить и другие. Вы можете посмотреть результат моей работы по адресу consortiumtest.blogspot.com – понажимать на кнопочки, посмотреть, как выглядят комментарии и т.п.

Первое, что нам нужно сделать – это перейти по адресу blogspot.com, авторизоваться в системе и нажать кнопочку «Создать блог». Здесь мы пишем название блога и желаемый адрес, доступность которого легко можно проверить. Войдя в панель управления блога, вы увидите меню, как на картинке:

Нажмите на вкладку «Дизайн», а затем «Изменить HTML». Перед вами – форма для загрузки шаблона на сервер, ниже – его код. Его мы пока не трогаем, а вместо этого распаковывем скачанный архив шаблона в любую папку у себя на компьютере. Нас интересует файл GamePro.xml – его-то и нужно загрузить на сервер. После загрузки можете посмотреть, как выглядит ваш ненастроенный шаблон с «заводским» логотипом.

В меню «Дизайн – Изменить HTML» кликаем мышкой в любом месте кода шаблона. Нажимаем Ctrl+F для поиска в тексте (или любую другую комбинацию, характерную для вашего браузера). В поле пишем: #header-wrapper и видим следующую строку:

Поздравляю, вы только что узнали ширину (width) и высоту (height) стандартного логотипа! Чтобы ваш сайт при настройке случайно не перекосило, нужно менять логотип на картинку таких же размеров.

Вообще, место в коде, где прописан адрес логотипа, всегда находится мной стандартным методом научного тыка. Я подозреваю, в тайне, конечно, что более умные способы существуют, но упрямо набираю в поиске по странице слово «background» или «logo», жму F3, копирую каждый найденный адрес в браузер и смотрю, та или не так картинка откроется.

Но, как правило, адрес логотипа вы найдете под строкой «outer-wrapper». Так что ищите ее и вам воздастся:

Когда вы подготовили картинку для загрузки на сервер, возникает закономерный вопрос: а куда ее загрузить? Ведь Blogger’ом загрузка картинок в шаблон не предусмотрена (если только они не иллюстрация к сообщению).

Вы можете выбрать любой бесплатный хостинг для картинок, но будет неприятно, если ваше изображение спустя какое-то время удалят. Поэтому как вариант – создаем закрытый альбом «Вконтакте», загружаем туда все что нужно, копируем адрес ссылки и вставляем в скобки после слова url.

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

Возвращаемся к коду шаблона и ищем слово «Home». Вы увидите комплект из трех ссылок. Поискав еще, ниже найдете индентичный код. Если мы хотим убрать меню в самом верху логотипа, то нужно удалить первый найденный блок кода – весь кусок, который представлен на скриншоте.

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

Здесь нам нужно удалить весь фрагмент. А в идентичном коде ниже удаляем строки с 3-ей по 6-ю (там, где про Post RSS).
Строку — пока не трогаем, к ней мы еще вернемся!

Затем редактируем ссылку на главную страницу.

после преобразований должен выглядеть как

По аналогии вы можете русифицировать так и другие ссылки, например: ищем «Blog Archive» и меняем на «Архив», «Follow Us on Twitter» на «Подпишись на твиттер!». То же самое касается RSS — Subsribe to our RSS feed (если эта лента вообще вам нужна).

Чтобы человек мог подписаться на ваш твиттер, кликнув по ссылке, найдите код:

Вместо username пишем логин твиттера, например, mmoboom. Обратите внимание, для того, чтобы перевести надписи, нужно трогать текст только после слов title и/или во фрагменте ссылок

Мне очень нравится идея твиттера для гильдии, в сочетании с шаблоном сайта, который его поддерживает. Сама делала для своего сайта – выглядело неплохо (птичка в шапке «чирикала» объявления о расписании рейдов и т.п.).

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

Заходим в «Дизайн – Элементы страницы» и в правой колонке жмем на кнопку «Добавить гаджет». Вводим в окне поиска слово «twitter» и устанавливаем найденный Twitter Updates 2.2: FeedWitter. Кстати, можно так же подключить интересные виджеты для Blogger’а, например, пользователи сайта смогут постить понравившиеся ссылки прямо к себе на страницу в социальной сети.

Затем открываем окно настроек нашей ленты.

Называем новостную ленту на свое усмотрение, указываем высоту виджета и адрес вашего твиттера. Ниже – количество отображаемых сообщений. Тут уже дело вкуса, но помните, что слишком много твитов в ленте визуально перегрузят ваш сайт, лучше остановиться на количестве от 1 до 5 и писать туда только самые важные и срочные гильдейские новости.

Так как выше этого гаджета у нас уже есть ссылка «Подпишись на твиттере», то галочку в настройках с «Display Follow-Me Link» можно снять. Настроить цвет текста и ссылок вам поможет небольшая справка по этому адресу — www.w3schools.com/Html/html_colors.asp.

Выбираем нужный цвет для font color (у меня #F0F0F0) и link color (у меня #99FFCC) и копируем его код в соответствующее поле. Жмем «обновить», смотрим те ли цвета получились, а затем – «Посмотреть блог», чтобы оценить, как они сочетаются с шаблоном.

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