Птичка твиттера


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

Демо:


А мой Twitter ТуТ
чирик... чирик...

Фоллоу ми!
← Птицо твиттера!

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

Установка.
css:
<style>
#twitter #twitter_update_list { 
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://1.bp.blogspot.com/-BWvlh72zkfE/Tq0HqnwH1yI/AAAAAAAAGtE/ZsiXGeScUUA/s1600/bk_twitter_box_top.png");
background-origin: padding-box;
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: auto;
color: #666666;
font-family: "Georgia", "Times New Roman", "Times", serif;
font-size: 12px;
font-style: italic;
line-height: 125%;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 15px;
padding-top: 3px;
 }
#bottom { 
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://2.bp.blogspot.com/--q7FAA5TKEM/Tq0HqUk1qlI/AAAAAAAAGs8/zIMEF_7cwyY/s1600/bk_twitter_box_bottom.png");
background-origin: padding-box;
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: auto;
font-weight: 700;
height: 36px;
padding-left: 63px;
padding-top: 45px;
 }
</style>
Таблица стилей состоит из двух базовых частей:
#twitter_update_list - отвечает за "пузырик" текста (можете подкрутить шрифт и размер текста)
#bottom - отвечает за нижний край пузырика и птицу
Картинки уже лежат на хостинге пикасы.

html:
<div id="twitter">
<div id="twitter_update_list" style="color: #3d85c6;">
А мой Twitter <a href="http://twitter.com/fuck_blogspot" rel="nofollow"><b>ТуТ</b></a> 
чирик... чирик...</div>
<div id="bottom">
</div>
</div>
Где, как видите, я вставил свой текст и ссылку на твиттер.
style="color: #3d85c6;" регулирует для демо цвет надписи. Эту строчку нужно убрать, если хотите, чтобы текст следовал правилам из css. В контейнер bottom можете тоже вставить любой текст.

Это не постовой↓
Первоисточник находки.

Комментариев нет:

Отправка комментария