А причина в том, что в нём очень многое было не на своих местах. Предлагаю сравнить старый и новый дизайны по пунктам.

Для удобства я сделал скриншоты (с помощью программы Pix.AM), на которых обвёл элементы страницы и пометил их цифрами. Таким образом будет проще отследить перемещение этих элементов при изменении дизайна.

Как видите, скриншотов старого дизайна пришлось сделать аж целых три. Новый же уместился в один.

1. Заголовок блога

В старом дизайне по каким-то причинам, о которых или я не помню или их вообще не было, крупно написано «Seogad». А снизу подписано моё имя. На самом же деле, Seogad — это всего лишь адрес сайта. Не более того. Так что пусть он теперь адресом и останется.

В качестве заголовка вполне подойдёт моё имя — блог принадлежит мне, пишу в него я, так что вопросов нет.

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

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

2. Рубрики

Здесь передо мной стояло две задачи. Во-первых надо было сократить отведённое для списка рубрик место. Можно было использовать выпадающий список с опциями, но есть «во-вторых».

При использовании выпадающего списка вместо ссылок используется форма, которая нафиг мне не нужна, так как ссылки, как известно, поисковикам приятнее кушать. Тем более те, которые уже давно занимают определённое место на сайте.

В итоге было решено оставить старый виджет с категориями, но с помощью нехитрого скрипта закрасивить это всё в выпадающий список с использованием css и jQuery. Помог мне в этом мой друг и партнёр Сергей.

Если интересно, сделаю отдельный пост с описанием этого метода.

3. Поиск

Для поиска вполне найдётся место в верхней части, нечего ему пространство в сайдбаре занимать.

4. Кнопки добавления в социальные сети

Старые кнопки добавления ссылок на пост в социальные сети было решено заменить на нормальные кнопки со счётчиками, так как интересно всё-таки, сколько раз и куда надавили любимые читатели.

5. Подписка на RSS

Вместо дебильной кнопки вполне подойдёт понятная людям ссылка.

6. Подписка на E-mail

Да и подписку по электронной почте делать кнопкой не стоит. Пусть лучше сразу укажет товарищ свой e-mail, а потом уже нажимает — так нагляднее.

7. Фото

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

8. Ссылки на страницы в социальных сетях

Во-первых, нет смысла размещать ссылки на те социальные сети, в которых меня никогда не бывает. Во-вторых, вместо затерянного в левом сайдбаре виджета находиться на видном месте им будет приятнее. Мне так кажется =)

9. Счётчики RSS и Twitter

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

А серым цветом — потому что их и так видно. Незачем лишний раз глаза читателям выдавливать — их беречь надо, им же меня ещё читать =)

10. Кнопки Webmoney

Вообще, их можно сейчас и убрать, так как то, зачем они были поставлены (рекламный движок Daos) в данный момент на сайте не используется.

Но всё-таки пусть повисят пока. Мало ли, захочется снова включить этот скрипт, а специально ещё и кнопки для этого вставлять — уже сейчас чувствую — будет лень.

11. Метки

Нафиг метки. Максимум, что можно было бы для них сделать, это такую же штуку, как для рубрик, но так как ради сокращения количества внутренних ссылок метки показывались не все, то какой смысл их вообще показывать. Кому надо, нажмёт на интересующую его метку в посте.

Возможно я не прав. Что думаете?

12. Последние комментарии, случайные записи, последние записи...

А вот от этого уж точно можно отказаться. Пользы никакой, только место занимают и лишние внутренние ссылки создают.

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

Вывод — думай, прежде чем делать. Ну или набирайся опыта.

Так как осталось свободное место, то решил ещё добавить на видное место свой телефон (заказывают ведь иногда услуги через блог) и порадовать себя дополнительным доходом с помощью партнёрских программ скорее всего известных вам систем (элементы №13 и №14).

Вообще, реферальными ссылками я раньше никогда не делился. То ли зазорно было, то ли смысла не видел. А сейчас понимаю, что наверное зря. Ну да ладно. Ещё отработают своё.

