30 сентября, 2007

Редизайн блога

Сегодня ночью занялся обновлением дизайна блога.
Все, что мне при этом понадобилось это умение читать коллег-блоггеров, пользоваться Google'ом, немного знаний о html+css и море энтузиазма.

Итак, о виджетах и кнопках, используемых на блоге. По порядку: сверху вниз, слева направо.

0. Nav bar в шапке блога
Его я просто снес. Спасибо virens за идею. инструкция здесь
теперь на этом месте Меню бар..

1. Меню бар в шапке блога
Самая юзабильная кнопка здесь, на мой взгляд, это Аккаунты Google. Те, кто пользуется сервисами гугла, не только блоггером, поймут меня. Как добавить меню бар читаем здесь

P.S. Задумался над шапкой блога. Надо как-нибудь попроще написать по-поводу гейтса и торвальдса =) или перефразировать. может коллеги-блоггеры подкинут идею?

2. Поиск по блогу (Custom Google Search)
Create

3. Буквицы
Каждая статья на моем блоге начинается с буквицы или инициала.
В таблицу стилей <style> добавляем
.dropcaps { 
float:left;
color: #800000;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px; }

В статье я просто выделяю первую букву в тэг span <span class="dropcaps">А</span>
..и получается большая заглавная буква, растянутая на 5 строк.

4. Feeds в блоггере
Описание Feed в блоггере

5. Полезный хак с FeedBurner

6. Облака тэгов
Облако тэгов можно сделать по этой инструкции

7. "свертывание" статьи, или full post хак
Blogger beta и пара советов

8. Меняет стандартную иконку favicon блоггера [B] на свою
<head> заменяем на
<head>
<link href='http://mysite.ru/favicon.ico' rel='shortcut icon'/>


9. Содержание блога (Table of Contents)
Этот виджет можно скачать и настроить по этой статье

10. Отображение исходного кода в статьях
Для этого я испольую тэг <pre>. <pre style="font-size:90%;color:#009000;">
Для отображения html кода заменяйте < этим & lt; и > этим & gt;.

11. Сервис генерации E-Mail иконок
E-Mail Icon Generator
Для GMail, Hotmail, MSN, Yahoo!, AOL и многих других!
а также коллекция иконок в стиле web2.0 >


Ссылки, которые пригодились при редизайне блога, возможно и Вам они тоже пригодятся
BeautifulBeta
Blogger University
Digital Inspiration
Atubborn Fanatic
Hackosphere
Designing Blog Color Schemes

И еще хотел поблагодарить блоггеров за рефераллов
Записки дебианщика
Linux 2
Блог интернет-разработчика

..и конечно же спасибо моим комментаторам и читателям ;)

P.S. Tuxedo (Transactions for Unix, Extended for Distributed Operations)

8 комментариев:

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

Всё в общем классно, но есть некоторые идеи:
1. Убери гугловскую рекламу - очень бесит, тем более, что денег с неё получить проблематично. Хотя она давится noscript в Огнелисе, но всё-таки.

2. Название блога можно написать и покрупнее.

3. Виджет "Оглавление блога" работает, только если позволить всю джаву :-) но идея интересная, я про такое не знал.

4. Два поиска - это слишком. Лучше оставить кольцевой и снести тот, что наверху страницы. В кольцевом поиске ты есть, так что...

5. Буквица... ну если так нравится. А вообще оригинально.

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

7. Подписке на фиды место в боковой панели, а не в каждом посте - из-за этого страница кажется слишком тяжёлой.

В остальном классно.

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

@virens
Так как мой блог постоянно находится в beta, то он постояно будет изменяться в лучшую сторону, поэтому огромное спасибо за комментарий. Приму все его пункты к сведению.

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

Получилось неплохо.

Хочу отметить, что автоматический перевод статьи — идея хорошая, но у меня она не работает ни для одного языка, кроме английского. А «английский» на поверку оказался транслитом.

Поиск и RSS-ссылки над статьями не очень нравятся.

Идеи для подзголовка: «GNU/Economix», «Линуксист-аналитик», «линуксоид в галстуке» (что пришло в голову, как можно коротко сплавить воедино GNU/Linux, приличную одежду, экономику, ассоциации на The Economist и *nix вообще).

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

@jetxee

Получилось неплохо.
А то бы, 4 часа старался.
Кстати, цвета хорошо сочитаются с темой iFox Metal для Firefox (Iceweasel)

Хочу отметить, что автоматический перевод статьи — идея хорошая, но у меня она не работает ни для одного языка, кроме английского. А «английский» на поверку оказался транслитом.
Извини, это уже просчет Гугла, сервис перевода их.

Поиск и RSS-ссылки над статьями не очень нравятся.
С поиском подумаю, но RSS оставлю

Идеи для подзголовка: «GNU/Economix», «Линуксист-аналитик», «линуксоид в галстуке» (что пришло в голову, как можно коротко сплавить воедино GNU/Linux, приличную одежду, экономику, ассоциации на The Economist и *nix вообще).
Отличная идея \m/

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

Хотел добавить по поводу автоматического перевода. Сервис может и гугловский, но блог то все-таки твой. У меня на все языки кроме английского аналогично не переводит, пишет "Bad request". Перевод на английский работает, причем это действительно перевод, транслитерацией пишутся только непереводимые слова. Я советую просто убрать из списка остальные языки, чтобы не морочить людям голову...

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

@triklozoid
протестировал виджет перевода, Bad Request дает знать, что пора бы убрать многие языки из меню.

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

Нормальный у гугла перевод, даже с юмором. Например, месяц назад переводил автоматом один из своих постов, результат:
Стишок прикольный (оригинал)
Glamour poem (перевод) :-)))

Сейчас переводит как "funny poem". Видимо, починили.

Неизвестные слова гонит транслитом, чем немало смущает иностранных товарищей.

С русского есть перевод только на английский. Кстати, я тоже снёс другие языки, дабы не смущать.

И ещё. Скрытая навигационная панелька наверху - это плюс. Стало лучше. Строку поиска SiteSearch Google я бы снёс - есть ведь кольцевой поиск.

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

@virens
Стишок прикольный (оригинал)
Glamour poem (перевод) :-)))

:lol: