» » JQuery Twitter Ticker

JQuery Twitter Ticker

    Label: Blogspot


Info unik dan menarik untuk sobat blogger yang maniak dengan twitter, yaitu JQuery Twitter Ticker dari tutorialzine.com. Widget ini digunakan untuk melihat update status twitter (twitt) dan menghubungkannya di gadget blog sobat. Widget ini juga dapat digunakan untuk menampilkan twitt beberapa akun twitter sekaligus. Seperti contoh di bawah ini yang menampilkan twitt monozcore dan indonesia idol. Ohh yaa widget ini hanya menampilkan twitt terbaru dan untuk twitt yang lebih dari 2 hari tidak akan ditampilkan.
Twitter icon

MonozCore Twitter

Loading..

Gimana sob... asik-kan... syik..ashiyk hehehe :):). Widget ini menggunakan library jquery dan api twitter sehingga untuk proses pengambilan data langsung di browser client tanpa harus di proses di server. Pemasangan widget ini cukup mudah tinggal ikuti cara pemasangan langkah demi langkah atau klik tombol "Add to Blogger" untuk mempermudah pemasangan sebagai widget sidebar blog.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di atas kode </Head> tersebut.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <style>
    #twitter-ticker{width:250px;height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Ica5sPecf7DF1Nzpi6zTEYilbkFaQwsmai91d_qq8mEJjmHc-nbTvmLBAIC2rnmbmfsbnbeGBOKlBpkDJIAHfWIIKYzwUBYQcl8B-3ZeifJDEbTokGzzBjf8meJgYe8tFCxrTEuAuik/s1600/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;border-bottom:1px solid white;position:relative;margin-bottom:8px;border-radius:6px 6px 0 0;background-color:#619bb9;background-image: -ms-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image:-moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image:-o-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #327AA4), color-stop(0.5, #2E4B5A), color-stop(1, #5CB0DC));background-image:-webkit-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image:linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));}
    .tweet{padding:5px;margin:0 8px 8px;border:1px solid #F0F0F0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijutHIYE2-g3_x5o5JCX4lr9YPS-ly3vpEVVdomaOGKILitU8lcMwlVQy_Svx5Lu7YYFj5MXyVUMbkJrF3jmZ2dL4GA9rGKAoCzvDk9Ojiw6dger_XKPO1LEMWoa2EQsd6cu9Kow8f7D0/s1600/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;}
    #loading{margin:100px 95px;}
    #twitter-ticker{margin:40px auto 20px;}
    .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;height:9px;}
    a.jScrollArrowUp:hover {}
    a.jScrollArrowDown {display:block;position:absolute;z-index:1;bottom:0;right:0;text-indent:-2000px;overflow:hidden;height:9px;}
    a.jScrollArrowDown:hover {}
    a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {}
    h4.tut{color:#fff;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;}
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    div.tweet {background:none;border:none;}
    div#twitIcon{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMRf6tZ92qsAZ9QkcQDNgcVDQx_9iB2ifsjHNzMR3i7jA1iQsbMJcDUXi0kFN0gyDOQpeecVVTBtNKTeDPnfULSF2kyP8wDYCNAKzEPsLG42yB3DfCtAi-ZcmHJAoUINOD6zk-Bllb8Vo/s1600/twitter_64.png, sizingMethod=crop);}
    div#twitIcon img{display:none;}
    </style>
    <![endif]-->

    <script type="text/javascript" src="http://monozcore-project.googlecode.com/files/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="http://monozcore-project.googlecode.com/files/jScrollPane-1.2.3.min.js"></script>
    <script type="text/javascript" src="http://monozcore-project.googlecode.com/files/Jquery_twitter_ticker.js"></script>

    <script type="text/javascript">
    var tweetUsers = ['monozcore','indonesiaidol'];
    </script>

    - Keterangan :
    • Teks yang berwarna biru merupakan username twitter yang akan ditampilkan, ganti username tersebut dengan akun username twitter sobat atau sesuai dengan username twitter yang sobat inginkan. Apabila sobat ingin menambahkan akun username twitter lebih dari dua, sobat blogger tinggal menambahkan username twitter pada kode teks yang berwarna biru. Contoh : ['monozcore','indonesiaidol','username twitter3'];

  • Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di bawah area kode <Body> tersebut. Penempatan kode di bawah ini juga bisa ditempatkan pada widget sidebar.

    <div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMRf6tZ92qsAZ9QkcQDNgcVDQx_9iB2ifsjHNzMR3i7jA1iQsbMJcDUXi0kFN0gyDOQpeecVVTBtNKTeDPnfULSF2kyP8wDYCNAKzEPsLG42yB3DfCtAi-ZcmHJAoUINOD6zk-Bllb8Vo/s1600/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div><h4 class="tut">MonozCore Twitter</h4></div><div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh8AXnr9cxaDSyYilopfZDYx9I3yQjCYzMAqxdj8o8A4mXACzSoDbXsOZDocHhQULbVNdjq3WVHpBdBVMkMDjno0U9L_s5d1nos2PeFzJO393hUYarZwfz8PUEdv2bG-E5M_mLPpcF9LE/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div></div>

    - Keterangan :
    • Klik "Add to Blogger" untuk memasang jquery twitter ticker sebagai widget.
    • Teks yang berwarna merah pada kode di atas merupakan judul widget silakan ganti judul tersebut sesuai dengan yang sobat inginkan.

  • Klik "Save" dan lihat hasilnya...
.: Semoga Bermanfaat :.
JQuery Twitter Ticker 4.5 5 Unknown Info unik dan menarik untuk sobat blogger yang maniak dengan twitter, yaitu JQuery Twitter Ticker dari tutorialzine.com. Widget ini digunaka...


Label:

Tidak ada komentar:

Posting Komentar