Twitter Bar

Опубликовал 31.07.2010 в рубрике css, html, javascript, jQuery | 0 комментариев

Twitter Bar

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Twitter Bar – как видно из названия, очень популярная на сегодняшний день социальная сеть, причем не только в России, но так же во всей Европе и Америке. Twitter Bar представляет из себя диалоговое окно. Имеет некоторые пользовательские настройки и легко изменяется при знании дела. Я постараюсь описать более подробно каждый шаг установки такого мини бара на свой сайт.

Хочется заметить, что Twitter Bar странным образом отображается не очень корректно в Google Chrome. В остальных браузерах – вроде более менее сносно.

Заполним шапку сайта

<!--Стилевая основа-->
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jScrollPane/jScrollPane.css" />
<!--Необходимые скрипты для правильной работы Twitter Bar-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!--[if it IE 7]>
<style type="text/css">
div.tweet {
	background:none;
    border:none;
}

div#twitIcon{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/twitter_64.png, sizingMethod=crop);
}

div#twitIcon img{
	display:none;
}
</style>
< ![endif]-->

После того, как мы поработали с областью <head>, перейдем в ту часть сайта, где мы непосредственно вставим наш html-код – <body>.

Этот html-код мы вставляем в <body>

<div align="center">
	<div id="main">
		<div id="twitter-ticker">
				<div id="top-bar">
					<div id="twitIcon"></div>
					<h4 class="tut">Почирикаем?
				</h4></div>
			<div id="tweet-container"></div>
			<div id="scroll"></div>
		</div>
	</div>
</div>

Теперь последний заключительный шаг, самый главный. Зачем вам твиттер, если он не отображает ваши записи, а показывает к примеру чужие? Не за чем! Вот и я о том же. Имя вашего фрофиля прописывается в одном из скриптов, а исенно – script.js. В этом скрипте можно добавить множество имен аккаунтов, то есть это дает возможность отображать только необходимых вам твиттерян. Давайте рассмотрим ту строку срипта, которую вам необходимо изменить.

В самой первой строке script.js меняем профили

/* Замените аккаунты на свои */
var tweetUsers = ['Ruvisio','любой другой аккаунт через запятую'];

Как вы уже наверное догадались, сделать это совсем не трудно. За исключением только того, с помощью какого редактора вы открыли скрипт. Открывать желательно при помощи Notepad++. В скрипте вы меняете Ruvisio на свое учетное имя. Далее, если вы хотите, чтобы в Twitter Bar отображались только ваши записи, то удаляете все ненужные аккаунты ‘example_twiier_name’.

Заключительный этап – это стилевая основа – styles.css. Именно эта часть кода отвечает за то, как будет отображаться наш мини бар. Здесь можно и картинки поменять, ну и конечно же размеры отображаемого окна бара.

styles.css

/* Twitter Bar */
	h4.tut{
	color:white;
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:16px;
	padding:12px 0 0 58px;
	text-transform:uppercase;

	text-shadow:2px 1px 6px #333;
}

	#twitter-ticker{
	width:200px;
	height:300px;
	background:url(img/slickbg.png) no-repeat #f5f5f5;
	color:#666666;
	display:none;

	-moz-border-radius:10px 10px 6px 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius:6px;

	text-align:left;
}

#tweet-container{
	height:230px;
	width:auto;
	overflow:hidden;
}

#twitIcon{
	position:absolute;
	top:-25px;
	left:-10px;
	width:64px;
	height:64px;
}

#top-bar{
	height:45px;
	background:url(img/top_bar.png) repeat-x;
	border-bottom:1px solid white;
	position:relative;
	margin-bottom:8px;

	-moz-border-radius:6px 6px 0 0;
}

.tweet{
	padding:5px;
	margin:0 8px 8px;

	border:1px solid #F0F0F0;
	background:url(img/transparent.png);

	width:auto;
	overflow:hidden;
}

.tweet .avatar,
.tweet .user,
.tweet .time{
	float:left;
}

.tweet .time{
	text-transform:uppercase;
	font-size:10px;
	color:#AAAAAA;
	white-space:nowrap;
}

.tweet .avatar img{
	width:36px;
	height:36px;
	border:2px solid #eeeeee;
	margin:0 5px 5px 0;
}

.tweet .txt{
	clear:both;
}

.tweet .user{
	font-weight:bold;
}

a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

#loading{
	margin:100px 95px;
}
Информация о загрузках

Twitter Bar (56.9 KB, 37 скачиваний)
Файл залит 31.07.2010 в 21:38

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Добро пожаловать на ruVisio

Если вы еще не зарегистрированы, то желательно сделать это побыстрее :)

Авторизация

Забыли пароль?

Регистрация