На сегодня всё =) Очень рад, что удалось наконец обновить дизайн. Всё никак времени не было. Теперь хоть желание проснулось делиться с вами всякими интересностями, как раньше.

Желаю вам удачи в делах!
Артём Савельев

Возможно, для кого-то это будет не новостью, но ничего страшного — мудрый и уже начитанный человек пожелает удачи тем, кому ещё предстоит это узнать.

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

Мои копирайты выглядят примерно так:

© 2009—2010, Правообладатель

Первая дата статична, это год открытия проекта. Вторая же дата изменяется ежегодно, то есть в 2011 году этот же копирайт без какого-либо вмешательства превратиться в:

© 2009—2011, Правообладатель

Достигнуть этого очень просто. Достаточно вместо последней даты вставить короткий php-код следующего содержания:

<?php print date('Y') ?>

Если вы хотите проделать это с сайтом на Wordpress, то скорее всего изменения вам придётся произвести в файле footer.php вашей темы.

Также, нередко на разного рода информационных порталах нужно отобразить сегодняшнюю дату и время. Это тоже достаточно просто достигается с помощью подобного кода:

<?php print date("d.m.Y / H:i")?>

В результате мы получим примерно следующее:

21.11.2010 / 19:43

Вы можете изменить формат даты и времени, использовав другие символы, которые подробно описаны в официальном руководстве по PHP.

Также можно заменить цифры в месяце на слова, для этого понадобится код:

<?php date_default_timezone_set('Europe/Moscow');
function russian_date(){
$date=explode(".",date("d.m.Y"));
switch ($date[1]){
case 1: $m='января'; break;
case 2: $m='февраля'; break;
case 3: $m='марта'; break;
case 4: $m='апреля'; break;
case 5: $m='мая'; break;
case 6: $m='июня'; break;
case 7: $m='июля'; break;
case 8: $m='августа'; break;
case 9: $m='сентября'; break;
case 10: $m='октября'; break;
case 11: $m='ноября'; break;
case 12: $m='декабря'; break;}
return $date[0].' '.$m.' '.$date[2]; } ?>

А в том месте, где нужно показать дату, необходимо вызвать функцию:

<?php echo russian_date(); ?>

В итоге мы получим вот такую красотень:

21 ноября 2010

Можно также совместить русскую дату с временем, использовав код:

Сегодня: <?php echo russian_date(); ?> Время:<?php print date("H:i")?>

И результатом будет:

Сегодня: 21 ноября 2010 Время:22:58

Вот и всё. Как видите, совсем несложные решения. Уверен, вы найдёте им применение =) А если что-то не получится, добро пожаловать в комментарии!

Желаю вам всего самого доброго!
Артём Савельев

P.S. Для вывода русской даты можете использовать также эту функцию — за подсказку спасибо Тормозу.

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

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

Например, чтобы найти иконку Google Buzz, я написал запрос «Google Buzz Logo», и вот что передо мной открылось:

Я перешёл в картинки и выбрал самую большую, которую затем уменьшил в графическом редакторе до 32 пикселей. Редактор подойдёт, по всей видимости, любой. Photoshop, Illustrator, Gimp, Fireworks — да всё, что угодно, кроме, разве что, Paint.

Чаще всего в работе я использую Fireworks, поэтому и иконки я делал в нём.

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

Теперь нам нужно будет добавить текст. Здесь я решил немного схитрить и не писать его непосредственно в редакторе, так как пиксельные шрифты — некрасивые, а те же Arial и Verdana при маленьком размере выглядят очень неаккуратно.

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

Для тех, кому интересно, воспроизведу примерный код той странички. Это HTML:

<p class="twitter">Добавить<br />в Twitter</p>
<p class="vkontakte"><span class="vkontakte">Поделиться<br />Вконтакте</span></p>
<p class="fb"><span class="fb">Поделиться<br />на Facebook</span></p>
<p class="lj">Поделиться<br />на Livejournal</p>
<p class="buzz">Добавить<br />в Живую Ленту</p>
<p>

