Ditulis oleh: Ditulis pada: 11/01/2014
Fan Box Twitter Popup Window Widget - Meneruskan postingan sebelumnya yang membahas tentang Facebook Like Box yang dibuat menjadi popup window untuk mengurangi penggunakan js dari Facebook, kini saya akan share cara membuat Fan Box Twitter dengan popup window juga dengan tujuan yang sama yaitu mengurangi penggunaan js dari Twitter.
Namun pembuatannya agak berbeda dengan sebelumnya karena di sini kita harus meng-hosting dulu Fan Box Twitter-nya. Anda bisa meng-hosting-nya di Google Code ataupun Google Drive yang tentunya kita harus membuat halaman HTML untuk menampilkan Fan Box Twitter ini.
Untuk membuat halaman fan box ini untuk di hosting agar memiliki halaman/jendela tersendiri, silahkan copy kode HTML di bawah ini dan paste di notepad. Kemudian Save As dengan File Name "Fan-box-twitter.html" (tanpa tanda kutip) dan Save as type: All Files (*.*).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Twitter Fans Box</title>
<style type='text/css'>
body{padding:0;margin:0}
</style>
</head>
<body>
SCRIPT FAN BOX TWITTER DI SINI
</body>
</html>
Silahkan ganti
SCRIPT FAN BOX TWITTER DI SINI dengan script Fan Box Twitter Anda sendiri. Untuk mendapatkannya silahkan masuk ke websitenya di bawah ini.
Fan Box Twitter: http://www.twitter-fanbox.com/
Silahkan klik tombol Generate Code untuk mulai membuat Fan Box Twitter Anda. Silahkan tentukan lebar kotaknya pada Width: 300 px dan Faces: 15. Kemudian silahkan copy kodenya dan silahkan ganti kode
SCRIPT FAN BOX TWITTER DI SINI pada kode HTML di atas tadi. Kemudian silahkan SAVE As notepad-nya dengan ekstension *.html seperti saya jelaskan tadi di atas.
Setelah itu silahkan hosting file Fan-box-twitter.html yang Anda buat tadi ke akun Google Code ataupun Google Drive. Namun saya sarankan untuk menguploadnya ke Google Code dengan TortoiseSVN.
Kemudian untuk menampilkan tombol Follow Twitter-nya, silahkan copy kode di bawah ini dan paste pada gadget HTML/JavaScript.
<a href="javascript: void(0)" onclick="popup2('URL FILE HOST DI SINI')" title="Follow Us On Twitter"><img alt="Follow Twitter" height="20" src="data:image/gif;base64,R0lGODlhewAUANU/AO7u7jMzM/Ly8ja46LKysvDw8KampmnB4gCc1wCr7N3d3arZ6tXV1WZmZoyMjL6+vkmx2VlZWdfZ2cDAwJiYmACm5cvLy+np6dLn79DQ0Cuj0AiZ0M3NzUxMTLq6uhmv5+zz9nNzc5ubm7re64zL4paWlsPDw4GBgd7s8aioqEBAQJ2dneLi4n9/f/n5+erq6uzs7Ofn5+jo6OXl5fX19fb29vj4+ODg4P7+/uHh4fz8/P39/fr6+uPj48zMzP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFMgA/ACwAAAAAewAUAAAG/8DfL+MrGo/IpHLJbDqf0OgzM/vNWC6cdsvter/gsHhMLpvJLtbQtWu73/C4fE6v2+/4fN5F1Pn/gIGCg4SFhoeIiYqLOkU8j5CRkpOUlZaXmJmam5w8RTagNiggoTYYEBoHCwulra6vsLGys7S1tq5FNbo1JBooujQaCMMbJLoiyCIKu8wBJiYBzNLTzMq6JinUuxnIGdq7ycjZ1BciF9/oNUU07DQLCBsHGCgIFQkVHyDsASfICu0AnUEDSLBgQBPsRDQwyM5AAAcOHjJMKKJDAxEpGCrowIHGiY4eQU5kV0SASQEYPlSAVy+BywEnnQETIIECBQkmA0yYEMBkDP8DFDgImGBAQAwKMQQYmBCTqQCFJoE6panCg64UASRIWEphqgBdF2vQuCmAAAGaN0XQcHiCKD+mNZEOndDVZMmTI+xV2OvS5YGYFB48oBoihAoLAnTyNBkhQkQDBHpGPhvgbE6nUCl0EEHhpOaTNDoEVuE4AOKTAi4y7txYAIUID3qyddtWggoHDRq4VtGhqIAiAIIDKEDiQ9++FUYIDxAhNwDc7Bq0ABBAcAAABFTIeNpBgIoHLSK0yC5g+YPgFBoACBHBR3n06oU3CBxgewQKwoPPD66QQQcVDEQgQmwAJDZBAQYWgNsEkVmg2XbBFQHDhBMuYM9xCQwAAIU6mQT/w3wTpgdDdbHBkN6GJYZAgQrZUXAChSM+EGIDMEgQwkMUGqACjCoYQOCHFMAI5IQWBFDCCSGUkFWJMU5Y3YcW5eagehQW8cKVVwKwwADHfYABli8E4AGWDnSgwEYOhOmBBwG8EJkJL7D3go4RAPAfAWBGEMILG1FwZVltXsnCbVc6oAILbF45H5gvLPoCDHfS+UKial4p5gu4nWRiA2AWIcOnMkhAAgQXZvglqDKICSoLEXTQQQQspLpmfTCcQNphMjAQAAUytBAADKhaQJpFOcjQQAS3gXoBnchOcAGbnzZQAqrGTvtpCzvqyiu0xnawQrcrsGpRBzKU0ACqRcSg7666JBwwwACqFCDDuupOoMC621mA2Lz2KjCBugBIMNgFMVwwQQ4xMMABvQUL8IAF8sbQwwM+AEAvDA4P9kIM/qprAQMMf7wuAz4UfDDH/0r8AMgTM5DvAzMkbAG9Rcxgs80vCAfDBTf3PG/PM3x687wxyHBz0T7HELPRQAfN9NJP+/w00kErnfTRTP9MddFKc23zp11HXUQPZJdt9tlop6322my37fbbcMfdgw8Z3JDD3XjnrffefPft99+ABy744IPfkMEPDChww+KMN+7445BHLvnklFdu+eWVK8BADz/0QIQUoIcu+uikO3H4D0EAACH5BAUyAD8ALAAAAAB7ABQAAAb/wJ+E8ysaj8ikcslsOp/Q6JMjEUqv2Kx2e5X4uOCweJz8ks/otHrNbrvf8Lg8WasV6806Pq/f0/1zbTQ0RYNMg4iEh4mKSYg/hpCNgWMCAkWWmJmalp2em5yfP5mfpaSdo6iUUpunoK+ml0etl661sZ6poKtPAABFvj++wcC/RsPIxsfGycnCzdDIvFEwMEXVP9XY19ZG2tjb3t3f5OPm2eXh004vLz/t7u/tRvBF8PPySPj39fvx8/zqrYMio6DBHwZlGEnIUCFChwshNnxY5GDDghQHPonBseOPjjGOgOT4MWRJJCSLkPSYkuXIlSY1PpkxwwjNmklo2sSp80jPIh89dQYVOrTmT5lI0ZhJyjSLjypNo0qpwmCp1KtIfDD4EQQAOw==" width="123" title="Follow Us On Twitter"/></a>
<script type="text/javascript">
function popup2(e){var t=300;var n=330;var r=(screen.width-t)/2;var i=(screen.height-n)/2;var s="width="+t+", height="+n;s+=", top="+i+", left="+r;s+=", directories=no";s+=", location=no";s+=", menubar=no";s+=", resizable=no";s+=", scrollbars=no";s+=", status=no";s+=", toolbar=no";newwin=window.open(e,"windowname5",s);if(window.focus){newwin.focus()}return false}
</script>
Silahkan ganti
URL FILE HOST DI SINI dengan URL dari file Fan-box-twitter.html yang Anda host tadi. Di atas saya menggunakan image dengan base64 agar loading blog semakin ringan.