Cara Memasang Twitter di Website

DEMO       DOWNLOAD

Langkah 1 - HTML

Bagian XHTML cukup mudah.

demo.html

  




    


    


    


My tweets


    

    


    

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Resetting some of the page elements */
    margin:0px;
    padding:0px;
}

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(img/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(img/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(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{
    /* 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;
}