Последний открывающий тег p — гадость, которую нужно удалить, если будете копировать мой код.

А это CSS:

body,td,th {font-family: Verdana, Geneva, sans-serif;font-size: 10px;font-weight: bold;line-height:140%;} .twitter{ color: #1CADD5; } .vkontakte{color: #225193;} .fb{color: #3F63C2;} body { background-color: #FFF; } .lj {color: #366AB0;} .buzz {color: #007BF5;}

А так выглядели тексты на скриншоте:

После компоновки иконок и текста оставалось порезать своё творчество на отдельные кнопки и добавить их в шаблон. Кнопки я сохранял как прозрачный .gif с белыми краями.

Покончив с резкой, я загрузил получившиеся файлы на сервер в папку /wp-content/themes/_мой_шаблон_/images/icons и отправился на в админку Wordpress на страницу Внешний вид→Редактор→Основной шаблон (index.php).

Здесь перед контейнером, выводящим содержимое поста, который у меня начинается следующим образом:

<div class="entry

я вставил сами иконки:

<div class="topsocialicons"><a href="http://twitter.com/?status=RT @artsaveliev <?php the_title(); ?>: <?php the_permalink() ?>" class="toptwitter" rel="nofollow"></a>
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink() ?>" class="topvkontakte" rel="nofollow"></a>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title(); ?>&src=sp" class="topfacebook" rel="nofollow"></a>
<a href="http://www.livejournal.com/update.bml?event=<?php the_permalink() ?>&subject=<?php the_title(); ?>" class="toplivejournal" rel="nofollow"></a>
<a href="http://www.google.com/buzz/post?url=<?php the_permalink() ?>&type=small-count" class="topbuzz" rel="nofollow"></a></div>
<p>

Что это за открывающий тег p в коде — я не знаю, но меня достала эта самодеятельность моего блога. Будем разбираться. Если знаете, как прибить эту гадость, чтобы я мог делать нормальные примеры кода — поделитесь решением. Использование pre место code тоже как-то ни к чему не приводит хорошему.

Код с иконками я вставил также и в файл single.php, до и после содержимого страницы.

Затем мне осталось лишь отредактировать файл style.css, добавив туда необходимые стили:

.topsocialicons{height:32px; display:block; margin-top:15px; padding-left:15px;}
.bottomsocialicons {height:32px; display:block; padding-top:15px; padding-left:15px; background-image:url(images/center_separator.jpg); background-position:top; background-repeat:repeat-x; padding-bottom:15px;}
a.toptwitter{background-image: url(images/icons/twitter.gif); width:93px; background-repeat:no-repeat; background-position:left top; height:32px; margin-right:15px; display:block; float:left;}
a.topvkontakte {background-image: url(images/icons/vkontakte.gif); width:106px; background-repeat:no-repeat; background-position:left top; height:32px; margin-right:15px; display:block; float:left;}
a.topfacebook{background-image: url(images/icons/facebook.gif); width:110px; background-repeat:no-repeat; background-position:left top; height:32px; margin-right:15px; display:block; float:left;}
a.toplivejournal{background-image: url(images/icons/livejournal.gif); width:117px ;background-repeat:no-repeat; background-position:left top; height:32px; margin-right:15px; display:block; float:left;}
a.topbuzz{background-image: url(images/icons/buzz.gif); width:132px; background-repeat:no-repeat; background-position:left top; height:32px; margin-right:15px; display:block; float:left;}

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

Надеюсь, у вас всё получится, а если будут вопросы — знаете куда обращаться =)

А вы используете какие-либо сервисы иконок/ретвитов или тоже предпочитаете, чтобы все иконки были в одном стиле?

Желаю вам всего самого вам подходящего!
Артём Савельев

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

Итак, для того, чтобы сделать такое предупреждение, достаточно в нужном месте вашего шаблона, либо вашего html-файла вставить следующие строчки:

