Блогтоо jQuery Twitter Ticker нэмэх

Өөрийн Twitter хуудсандаа бичсэн твийтүүдийг блогтоо харуулахыг хүсвэл энэхүү виджетийг блогтоо нэмээрэй. Мөн энэ виджетийг ашиглаад олон твийтер хуудсанд бичигдсэн твийтүүдийг блогтоо нэгтгэн ашиглаж болох талтай.

За ингээд хэрхэн блогтоо суулгах талаар дэлгэрүүлэе.

Та аль блог платформ дээр блог бичдэг байлаа гэсэн виджет нэмэх хэсгээр ороод доорхи кодыг хуулаад болно. Жишээ болгон Blogger дээр хэрхэн суулгах талаар тайлбарлая.

1. Blogger.com нэвтрэн орно.

2. Design - Page elements

3. Add a widget - HTML/Javascript гэж сонгоод доорхи кодыг хуулж тавина.

<div id="twitter-ticker">
<!-- Twitter container, hidden by CSS and shown if JS is present -->

<div id="top-bar">
<!-- This contains the title and icon -->

<div id="twitIcon"><img src="https://lh6.googleusercontent.com/-KiRlwLrg_h0/Ty-izxhT05I/AAAAAAAAACo/Kkv2OkN55YQ/s64/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
<!-- The twitter icon -->

<h2 class="tut">My tweets</h2>
<!-- Title -->

</div>

<div id="tweet-container"><img id="loading" src="https://lh6.googleusercontent.com/-c2H2Lw3NF4M/Ty-izdCx5nI/AAAAAAAAACg/lMDpVR5kDeE/s16/loading.gif.png" width="16" height="11" alt="Loading.." /></div>
<!-- The loading gif animation - hidden once the tweets are loaded -->

<div id="scroll"></div>
<!-- Container for the tweets -->

</div>
<style>
h2.tut{
/* This is the "MY TWEETS" title */
color:white;
font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
font-size:16px;
padding:12px 0 0 58px;
text-transform:uppercase;

/* The CSS3 text-shadow property */
text-shadow:2px 1px 6px #333;
}

#twitter-ticker{
/* Styling the ticker */
width:200px;
height:300px;
background:url(https://lh5.googleusercontent.com/-zyB-SP7RtT4/Ty-iyy-6W9I/AAAAAAAAACc/vEdzkmqQX1E/s350/slickbg.png) no-repeat #f5f5f5;
color:#666666;
display:none;

/* Rounded corners */
-moz-border-radius:10px 10px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius:6px;

text-align:left;
}

#tweet-container{
/* This is where the tweets are inserted */
height:230px;
width:auto;
overflow:hidden;
}

#twitIcon{
/* Positioning the icon holder absolutely and moving it to the upper-left */
position:absolute;
top:-25px;
left:-10px;
width:64px;
height:64px;
}

#top-bar{
height:45px;
background:url(https://lh6.googleusercontent.com/-RS6RGYWMzjg/Ty-iy8zn-lI/AAAAAAAAACk/DW5A8pMGvz4/s45/top_bar.png) repeat-x;
border-bottom:1px solid white;
position:relative;
margin-bottom:8px;

/* Rounding the top part of the ticker, works only in Firefox unfortunately */
-moz-border-radius:6px 6px 0 0;
}

.tweet{
/* Affects the tweets */
padding:5px;
margin:0 8px 8px;

border:1px solid #F0F0F0;
background:url(https://lh5.googleusercontent.com/-NtPoyrPkEdw/Ty-iyzeam4I/AAAAAAAAACY/gjm6Hb6qTnU/s4/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{
/* Using the text container to clear the floats */
clear:both;
}

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

a, a:visited {
/* Styling the links */
color:#00BBFF;
text-decoration:none;
outline:none;
}

a:hover{
text-decoration:underline;
}

#loading{
/* The loading gif animation */
margin:100px 95px;
}

.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right:4px;
top:0;
height: 100%;
background: #ddd;
}
.jScrollPaneDrag {
position: absolute;
background: #999;
cursor: pointer;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
}
a.jScrollArrowUp:hover {
/*background-color: #f60;*/
}

a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
}
a.jScrollArrowDown:hover {
/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
/*background-color: #f00;*/
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ravisaivein.googlecode.com/files/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://ravisaivein.googlecode.com/files/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript" src="http://ravisaivein.googlecode.com/files/twitterticker.js"></script>
<script type="text/javascript">
var tweetUsers = ['iblogsclub'];
</script>

4. Дээрхи кодыг хуулж тавьсаны дараа iblogsclub гэсэн нэрний оронд өөрийн твийтер нэрээ бичнэ. Мөн My Tweets гэсний оронд өөрийнхөөрөө хүссэнээрээ гарчиг өгч болно.
За ингээд боллоо амжилт хүсэе.

Туршилтын хувилбар үзэх бол энд дар.