Доброго времени суток, уважаемые читатели! Наконец-то дошли руки написать пост после долгого перерыва (хотя раздел новости старался пополнять). Времени сейчас не хватает катастрофически – сессия. )
И так, как вы уже поняли, речь пойдёт о том, как буквально в несколько шагов оформить область подписки на блог. Сам буквально на днях сделал это на этом блоге, результат перед вами. Основные поставленные задачи, как мне кажется, я выполнил: область выделяется в сайтбаре (бросается в глаза, но выполнена в дизайне остальных блоков), юзабилити в норме, да и симпатично получилось. В общем давайте на примере этого блога всё по порядку разберём:

И так, первое что нужно сделать, вставить в файл sidebar.php конструкцию типа

1

                                 <div id="subscribes"> .... </div>

Это и есть сама «коробка», область подписки; у меня это как раз верхний голубой блок в сайтбаре. Теперь наполняем его содержимым – вставляем вместо точек код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 
<div class="RSS">
RSS подписка
</div>
 
<div class="Email">                                                           
RSS на Email
</div>
 
<div class="YL">                                                           
Яндекс.Лента
</div>
 
<div class="GR">                                                           
Google Reader
</div>
 
<div class="Twiter">                                                           
Читай в Twitter
</div>

Теперь в файл style.css нужно добавить следующий код, отвечающий за стиль самого блока и его содержимого. Область нужного размера можно нарисовать, например, в фотошопе.

1
2
3
4
5
6
7
8
9
10

        #subscribes {
	height: высотаpx; 
        width: ширинаpx;
	background: url(адрес объекта фона) no-repeat;
	margin: 0 0 расстояние до нижнего блокаpx;  – oпределяет ширину поля за пределами границы элемента
	padding: расстояние до верхнего края объектаpx до правогоpx  до нижнегоpx до левогоpx; – определяет ширину полей между границей элемента и его содержимым.
	position: relative;
	text-align: center;
	line-height: расстояние между строчкамиpx;
}

Ну и напоследок добавляем иконки RSS, RSS на почту, Яндекс.Ленты, GoogleReader и Twitter к соответствующим пунктам подписки – вставляем в style.css следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.RSS {
	font-weight: bold;
	background: url(адрес иконки) расстояние от левого края области подписки до иконкиpx перемещение иконки вверх вниз(используя + или -)px no-repeat;
	padding: 0 0 0 0px; - изменяем расстояния между иконкой и ссылкой (можно не использовать).
}
.Email {
	font-weight: bold;
	background: url(адрес иконки) 11px -1px no-repeat;
	padding: 0 0px 0 0px;
}
.YL {
	font-weight: bold;
	background: url(адрес иконки) 15px -2px no-repeat;
	padding: 0 0px 0 0px;
}
.GR {
	font-weight: bold;
	background: url(адрес иконки) 11px -2px no-repeat;
	padding: 0 0px 0 0px;
}
.Twiter {
	font-weight: bold;
	background: url(адрес иконки) 11px -1px no-repeat;
	padding: 0 0px 0 0px;
}

Здесь размеры для каждой иконки подгоняются отдельно, так как все иконки отличаются по размеру. Сайтов с подборкой иконок довольно много, так что найти их не проблема. Единственная трудность, найти иконки Яндекс.Ленты и Google Reader, поэтому вот архив с моими иконками.
Ну вот в принципе и всё, надеюсь что кому-нибудь пригодится!

А теперь самое интересное!

Спешу сообщить, что буквально на днях я проведу отличную акцию для всех вебмастеров с раздачей постовых! Количество постовых ограничено, так что обязательно подписывайтесь на RSS и успейте получить бесплатный постовой!