<!--[if (gte IE 5.5)&(lt IE 8)]>
<div class="iedanger">Вы используете устаревшую версию браузера Internet Explorer, и данный сайт представлен для Вас в облегчённом варианте. Чтобы получить доступ к полной версии сайта, <a href="http://www.microsoft.com/rus/windows/internet-explorer/">обновите</a>, пожалуйста, версию Internet Explorer, либо воспользуйтесь другими современными браузерами. Кроме того, использование устаревших версий Internet Explorer может негативно отразиться на безопасности Вашего компьютера.</div>
<p><![endif]-->

Естественно, текст можно заменить на что-нибудь более подходящее для Вашего проекта, но последствия использования устаревших версий Internet Explorer примерно такие и есть.

Как видите, мой текст вложен в контейнер, к которому применён класс iedanger — это сделано для того, чтобы поярче наше сообщение выделить. Для этого в CSS понадобиться добавить что-нибудь в этом духе:

.iedanger { background-color: #FC6; padding:15px; line-height:140%; color:#F00; font-size:14px; display:block; width:100%; }

Вот так наше сообщение выглядит на моём блоге:

Можете проверить, если у вас есть такая возможность. А если возможности нет, то предлагаю скачать очень полезную программу IE Tester, с помощью которой можно просматривать сайты в старых версиях IE — очень нужная штука для сайтоделов.

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

Индустрия не стоит на месте, и нет ни капельки смысла в том, чтобы вечно тащить за ней этого динозавра. Обновиться же совсем не сложно — просите об этом пользователей!

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

Желаю вам всего самого современного!
Артём Савельев

Одной из тем, в которых это чудовище не разбирается, является прозрачность изображений формата .png. Сегодня я поделюсь с вами способом, который использую для того, чтобы заставить Internet Explorer правильно интерпретировать подобные картинки.

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

Для того, чтобы решить проблему с прозрачностью в IE, нужно всего лишь загрузить на сервер прозрачную однопиксельную картинку clear.gif и файл iepngfix.htc, в котором для несчастного браузера написана инструкция по тому, как встать в нужную позу и сделать то, что от него требуется.

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

Итак, попробуем проделать всё это вместе. Для примера сделаем слой, содержащий картинку и заголовок, причём заголовок должен перекрывать картинку и иметь прозрачный фон, например, чёрного цвета.

Добавим всё это в HTML, у меня получилось так:

Привет!

В CSS я добавил следующие стили:

* html .iepngfix { behavior: url(iepngfix.htc); }

.container {
	width:175px;
	height:244px;
	position: relative;

}
.container h1 {
	position:absolute;
	top:10px;
	display:block;
	left:10px;
	background-image:url(fon.png);
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	width:155px;
	color:#B04533;
	margin:0;
	background-repeat:no-repeat;
	line-height:30px;
}

Класс iepngfix как раз и подгружает тот самый файл, который заставляет IE думать как надо.

В результате у нас получился вот такой контейнер:

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

Вот, в принципе, и всё. Надеюсь, у вас всё получится.

К сожалению, у данного метода есть минус: не работают свойства backgorund-repeat и background-position. Находил в интернете возможное решение этой проблемы, но, увы, у меня оно не сработало. Если поделитесь рабочим вариантом — буду признателен.

Если у вас возникнут вопросы, с удовольствием отвечу на них в комментариях.

Желаю вам всего самого доброго.
Артём Савельев

P.S. Записал аудио вчерашнего стихотворения, скоро оно будет опубликовано =)

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

Площадь

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

Справа оставались два столбика с виджетами, информацию в которых можно было бы разместить более выгодно. У меня же получалась узкая статья и широкое белое поле справа от неё — нечестно.

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

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

Подача информации

По каким критериям я раскидал элементы на странице — не помню. Видимо по никаким, и из-за этого такая чушь получилась.

Метки

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

Теперь они в самом низу, где им хорошо и уютно и где они никому не мешают, оставаясь всегда доступными при необходимости.

Навигация

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

Теперь эту функцию выполняет рубрикатор слева — сразу понятно, о чём на этом блоге пишут и комментируют. Структура, кстати, тоже немного изменена.

