Widget Update via Twitter

// 39 komentar

Twitter merupakan jejaring sosial yang menawarkan fitur microblog (posting pendek, kurang dari 200 karakter) yang memungkinkan penggunanya untuk mengirim & membaca pesan (tweets). Pengguna dapat menulis pesan berdasarkan topik dengan menggunakan ‘hashtags’ (#). Sedangkan untuk menyebutkan atau membalas pesan dari pengguna lain bisa menggunakan tanda ‘at’ (@).

Sekarang, bagaimana cara memasang widget “update via twitter” dalam blog? Anda dapat melakukannya melalui dua cara, otomatis atau manual. Ketika Anda memilih “otomatis”, maka yang perlu Anda lakukan adalah mengunjungi situs Twitter Resources & dibutuhkan beberapa kostumasi, agar widget yang Anda inginkan tampil maksimal dalam blog.

Apabila Anda memilih “manual”, maka terdapat beberapa langkah yang harus dipenuhi.

  • Download atau copypaste script blogger.js melalui situs resminya, yang tampak seperti di bawah ini:
    function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push("<li><span>"+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};
    Script di atas sudah dikompres melalui Yui Compressor. Anda pun bisa menambah & memodifikasi kode yang berwarna merah, contoh: <span> menjadi <span style="color:#333333; font-size:1em;"> dan sebagainya.
  • Simpan script tersebut dalam situs layanan penyimpanan file Anda, seperti: Google Code atau simpan dalam media penyimpanan Anda.
  • Twitter menyediakan beberapa script yang bisa kita manfaatkan menjadi widget, antara lain:
    User Timeline
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>
    Public Timeline
    <script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback2&amp;count=5"></script>
    User Favorite
    <script type="text/javascript" src="http://twitter.com/favorites/username.json?callback=twitterCallback2&amp;count=5"></script>
    User Search
    <script type="text/javascript" src="http://search.twitter.com/search.json?tag=jython&from=username&rpp=5&callback=twitterCallback2"></script>
    Silakan ganti kode yang berwarna merah dengan username Anda.
  • Misalnya, Anda ingin memasang user timeline maka yang Anda lakukan adalah menambahkan kode berikut dalam “Add/tambah gadget” blogger:
    <div id="twitter_div">
    <ul id="twitter_update_list">
    </ul>
    <p>@<a href="###" title="Follow me">username</a> on Twitter</p>
    </div>
    <script type='text/javascript'>
    //<![CDATA[
    function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push('<li><span>'+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};
    //]]>
    </script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>
    atau
    <div id="twitter_div">
    <ul id="twitter_update_list">
    </ul>
    <p>@<a href="###" title="Follow me">username</a> on Twitter</p>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>
    Ganti kode yang berwarna merah dengan alamat twitter & username Anda.
  • Sekarang bandingkan widget timeline Anda tersebut dengan akun profil timeline Anda di Twitter

Update (30 Oktober 2012) — Kode Widget Twitter Update di atas mungkin tidak dapat digunakan lagi, pihak pengembang Twitter telah menyediakan widget tersebut pada Create and manage your widgets dalam akun tiap pengguna Twitter. Sebagai tambahan, setelah membuat widget tersebut diharapkan tidak menghapusnya. Oleh karena sangat dimungkinkan script yang digunakan juga tidak dapat menampilkan pembaharuan timeline melalui Twitter.

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Demo tampilan widget “timeline via twitter” dapat Anda lihat pada posting widget update.

@Optimasi_Blog on Twitter

[ Baca selengkapnya ]

Google Web Fonts

// 21 komentar

Font yang digunakan dalam blog ini berukuran 120% (setara dengan 1.2em) dan mengadopsi google web fonts yang berbasis keluarga ‘serif’ (font:120% 'Crimson Text', georgia, serif;). Sedangkan pada title blog digunakan

[ Baca selengkapnya ]

Dropdown Menu (Navigasi Horizontal) dengan CSS3

// 38 komentar

Salam persahabatan”,
mungkin seperti itulah salam pembuka atau salam penutup dari sang empu tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam GFC.

Dropdown Menu CSS3

Gambar 1. Screenshot dropdown menu horizontal dengan CSS3.

Trik blogger ini mungkin agak berbeda dengan posting aslinya1 (sama caranya), karena menu horizontal di sini tidak menggunakan image & ditambahkan

[ Baca selengkapnya ]

Komentar atau No Comment

// 37 komentar

Komentar umumnya merupakan pernyataan lisan atau tertulis sering berkaitan dengan sebuah informasi, atau pengamatan atau pernyataan (Wikipedia). Sedangkan komentar dalam blog (menurut saya) merupakan kalimat tertulis untuk memberikan pendapat, masukan, dan/atau kritik terhadap suatu tema posting yang diterbitkan oleh penulis posting dalam form komentar.

[ Baca selengkapnya ]