Делаем персонально-уникальный twitter за 4 шага

уникализированный twitter

То о чем сейчас пойдет речь - довольно бесполезная но чертовски забавная штука,  она просто не может не заинтересовать 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" rel="nofollow" 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

Закачиваем четыре файлика из нашей твиттер-папки на хостинг и смотрим на результат. Вот что получилось у меня.Ссылки на Ваши творения в комментариях приветствуются ! Рекомендую посетить :
  • Новая версия бесплатного движка для сателлитов
  • Любителям оружия - револьвер одесса

  • 6 комментариев to “Делаем персонально-уникальный twitter за 4 шага”

    1. вобензойде  on Май 5th, 2009

      идея чотке, можно побаловаться с дизом +)

    2. Михаил  on Май 5th, 2009

      вобензойде, да простор для фантазии — ого го какой…

    3. Павел Петров  on Май 5th, 2009

      Да идея хорошая :) Вот бы еще код общей ленты раздобыть или хотябы ленты с домашней твиттера :) Да замутить стартовую страницу персональную поиск прилепить, общий фид «избранных» блогов и прогноз погоды от Gismeteo :)Надо будет на досуге обмозговать :)

    4. Дядя Яша  on Декабрь 10th, 2009

      Кошерно так

    5. Дмитрий  on Ноябрь 25th, 2010

      Тема очень интересная вот только яндекс не будет ли такой сайтик рассматривать как дорвей ?

    6. Михаил  on Ноябрь 25th, 2010

      не будет. обыкновенный одностраничник :-)


    Leave a Reply