◄ Min  Size Fonts: + | - | ± Color: ■ ■ ■ ■ Max ►
Home › › › › Twitter oh Twitter

Twitter oh Twitter

Follow This Blog
Twitter yang notabene merupakan satu situs jejaring sosial lumayan digandrungi dikalangan pemakai jasa internet online. Pada widget blogspot sendiri feature Twitter Updates sudah ready stock sob. Widget by blogger buster dengan account twitter @amandakennedyuk Sobat jika pada keadaan login Dashboard ► Design ► Add a Gadget ► Featured ► Scroll down and look for Twitter Updates, dapat deh keterangan apa-apa yg terakhir kali terjadi di account twitter sobat. Mudah kan mendapatkannya, tinggal klik, klik dan klik doang saja :D Itu bawaan standar yg dimiliki platform blogspot, sekarang bagaimana dengan gaya full stylish for twitter ini ;))

Coba tengok kemari dulu Malsup! Bagus banget yah...yah...yah... Ini mungkin bisa menjadi ringkasan dimana tempat tutorial terintegrasi dengan twitter DesignModo. Kalau dari situs resmi twitternya sendiri sobat bisa baca artikel ini blog keren :D Mari kita masuk ke sesi yg membingungkan, tapi tenang saja jika memang minat mau dimasukan ke blog sobat²..tinggal Add a Gadget choose HTML/Javascript Satu contoh dari web Malsup @jQuery

Kode kode 1

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>
<script type='text/javascript'>
/*!
* jQuery Twitter Search Plugin
* Examples and documentation at: http://jquery.malsup.com/twitter/
* Copyright (c) 2010 M. Alsup
* Version: 1.01 (14-APR-2010)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires: jQuery v1.3.2 or later
*/

// @todo: refresh button

