Fan Box Twitter Popup Window Widget

Fan Box Twitter Popup Window Widget

Bola Hero Gawai

Fan Box Twitter Popup Window Widget

Fan Box Twitter Popup Window
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 Twitterhttp://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,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" 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.


Follow Button PSD: https://dribbble.com/shots/1008112-Freebie-Twitter-Buttons-PSD

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×