Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

22 June 2011

Membuat Recent Status Bar Float untuk Twitter

Membuat Recent Status Untuk twitter bagi Blog ente yang terus Update tentang twitter.
ada caranya memasang di Blogger hehe. jadi status twitter terakhir kamu akan muncul di bawah layar browser kesayangan anda (mungkin di IE ga bakalan ya :p )
oh iya Untuk ini yang harus diperhatikan adalah. pastikan Account kamu tidak di Protect (Public) sehhingga Public dapat melihat status status Anda.
oke mari mulai.

Initialize / pasang framework jQuery Terlebih dahulu. di Edit HTML
masukan kode
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
Persis Sebelum tag </head>  

Lalu masuk ke Blogger Pilih design. di page Element Add Gadget terserah dimana. dan pilih HTML / Javascript

Ketik kode berikut
<script>
$(document).ready(function() {
var myuser = 'thepedox';
$.getJSON("http://api.twitter.com/1/statuses/user_timeline/"+myuser+".json?callback=?", function(json) {
   $('.mystat').html(json[0].text);
$('.ballon').fadeIn(1000);
 });
});
</script>
<style>
.ballon{z-index:999999;position:fixed;bottom:0px;left:0px;height:15px;width:100%;background-color:#000;padding:8px;
opacity:0.8;color:#fff;display:none;
}
.ballon a{
text-decoration:none;
opacity:1;
}
.ballon a:hover{
text-decoration:none;
opacity:1;
}
</style>
<div class="ballon"><b>Recent status on Twitter : </b><span class='mystat'></span></div>
ganti username ane thepedox dengan username ente :D

05 May 2011

Kaskus Badge With jQuery

langsung saja cara memakai kaskus Badge atau KTP kaskus menggunakan jQuery AJax dan YQL (karena bersifat Cross Domain ke kaskus.us
sebelumnya Initialize jQuery nya dulu ya jquery.js

var userid = "1127204"; //UserID agan
jQuery.ajax = (function(_ajax){ var protocol = location.protocol, hostname = location.hostname, exRegex = RegExp(protocol + '//' + hostname), YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?', query = 'select * from html where url="{URL}" and xpath="*"'; function isExternal(url) { return !exRegex.test(url) && /:\/\//.test(url); } return function(o) { var url = o.url; if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) { o.url = YQL; o.dataType = 'json'; o.data = { q: query.replace( '{URL}', url + (o.data ? (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data) : '') ), format: 'xml' }; if (!o.success && o.complete) { o.success = o.complete; delete o.complete; } o.success = (function(_success){ return function(data) { if (_success) { _success.call(this, { responseText: data.results[0] .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '') }, 'success'); } }; })(o.success); } return _ajax.apply(this, arguments); }; })(jQuery.ajax); 
$(document).ready(function() { $.get('http://www.kaskus.us/member.php?u=' + userid , function(res) { var user = $(res.responseText).find('h1').html(); var avatar = $(res.responseText).find('#user_avatar').attr('src'); var jumlahpost = $(res.responseText).find('#stats .statistics_group:first ul li:first').html(); var joindate = $(res.responseText).find('#stats_mini dl dd:first').html(); var username = user.split('<img'); var post = jumlahpost.split('</span>'); $('.ktp_kaskus').html('<div style="width:150px;font-size:13px;font-family:arial;padding:5px"><a href="http://www.kaskus.us/member.php?u='+ userid +'"><strong>'+ username[0] +'</strong></a><br><img src="'+ avatar +'" alt=""/></br>UserID: '+ userid +'<table><tr><td>Join date : </td><td>'+ joindate +'</td></tr><td>Total Post : </td><td>'+ post[1] +'</td></tr></table></div>'); $('.ktp_kaskus td').css({'font-size':'13px'}); }); });

 yang berwarna merah di ganti dengan userID agan

oke... sentuhan terakhir tambahkan kode
<div class='ktp_kaskus'></div>
di mana saja tempat badge ingin di buat didalam tag body misalnya dan selesai !

demo ?

buat aja sembarang file

credits to :
usejquery.com
jquery.com
Yahoo Query Langguage