RSS и подписка по E-mail

Слишком уж большая иконка RSS, к тому же позаимствованная, а виджет с подпиской по E-mail ничем не выделен. Теперь справа красуются две аккуратные кнопочки, на которые по-моему даже чаще нажимать стали.

Новые элементы

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

Добавлен блок «Интересности» — решил продолжить вести эту рубрику, потому что почему бы и нет. В таком формате планируется ещё пара рубрик. Предлагаю не пропустить и подписаться на обновления по RSS или по E-mail, если ещё не подписаны.

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

Удобство пользования блогом

При прошлом шаблоне пользоваться блогом, на мой взгляд, было весьма неудобно, элементы располагались не на своих местах, и это было заметно.

Теперь всё, как мне кажется, более симпатично. Ещё предстоит поработать над структурой, добавить некоторые страницы, изменить уже существующие.

Лишние плагины

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

Сейчас их число сократилось как минимум в два раза — отключены ненужные, некоторые заменены одним замечательным мегаплагином, о котором возможно расскажу в следующих постах (в открытом доступе его пока не найти).

Общее впечатление

На мой взгляд, воспринимать информацию на блоге в новом шаблоне стало намного удобнее и приятнее благодаря более выгодному расположению элементов и изменению цветов.

Кстати, подключил поиск от Google, попробуйте что-нибудь поискать — удобно.

Благодарю за внимание и желаю вам всего самого наилучшего.
Артём Савельев

P.S. Если вдруг понадобится заказать смеситель, вы знаете как нажать на ссылку. Кстати, зависит ли от смесителя или от чего ещё распределение воды на кухне и в ванной? Ужасно, когда наслаждаешься душем, а на кухне кто-то включает воду, и тебя либо холодной, либо горячей водой внезапно отрезвляет.

Хотел заняться этим вопросом несколько позже, но пришлось замедлить создание шаблонов и подробнее остановиться на изображениях. Чтобы придать сайтам яркости, я решил создать для них симпатичные шапки, собранные из клипартов. Но чтобы совместить приятное с полезным, я решил накачать заодно побольше тематических картинок, чтобы потом использовать их для разбавки текста.

Укачал я примерно 50 гигабайт, на это пришлось потратить целый день. Ещё полдня ушло на сортировку изображений по темам, что в дальнейшем сэкономит нам время при поиске подходящих иллюстраций к нашим страницам. И всё это дополнилось уютным вечером в компании свежесозданных шапок для наших сайтов. Все они получились яркие, разноцветные и вполне себе привлекательные.

Третий день ушёл на занятия другими делами. Сайты — это хорошо, но есть ещё масса интересностей, которыми тоже хотелось бы развлекать себя время от времени. От любой работы, какая бы увлекательная она ни была, нужно периодически отдыхать. Смена деятельности, на мой взгляд, самый продуктивный отдых.

Теперь я по-порядку расскажу о своих действиях.

Клипарт

Здесь всё достаточно просто, но долго. Говорим Яндексу то, что ищем, и он честно отвечает нам, где это можно найти. Я вышел на замечательную коллекцию всякой всячины Allday.ru, откуда выкачал многое из того, что было доступно в следующих подрубриках раздела «Растровые клипарты»:

• Архитектура (изображения подойдут под следующие тематики: строительство, недвижимость, путешествия);
• Бизнес и деньги (прибережём для финансовых сайтов, кстати некоторые симпатичные изображения золота и денег я присмотрел для этого блога, также здесь найдутся и картинки для сайтов по поиску работы);
• Бэкграунды и фоны (так случайно получилось, что захотелось мне скачать побольше фонов и текстур, которые вполне пригодились бы в будущем, отсюда я забрал лишь малую часть того, что доступно на сайте — очень уж много там этого добра);
• Искусство, музыка, кино (здесь взял только то, что о музыке и кино);
• Красота и здоровье (отличные изображения для медицинских сайтов);
• Наука и технологии (для сайтов на интернетные темы);
• Образование;
• Природа и животные (здесь насрывал цветочки);

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

