Делаем персонально-уникальный twitter за 4 шага
То о чем сейчас пойдет речь – довольно бесполезная но чертовски забавная штука, она просто не может не заинтересовать twitter-ориентированных блоггеров и настоящих гиков. Это мини-сайт с трансляцией Вашего твиттер потока. Для чего его использовать и как раскручивать – разговор отдельный, главное что простор для использования такого мини-сайта есть. Это факт. А как сделать себе подобный интернет-артефакт читайте в этом мануале.
Шаг 1
Итак первым делом создаем дизайн в фотошопе.Или берем какую нибудь очень красивую картинку, которая станет для нас фоном. Сохраняем ее в отдельной папке и переименовываем в “page-bg.jpg”. Потом создаем еще один файлик, который станет фоном для наших сообщений – размер 380х200, заливаем любимым цветом и сохраняем в ту же папку с именем “transp.png”. Png формат выбран не случайно – в нем можно настроить прозрачность изображения.
Шаг 2
В той же папке в блокноте создаете файлик “Index.htm” и вносите в него следующий код :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twitter Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
Следом делаем еще один файлик "style.css" ведь нам нужен стильный сайт.В него добавляете следующие строки :
/*
*/
* { margin: 0; padding: 0; }
body { font-size: 62.5%; font-family: Georgia, serif;
background: url(page-bg.jpg) top left no-repeat #2f2e2c;}
#twitter_div {
position: absolute;
left: 186px;
top: 99px;
width: 376px;
height: 360px;
overflow: auto;
}
ul#twitter_update_list {
list-style: none;
font-size: 14px;
}
ul#twitter_update_list li {
margin-bottom: 10px;
padding: 10px;
color: #7a8a99;
background: url(transp.png);
}
a { color: #96997a; }
Это основа нашего сайта.
Шаг 3
заходим по адресу http://twitter.com/widgets/html_widget, копируем код из формы Get the Code и вставляем его в наш “Index.html” между тэгами <body></body>
Шаг 4
Закачиваем четыре файлика из нашей твиттер-папки на хостинг и смотрим на результат. Вот что получилось у меня.Ссылки на Ваши творения в комментариях приветствуются !
Рекомендую посетить :
4 Responses to “Делаем персонально-уникальный twitter за 4 шага”
Leave a Reply
Похожие публикации
Этот блог находят по фразам:
вобензойде on Май 5th, 2009
идея чотке, можно побаловаться с дизом +)
Михаил on Май 5th, 2009
вобензойде, да простор для фантазии – ого го какой…
Павел Петров on Май 5th, 2009
Да идея хорошая :) Вот бы еще код общей ленты раздобыть или хотябы ленты с домашней твиттера :) Да замутить стартовую страницу персональную поиск прилепить, общий фид “избранных” блогов и прогноз погоды от Gismeteo :)Надо будет на досуге обмозговать :)
Дядя Яша on Декабрь 10th, 2009
Кошерно так