;(function($) {
$.fn.twitterSearch = function(options) {
if (typeof options == 'string')
options = { term: options };
return this.each(function() {
var $frame = $(this);
var opts = $.extend(true, {}, $.fn.twitterSearch.defaults, options || {}, $.metadata ? $frame.metadata() : {});
opts.formatter = opts.formatter || $.fn.twitterSearch.formatter;
opts.filter = opts.filter || $.fn.twitterSearch.filter;
var url = opts.url + opts.term;

if (!opts.applyStyles) { // throw away all style defs
for (var css in opts.css)
opts.css[css] = {};
}

if (opts.title === null) // user can set to '' to suppress title
opts.title = opts.term;

opts.title = opts.title || '';
var t = opts.titleLink ? ('<a href="'+ opts.titleLink +'">'+ opts.title + '</a>') : ('<span>' + opts.title + '</span>');
var $t = $(t);
if (opts.titleLink)
$t.css(opts.css['titleLink']);
var $title = $('<div class="twitterSearchTitle"></div>').append($t).appendTo($frame).css(opts.css['title']);
if (opts.bird) {
var $b = $('<img class="twitterSearchBird" src="'+opts.birdSrc+'" />').appendTo($title).css(opts.css['bird']);
if (opts.birdLink)
$b.wrap('<a href="'+ opts.birdLink +'"></a>');
}
var $cont = $('<div class="twitterSearchContainter"></div>').appendTo($frame).css(opts.css['container']);
var cont = $cont[0];
if (opts.colorExterior)
$title.css('background-color',opts.colorExterior);
if (opts.colorInterior)
$cont.css('background-color',opts.colorInterior);

$frame.css(opts.css['frame']);
if (opts.colorExterior)
$frame.css('border-color',opts.colorExterior);

var h = $frame.innerHeight() - $title.outerHeight();
$cont.height(h);

if (opts.pause)
$cont.hover(function(){cont.twitterSearchPause = true;},function(){cont.twitterSearchPause = false;});

$('<div class="twitterSearchLoading">Loading tweets..</div>').css(opts.css['loading']).appendTo($cont);

// grab twitter stream
$.getJSONP({
url: url,
timeout: 30000,
error: function(xhr, status, e) {
failWhale(e);
},
success: function(json) {
if (json.error) {
failWhale(json.error);
return;
}
$cont.empty();
// iterate twitter results
$.each(json.results, function(i) {
if (!opts.filter.call(opts, this))
return; // skip this tweet
var tweet = opts.formatter(this, opts), $tweet = $(tweet);
$tweet.css(opts.css['tweet']);
var $img = $tweet.find('.twitterSearchProfileImg').css(opts.css['img']);
$tweet.find('.twitterSearchUser').css(opts.css['user']);
$tweet.find('.twitterSearchTime').css(opts.css['time']);
$tweet.find('a').css(opts.css['a']);
$tweet.appendTo($cont);
var $text = $tweet.find('.twitterSearchText').css(opts.css['text']);
if (opts.avatar) {
var w = $img.outerWidth() + parseInt($tweet.css('paddingLeft'));
$text.css('paddingLeft', w);
}
});

if (json.results.length < 2)
return;

// stage first animation
setTimeout(go, opts.timeout);
}
});

function failWhale(msg) {
var $fail = $('<div class="twitterSearchFail">' + msg + '</div>').css(opts.css['fail']);
$cont.empty().append($fail);
};

function go() {
if (cont.twitterSearchPause) {
setTimeout(go, 500);
return;
}
var $el = $cont.children(':first'), el = $el[0];
$el.animate(opts.animOut, opts.animOutSpeed, function() {
var h = $el.outerHeight();
$el.animate({ marginTop: -h }, opts.animInSpeed, function() {
$el.css({ marginTop: 0, opacity: 1 });
/*@cc_on
try { el.style.removeAttribute('filter'); } // ie cleartype fix
catch(smother) {}
@*/
$el.css(opts.css['tweet']).show().appendTo($cont);
});
// stage next animation
setTimeout(go, opts.timeout);
});
}
});
};

$.fn.twitterSearch.filter = function(tweet) {
return true;
};

$.fn.twitterSearch.formatter = function(json, opts) {
var t = json.text;
if (opts.anchors) {
t = json.text.replace(/(http:\/\/\S+)/g, '<a href="$1">$1</a>');
t = t.replace(/\@(\w+)/g, '<a href="http://twitter.com/$1">@$1</a>');
}
var s = '<div class="twitterSearchTweet">';
if (opts.avatar)
s += '<img class="twitterSearchProfileImg" src="' + json.profile_image_url + '" />';
s += '<div><span class="twitterSearchUser"><a href="http://www.twitter.com/'+ json.from_user+'/status/'+ json.id +'">'
+ json.from_user + '</a></span>';
var d = prettyDate(json.created_at);
if (opts.time && d)
s += ' <span class="twitterSearchTime">('+ d +')</span>'
s += '<div class="twitterSearchText">' + t + '</div></div></div>';
return s;
};

$.fn.twitterSearch.defaults = {
url: 'http://search.twitter.com/search.json?callback=?&q=',
anchors: true, // true or false (enable embedded links in tweets)
animOutSpeed: 500, // speed of animation for top tweet when removed
animInSpeed: 500, // speed of scroll animation for moving tweets up
animOut: { opacity: 0 }, // animation of top tweet when it is removed
applyStyles: true, // true or false (apply default css styling or not)
avatar: true, // true or false (show or hide twitter profile images)
bird: true, // true or false (show or hide twitter bird image)
birdLink: false, // url that twitter bird image should like to
birdSrc: 'http://cloud.github.com/downloads/malsup/twitter/tweet.gif', // twitter bird image
colorExterior: null, // css override of frame border-color and title background-color
colorInterior: null, // css override of container background-color
filter: null, // callback fn to filter tweets: fn(tweetJson) { /* return false to skip tweet */ }
formatter: null, // callback fn to build tweet markup
pause: false, // true or false (pause on hover)
term: '', // twitter search term
time: true, // true or false (show or hide the time that the tweet was sent)
timeout: 4000, // delay betweet tweet scroll
title: null, // title text to display when frame option is true (default = 'term' text)
titleLink: null, // url for title link
css: {
// default styling
a: { textDecoration: 'none', color: '#3B5998' },
bird: { width: '50px', height: '20px', position: 'absolute', left: '-30px', top: '-20px', border: 'none' },
container: { overflow: 'hidden', backgroundColor: '#eee', height: '100%' },
fail: { background: '#6cc5c3 url(http://cloud.github.com/downloads/malsup/twitter/failwhale.png) no-repeat 50% 50%', height: '100%', padding: '10px' },
frame: { border: '10px solid #C2CFF1', borderRadius: '10px', '-moz-border-radius': '10px', '-webkit-border-radius': '10px' },
tweet: { padding: '5px 10px', clear: 'left' },
img: { 'float': 'left', margin: '5px', width: '48px', height: '48px' },
loading: { padding: '20px', textAlign: 'center', color: '#888' },
text: {},
time: { fontSize: 'smaller', color: '#888' },
title: { backgroundColor: '#C2CFF1', margin: 0, padding: '0 0 5px 0', textAlign: 'center', fontWeight: 'bold', fontSize: 'large', position: 'relative' },
titleLink: { textDecoration: 'none', color: '#3B5998' },
user: { fontWeight: 'bold' }
}
};

// fn to handle jsonp with timeouts and errors
// hat tip to Ricardo Tomasi for the timeout logic
$.getJSONP = function(s) {
s.dataType = 'jsonp';
$.ajax(s);

// figure out what the callback fn is
var $script = $(document.getElementsByTagName('head')[0].firstChild);
var url = $script.attr('src') || '';
var cb = (url.match(/callback=(\w+)/)||[])[1];
if (!cb)
return; // bail
var t = 0, cbFn = window[cb];

$script[0].onerror = function(e) {
$script.remove();
handleError(s, {}, "error", e);
clearTimeout(t);
};

if (!s.timeout)
return;

window[cb] = function(json) {
clearTimeout(t);
cbFn(json);
cbFn = null;
};

t = setTimeout(function() {
$script.remove();
handleError(s, {}, "timeout");
if (cbFn)
window[cb] = function(){};
}, s.timeout);

function handleError(s, o, msg, e) {
// support jquery versions before and after 1.4.3
($.ajax.handleError || $.handleError)(s, o, msg, e);
}
};

/*
* JavaScript Pretty Date
* Copyright (c) 2008 John Resig (jquery.com)
* Licensed under the MIT license.
*/
// converts ISO time to casual time
function prettyDate(time){
var date = new Date((time || "").replace(/-/g,"/").replace(/TZ/g," ")),
diff = (((new Date()).getTime() - date.getTime()) / 1000),
day_diff = Math.floor(diff / 86400);

if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
return;
var v = day_diff == 0 && (
diff < 60 && "just now" ||
diff < 120 && "1 minute ago" ||
diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
diff < 7200 && "1 hour ago" ||
diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
day_diff == 1 && "Yesterday" ||
day_diff < 7 && day_diff + " days ago" ||
day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
if (!v)
window.console && console.log(time);
return v ? v : '';
}

})(jQuery);
</script>

<style>
#twitter1 {height:200px}
</style>

<div id="twitter1" class="twitter"></div>

<script type="text/javascript">
$(document).ready(function() {
$('#twitter1').twitterSearch({
term: 'bebenkoben',
title: 'Prodigy of Head',
titleLink: 'http://beben-koben.blogspot.com/',
birdLink: 'http://twitter.com/bebenkoben',
css: {
img: { width: '30px', height: '30px' }
}
});
});
</script>
Perhatikan script yg diberi warna itu yah!!! Khusus untuk warna merah jika sudah ada pada template sobat, jangan dipasang lagi. Untuk warna yg lainnya silahkan ganti dengan ID sobat. Id link blog, ID twitter dan title blog :) Belum bingung??? Lanjut yuk :P