Кстати, для быстрого скачивания файлов мне пришлось приобрести два или три суточных аккаунта к сервису Depositfiles, каждый из которых стоит 3 WMZ. Одним обойтись не удалось, так как были исчерпаны квоты (слишком много успел скачать). Если у вас тоже исчерпается квота, то при покупке нового аккаунта используйте другой email, иначе потратите деньги впустую.

Также я установил предложенную мне программу Depositfiles Filemanager, которая значительно облегчила мне работу.

Иногда возможность скачивания через Depositfiles не предоставлена, поэтому на случай попадания в эту категорию очень симпатичных клипартов я приобрёл ещё и дневной аккаунт в сервисе Letitbit за 68 рублей.

Шапки

После скачивания и сортировки изображений, необходимо создать нужное количество шапок. Для всех я использовал одинаковый размер: 1090×200 пикселей (исходя из ширины будущих шаблонов, которую можно определить для себя способом, описанным в самом первом посте этого блога).

Для сайта о туризме можно сделать, например, вот такую шапку:

Или такую:

Всё зависит от картинок, которые вы скачали, и от того, как симпатично вы сложите их друг с другом.

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

Теперь можно смело продолжить разработку шаблонов. Кстати, по-прежнему актуален мой вопрос об отображении страницы добавления содержимого вне админки Wordpress — всё ещё не найдено подходящего решения, поэтому буду признателен за любую помощь в поиске нужной информации.

Желаю вам всего самого красивого.
Артём Савельев.

P.S. Блогосфера и блогер Olega — не смотря на всю платность этой информации, очень рекомендую данный блог. Было приятно получить заявку на размещение постового от этого блогера.

P.P.S. Блог переехал в Германию на арендованный сервер. Как вам скорость?

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

Шаблоны, конечно, вполне симпатичные попадаются в открытом доступе, но все они какие-то неподходящие и совсем меня не радуют. А надо, чтобы радовали, иначе нехорошо и удовольствия меньше.

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

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

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

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

Я уже потратил некоторое время на создание сорока уникальных схем расположения элементов и готов с удовольствием ими поделиться. Надеюсь, мои схемы вам понравятся и они сэкономят вам время. Встречайте:

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

При желании, необходимости и наличии свободного времени, вы всегда сможете продолжить мою картинку ещё несколькими десятками или сотнями схем — исходя из ваших аппетитов. Разбавлять блоки можно баннерами, какими-либо виджетами — главное, чтобы менялась вёрстка.

А ещё мне предстоит глубоко погрузиться в Google, чтобы найти ответы на некоторые вопросы, в частности: как отобразить страницу добавления содержимого вне админки Wordpress. Если вы знаете ответ, буду признателен, если поделитесь информацией.

Также буду подробнее изучать тему создания и эффективного использования дополнительных полей и дополнительных типов записей в Wordpress.

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

Желаю вам всего самого честного.
Артём Савельев.

P.S. Кстати, Зелёный Кактус затеял акцию: за ссылку на его блог он готов написать обзор сославшегося блога.

P.P.S. На одном форуме через одного вполне авторитетного блогера заказал увеличение количества подписчиков за символическую сумму (после открытия общего доступа к услуге цена повысится и станет адекватной). Заметили прирост более 200 подписчиков? Все они подписались через Google, интересно только каким образом, и будет ли от этого толк.

О предназначении сайта много писать не хочу, узнаете всё в будущих постах (если доживём!). Что касается идеи его создания, то тут подсказчица мне жизнь, которая во время напомнила о том, что неплохо было бы (пора уже!) зарабатывать в интернете известными и неизвестными способами. Как это делать? Узнаете в том числе и в этом блоге.

