Home » » Memasang gadget tweet terbaru di Blog

Memasang gadget tweet terbaru di Blog

Tuesday, October 9, 2012 | 1comments

Widget ini adalah untuk menampilkan tweet terakhir dari postingan blog, yaa semacam update status di facebook lah. Sebetulnya widget ini bisa saja kita dapatkan di twitter namun buat sobat yang belum tau caranya dan gak mau repot silahkan memakai kode-kode dibawah ini untuk menampilkan streaming tweet di blognya.

memasang menambah status atau tweet twitter terakhir postingan blog


Cara menambahkan update tweet ini sebagai berikut:

1. Masuk ke blogger

2. Dasbor > Tata Letak > Tambahkan gadget > HTML/Javascript

3. Copy dan paste kode berikut ini di dalam form yang tersedia.



<div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="http://julak-project.googlecode.com/files/blogbelajar2tweet1.png" width="64" height="64" alt="Twitter icon" /></div><h2 class="tut">My Tweets</h2></div><div id="tweet-container"><img id="loading" src="http://julak-project.googlecode.com/files/loadingtweetblogbelajar2.gif" width="16" height="11" alt="Loading.." /></div><div id="scroll"></div></div><style>/* CSS Document */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: 300px;height: 400px;background: url(http://julak-project.googlecode.com/files/blogbelajar2.blogspot.comtweet2.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(http://julak-project.googlecode.com/files/blogbelajar2.blogspot.comtweet3.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;font-family: calibri;border: 1px solid #F0F0F0;background: url(http://julak-project.googlecode.com/files/blogbelajar2transparent.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.5.2/jquery.min.js"></script><script type="text/javascript" src="http://julak-project.googlecode.com/files/blogbelajar2tw%20.js"></script><script type="text/javascript" src="http://julak-project.googlecode.com/files/blogbelajar2twittertick2%20.js"></script><script type="text/javascript" src="http://julak-project.googlecode.com/files/blogbelajar2twitterticker3%20.js"></script><script type="text/javascript">var tweetUsers=['SCS'];</script>

Silakan ganti username akun twitter SCS dengan username twitter Anda sendiri
Yang mau lihat live demonya di sini

Monggo yang pengen coba...

Related Post:

Share This Article :

1 comments:

Saya tidak online 24 Jam dan hanya sendiri mengurus blog ini, mohon maaf bila komentar anda tidak di balas.
Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
Komentar SPAM, SARA, dan sejenisnya tidak akan di tampilkan.

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. SURYA COMMUNITY SEVEN - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger