Inspiration Web and Twitter

Bagaimana dengan sobat apa telah melakukan trik berikut ini what are you doing? Kalau memang sudah, bisa juga dijadikan postingan loh ;) Coba tengok ada apa saja didalam web ini Mudaimemo! Depannya mah cuman tab dengan subtabs 4 biji ;)) tapi pas nengok kedalamnya WOW :-bd Subtabsnya sendiri dikasih judul iPhone APP, jQuery, Web APP, and Demo. Jika sobat yg suka dengan flash dalam menghiasi blog/web, dimana widget ini mencakup Geo Counter, Weather, Flash Effects, Flash Messages, and Google PR...itu semua bentuk flash :-bd Widgeo.Net. Sekarang kita bedah cara dari mudaimemo mengenai "Twit - Display Twitter Tweets on a Blog"

Script Plugin

Letakin diatas/sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
(function(jQuery){var _i=0;jQuery.fn.twit=function(user,options){if(typeof user!='string')return this;var
opts=jQuery.extend({},jQuery.fn.twit.defaults,options),c=jQuery.isFunction(opts.callback)?opts.callback:_callback,url='http://twitter.com/statuses/user_timeline/'+user+'.json',params={};opts.user=user;params.count=opts.count;return this.each(function(i,e){var $e=$(e);if(!$e.hasClass('twit'))$e.addClass('twit');jQuery.ajax({url:url,data:params,dataType:'jsonp',success:function(o){c.apply(this,[(o.results)?o.results:o,e,opts]);}});});};jQuery.fn.twit.defaults={user:null,callback:null,icon:true,username:true,text:true,count:200,limit:7,label:'Twitter',title:''};var _callback=function(o,e,opts){var $this=$(e);if(!o||o.length==0||$this.length==0)return false;$this.data('_inc',1);_i++;var username=o[0].user.screen_name,icon=o[0].user.profile_image_url;var h='<div class="twitHeader">'+' <span class="twitLabel">'+opts.label+'</span> '+' <span class="twitTitle">'+opts.title+'</span>'+'</div>';if(opts.icon||opts.username){h+='<div class="twitUser">';if(opts.icon)
h+=' <a href="http://twitter.com/'+username+'/">'+' <img src="'+icon+'" alt="'+username+'" title="'+username+'" style="vertical-align:middle;" />'+' </a> ';if(opts.username)
h+='<a href="http://twitter.com/'+username+'/">'+username+'</a>';h+='</div>';}
h+='<ul class="twitBody" id="twitList'+_i+'">'+_build(o,$this,opts)+'</ul>';$this.html(h);$('a.twitEntryShow','#twitList'+_i).live('click',function(e){e.preventDefault();var $t=$(this);$t.parent().fadeOut(400,function(){var i=$this.data('_inc');i++;$this.data('_inc',i);if($t.hasClass('twitEntryAll')){$t.die('click');var start=(i*opts.limit)-opts.limit;$(this).after(_build(o,$this,opts,start,o.length)).remove();}else{$(this).after(_build(o,$this,opts)).remove();}});});};var _build=function(o,$t,opts,s,e){var
h='',inc=$t.data('_inc'),start=s||(inc*opts.limit)-opts.limit,end=e||((o.length>start+opts.limit)?start+opts.limit:o.length);for(var i=start;i<end;i++){var
t=o[i],username=t.user.screen_name,icon=t.user.profile_image_url;h+='<li class="twitEntry">';if(opts.text){var text=t.text.replace(/(https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/,function(u){var shortUrl=(u.length>30)?u.substr(0,30)+'...':u;return'<a href="'+u+'">'+shortUrl+'</a>';}).replace(/@([a-zA-Z0-9_]+)/g,'@<a href="http://twitter.com/$1">$1</a>').replace(/(?:^|\s)#([^\s\.\+:!]+)/g,function(a,u){return' <a href="http://twitter.com/search?q='+encodeURIComponent(u)+'">#'+u+'</a>';});h+=' <span>'+text+'</span>';}
h+='</li>';}
if(o.length>end){h+='<li class="twitNavi">'+'<a href="#" class="twitEntryShow">more</a> / ';if(o.length>opts.limit)
h+='<a href="#" class="twitEntryShow twitEntryAll">all</a>';h+='</li>';}
return h;};})(jQuery);
//]]>
</script>

Kode CSS

Letakan diatas kode ]]></b:skin>

.twit {
background-color: #cbf2ff;
padding: 7px;
}
.twitHeader {
background-color: #fff;
margin: 0;
padding: 7px 7px 0 7px;
}
.twitLabel {
font-weight: bold;
font-size: 22px;
color: #33ccff;
}
.twitTitle {
font-weight: bold;
}
.twitUser {
background-color: #fff;
border-bottom: none;
font-size:160%;
padding: 7px;
}
.twitUser a{
color:#222;
font-weight:bold;
text-decoration: none;
}
.twitBody {
background-color: #ffffff;
padding: 0 7px 7px 7px;
margin: 0;
list-style: none;
}
.twitEntry {
padding: 6px 8px;
margin: 0;
border-bottom: dashed 1px #ccc;
height: auto !important;
}
.twitNavi {
clear: both;
text-align: center;
margin-top: 0;
padding: 5px;
background-color: #ffffff;
}

Setelah itu dilakukan semua, SAVE deh. Lari ke halaman Page Elements dan cari Add a Gadget ► HTML/Javascript Masukin kode jQuery pemanggil dan HTML berikut:<div id="twitter1"></div>

<script type="text/javascript">
$(document).ready(function(){
$('#twitter1').twit('bebenkoben', {
label: 'Beben Koben',
limit: 5,
title: 'On Twitter'
});
});
</script>Screenshot:

Ganti script yg warnanya dibedakan dengan ID dan title sobat inginkan :) Semoga hasil BW kali ini memberikan inspirasi (inspiration) dan twitter sobat jd penuh gaya alias keren b-)