Trik Komputer: Twitter oh Twitter

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

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

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.

Hasilnya nanti akan seperti ini

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:

Kode kode 4

Jika ingin menampilkan twitter step-by-step, seperti bawaan blogspot tapi ada image photo kitanya! Secara default kode yg dibutuhkan sbb

Seperti biasa script yg diberi warna berbeda, harap diperhatikan dan gantilah menurut kebutuhan. For detail about it, you can go

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>

jQuery Twitter Widget with @Anywhere support

Kode Kode 7

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

Kode kode 8

<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&type=user&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:

follow BebenKoben

Kode kode 10

Here Demo

Follow @BebenKoben

Here Code

Ganti YOUR-NAME-ACCOUNT dengan account sobat masing²

TWEET!

Last tweet dengan bergaya !

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/

Trik Komputer

Sabtu, 08 Januari 2011

Twitter oh Twitter