Kode kode 2

<script type='text/javascript'>
//The JavaScript file
function twitterCallback2(twitters) {
var statusHTML = [];
for (var i = 0; i < twitters.length; i++) {
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a style="color:#56f;font-style:italic" href="' + url + '">' + url + '</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0) + '<a href="http://twitter.com/' + reply.substring(1) + '">' + reply.substring(1) + '</a>';
});
statusHTML.push('<li><span>' + status + '</span> <a style="color:#59f;font-style:italic" href="http://twitter.com/' + username + '/statuses/' + twitters[i].id + '">' + relative_time(twitters[i].created_at) + '</a></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {
return 'less than a minute ago';
} else if (delta < 120) {
return 'about a minute ago';
} else if (delta < (60 * 60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if (delta < (120 * 60)) {
return 'about an hour ago';
} else if (delta < (24 * 60 * 60)) {
return 'about' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if (delta < (48 * 60 * 60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
</script>

<!-- The HTML -->
<h3>Recent Twitter Updates</h3>
<div id="twitter_update_list"></div>
<script src="http://twitter.com/statuses/user_timeline/bebenkoben.json?callback=twitterCallback2&amp;count=10"></script>
<p style="float:right;font-size:small;color:#5599FF"><a href="http://twitter.com/bebenkoben">Follow me</a></p>

Kode kode 3

<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;font-size:10px" href="https://twitter.com/bebenkoben">Follow me on Twitter</a>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/bebenkoben.json?callback=twitterCallback2&count=5" type="text/javascript"></script>Pokoknya script yg diberi warna dapat diganti. Sudah ah versi bingungnya, sekarang versi online b-) Kita tinggal klik...klik...dan klik lagi :D Masukin ID twitter sobat, lalu edit apasaja yg perlu diedit.
http://twitter.com/
Hasilnya nanti akan seperti ini

Twitter bebenkoben

Mau yg beda lagi tapi gaya punya juga. Mungkin ini bisa jadi acuan \m/ Hasil jadi:

Silahkan kalau mau yg seperti itu sobat bisa lakukan edit-edit dari sini ;)

Resource by: Kadazuro

Kode kode 4

Jika ingin menampilkan twitter step-by-step, seperti bawaan blogspot tapi ada image photo kitanya! Secara default kode yg dibutuhkan sbb
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">
getTwitters('tweet', {
id: 'BebenKoben',
count: 5,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>

<div id="tweet"></div>
Seperti biasa script yg diberi warna berbeda, harap diperhatikan dan gantilah menurut kebutuhan. For detail about it, you can go Add Twitter to your blog (step-by-step)

Kode kode 5

jQTwitter memungkinkan kita untuk menampilkan tweets setiap pengguna dalam daftar. Kita memiliki kemampuan untuk mengatur jumlah tweets untuk menampilkan serta kemampuan untuk menampilkan gambar user dan set ukuran mereka. Daftar ini mudah dengan beberapa gaya yang sangat dasar CSS, karena semua elemen memiliki kelas mereka sendiri. Setiap link khusus twitter dikonversi (ex.@ dan #). Mudah digunakan dan untuk mengimplementasikan di situs kita.
Kode secara keseluruhan
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>
<script type="text/javascript">
(function($){

$.fn.extend({

jQTwitter: function(settings) {

var defaults = {
username : 'twitter',
count : 5,
show_image: true,
image_size: 30
}

var settings = $.extend(defaults, settings);

return this.each(function() {
var set = settings;
var $this = $(this);
//Grab the JSON feed of the user
$.getJSON('http://twitter.com/status/user_timeline/' + set.username + '.json?count=' + set.count + '&callback=?',

function(data){

$.each(data, function(i, item) {
//Create a <li> for each tweet
var jQtweet = '<li class="tweetItem">';

if (set.show_image){
if (set.image_size != 0) {
//jQtweet += '<div class="tweetpic">';
jQtweet += '<a href="http://twitter.com/' + item.user['screen_name'] + '">'
jQtweet += '<img class="tweetimg" width="' + set.image_size +'" height="' + set.image_size + '" src="' + item.user['profile_image_url'] + '" />';
jQtweet += '</a> ';
//jQtweet += '</div>';
}
}
var tweetTxt = item.text;
tweetTxt = tweetTxt.replace(/(http\:\/\/[A-Za-z0-9\/\.\?\=\-]*)/g,'<a href="$1">$1</a>'); //Screen Name Link
tweetTxt = tweetTxt.replace(/@([A-Za-z0-9\/_]*)/g,'<a href="http://twitter.com/$1">@$1</a>'); //Mentions Link @
tweetTxt = tweetTxt.replace(/#([A-Za-z0-9\/\.]*)/g,'<a href="http://twitter.com/search?q=$1">#$1</a>');// Hash Link #

jQtweet += tweetTxt;
jQtweet += '<br />'
jQtweet += '</li>';

$this.append(jQtweet);
});
});
});
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#tweets').jQTwitter({
username: 'BebenKoben',
count: 6,
show_image: true
});
});
</script>
<style>
body{
width:350px;
margin:auto;
}
#tweets{
background-color: #EEE;
display:inline-block;
padding:2px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 1px 3px #555;
-webkit-box-shadow: 1px 1px 3px #555;
box-shadow: 1px 1px 3px #555;
}
.tweetItem {
list-style:none;
font-family:verdana;
font-size:13px;
padding:3px;
height: 45px;
width: 350px;
margin-bottom: 10px;
}
.tweetimg {
float:left;
background-color:#999;
border:none;
padding:3px;
margin-right:5px;
}
</style>
</head>

<body>
<ul id="tweets">

</ul>
</body>
</html>
Ganti username dengan ID twitter sobat.

Kode kode 6

Berikut last tweet dengan menyertakan thumbnail image pada sisi kirinya sob, keren dan gaya oke b-)
<script src="http://beta.publitweet.com/widgets/javascript.js"></script>
<script>
new Publitweet({
feed : 'bebenkoben',
filters : {'keywords':'','blacklist':''},
title :  'Beben Koben on Twitter',
description : 'My Latest Tweets',
headerBackground : '#33CCFF',
borderColor : '#CCC',
width : 450,
height : 300       
}).show();   
</script>
 DEMO 

jQuery Twitter Widget with @Anywhere support

Kode Kode 7

twitstampSilahkan masuk ke halaman ini guna menggenerate badge twitter dengan cara memasukan ID twitter sobat TwitStamp. Kalau sobat register, maka bisa memilih ragam badgesnya. Kalau secara default ya seperti ini contohnya yg ada disini :P

Kode kode 8

twitter
<div class="textwidget"><script src="http://s.moopz.com/fanbox_init.js" type="text/javascript">
</script><br />
<div id="twitterfanbox"><script type="text/javascript">
fanbox_init("bebenkoben");
</script></div></div><br />
<style>
.FB_SERVER_IFRAME {
width: 290px !important;
height: 250px !important;
}
</style>
Ganti bebenkoben dengan ID twitter sobat.

Sekian dan terima kasih :)

Kode kode 9

<div style="width: 176px;margin:0 auto; text-align: center;"><embed src="http://twitter.com/flash/twitter_badge.swf" flashvars="color1=200&amp;type=user&amp;id=bebenkoben" quality="high" name="twitter_badge" allowscriptaccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="176" width="176"><br><a style="font-size: 10px; color: rgb(0, 0, 204)" href="http://twitter.com/bebenkoben">follow BebenKoben</a></div>

Result:

Kode kode 10

Here Demo

    Here Code
    <style type="text/css">
    .listatwitter {
    margin:0px auto;
    width:400px;
    padding:10px
    ;background:#ffe;
    color:#000080;
    text-align:left;
    border:groove 3px #55CCFF;
    }
    </style>
    <div class="listatwitter">
    <a class="twitter-follow-button" data-lang="id" href="http://twitter.com/YOUR-NAME-ACCOUNT">Follow @YOUR-NAME-ACCOUNT</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    <ul id="twitter_update_list"></ul>
    </div>
    <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
    <script src="http://twitter.com/statuses/user_timeline/YOUR-NAME-ACCOUNT.json?callback=twitterCallback2&amp;count=5" type="text/javascript"></script>
    Ganti YOUR-NAME-ACCOUNT dengan account sobat masing²

    TWEET!

    Last tweet dengan bergaya scrolling!

    demo
    Resource by: http://artistutorial.blogspot.com/2011/09/how-to-make-horizontal-scrolling.html
    http://tweet.seaofclouds.com/
    http://www.google.com/ig/directory?root=%2Fig&dpos=top&q=32hours&btnG=Search+Homepage+Content
    Jika ada yg gaya lagi nanti ta' update, atau sobat punya yg lainnya :-? Wassalam \m/
    Loading...
    XTwitter oh Twitter

    Subscribe my posts Register For Free!
    , , ✎

    2 comments

    [?] g+ convert

    DO NOT EVEN TRY ADD LINK [-X
    You can use some HTML tags, such as
    <b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


    MISC

    Resources

    WANT BE HERE!!! CONTACT ME :P

    FACEBOOK PAGE