Итак, я решил что звать меня отныне Сеогад и в соответствии с этим именем необходимо зарегестрировать доменное имя, как минимум в зоне .ru. Регистрировать домен за 500 рублей — не честно по отношению к своему кошельку, поэтому минуем бессмысленное переплачивание и купим его за 99 рублей у Айдомена. Да, всего 99 рублей. Это не левая регистрация. Домен будет полностью ваш и на ваше имя. Если вы удивлены ценой, то следите за моими следующими постами, там будет рассказано как и почему такие глупости в мире творятся. Кстати, ссылка партнёрская, то есть если вы купите домен, перейдя по моей ссылке, я получу от этого процент. И вы тоже так сможете, когда зарегистрируетесь!

По поводу хостинга ничего интересного не расскажу. У меня их куплено несколько и разных. Данный блог работает на VPS-хостинге от РБК. Поищите Яндексом или Гуглом, если для вас актуален поиск надёжного хостинга.

Итак, имея домен и хостинг, подумаем о том, как же наш сайт будет функционировать... А что тут думать, если это блог? Конечно же, старый добрый и любимый Wordpress. Идём к Лё Кактусу и забираем у него последний понравившийся (power или normal) русский дистрибутив Вордпресса. Заливаем на хостинг в корень сайта. Выставляем права 777 на папки wp-content, wp-content/plugins, wp-content/themes. Создаём в каталоге wp-content папку uploads и ей выставляем те же счастливые семёрки.

Далее переходим на свой сайт с помощью браузера и устанавливаем Wordpress. Чтобы несколько расширить функционал движка, для этого блога я использовал следующие дополнительные плагины:

• HeadSpace2 SEO
• Menubar — для удобного управления верхним и нижним меню.
• Remove Parents — для удаления «category» из ссылок на категории.
• Wordpress Thread Comment — для комментариев.
• Dagon Design Sitemap Generator — для создания карты сайта
• Rus-to-Lat — для транслитерации кирилицы в ссылках
• Russian Date — чтобы было 21 сентября вместо 21 сентябрь

Активировав и настроив эти плагины, я приступил к созданию шаблона для Wordpress. Долго не думая, я пошёл на Кулер (сервис, любезно предоставленный компанией Adobe) и выбрал себе цветовую схему.

Далее, в графическом редакторе я построил дизайн (такой, каким вы его наблюдаете на сайте), используя выбранные цвета и следующую формулу:

Canvas — ((Total Units -1) x Gutter) ÷ Total Units = Unit

• Canvas — размер всего пространства
• Total Units — количество блоков
• Gutter — размер отступа между блоками
• Unit — размер блока

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

У меня получилось следующее: 900px — ((13 — 1) x 10px) ÷ 13 = 60px

То есть ширина моего блока — 60 пикселей, всего блоков 13, отступ между ними равен 10 пикселям и ширина сайта должна была быть 900 пикселей, но так как фон содержимого отличен от фона страницы, я добавил по 10 пикселей слева и справа, чтобы элементы не прижимались к краю и получил ширину сайта в 920 пикселей.

Нарисовав картинку, порезав её на составляющие, я отправился в мой любимый Dreamweaver, дабы сверстать всё это дело в симпатичный и удобный шаблон для Wordpress, результат чего вы сейчас наблюдаете на этом сайте.

На сегодня, пожалуй, достаточно подвигов. Час поздний и пора спать. Оглашу лишь примерный список того, о чём собираюсь написать в ближайшее время (это ж как-никак приветственный пост).

Итак, расскажу я вам о том,

• как написать интересную, уникальную статью в случае, когда вы абсолютно не владеете темой;
• как правильно использовать некоторые хитрые и очень полезные плагины для Wordpress;
• как можно зарабатывать в интернете с сайтом или без него.

Также я планирую сделать обзор одной замечательной системы, которая позволяет создавать кучу уникальных сайтов за нескольно часов и потом комфортно управлять всей этой кучей из одной панели на локальном компьютере или на сервере.

P.S. Для бизнеса или для чего-нибудь ещё вам могут пригодится социальные слоганы, которые можно заказать на сайте «Контент-Строй». Грамотный слоган поможет продвинуть ваш товар на рынке, некачественно разработанный слоган может нанести необратимый ущерб вашей деятельности. Будьте осторожны и заказывайте разраоботку слоганов только у профессионалов.