Add Facebook to My Blog :D

Social Plugins

Yang paling penting dari Social Plugin adalah Like Button, yang ngemungkinin users buat nge-share halaman elo ke temen-temen mereka dengan hanya sekali click. Elo bisa nge-add a Like button ke halaman mana aja dengan sebuah iframe tag:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://semuthitam-takberbusana.blogspot.com"
     scrolling="no" frameborder="0"
     style="border:none; width:450px; height:80px"></iframe>

Sekali elo udah punya Like Button di blog elo, elo bisa masukin Social Plugins yang lainnya buat nambah user interactions menjadi lebih engaging experiences throughout your site :P.

Here are the activity and recommendations plugins for the Semut Hitam Tak Berbusana's blog:

Activity Feed Plugin	Recommendations Plugin

Kalo elo punya Application Facebook elo bisa nge-load JavaScript SDK buat user login ke applikasi elo melalui blog elo.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
      <script>
         FB.init({ 
            appId:'101507343237619', cookie:true, 
            status:true, xfbml:true 
         });
      </script>
      <fb:login-button>Login with Facebook</fb:login-button>

Login with Facebook
Click here to Refresh

---

Sekarang yang mesti lo lakuin cuman masuk ke http://www.facebook.com/developers/apps.php dan pilih Applikasi lo,

Baru sekarang lo bisa coba ganti SCRIPT di atas jadi kaya gini...

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>

<script>
  FB.init({ 
    appId:'101507343237619', cookie:true, 
    status:true, xfbml:true 
  });
</script>

<div id="epbelogin">
  <fb:login-button>Login with Facebook</fb:login-button><br/>
  <a href="">Click here to Refresh</a>
</div>

<script>
   FB.api('/me', function(user) {
      if(user.name) {
         var image = document.getElementById('image');
         image.src = 'http://graph.facebook.com/' + user.id + '/picture';
         var name = document.getElementById('name');
         name.innerHTML = user.name;
         document.getElementById('epbelogin').style.display='none';
      }
   });
</script>

           <div align="center">
           <img id="image"/>
           <div id="name"></div>
           </div>

Hunting favicon.ico

Susah nge-Upload file *.ico ? ..EMBER..

Pake web hosting gratisan, gak diurus, mati hostingannya, ilang icon-nya
kampret.
Mendingan ngerampok punya orang aja yo ah Powered by Google.

Koleksi Gue nih awas lo kalo di ambil !

Kalo elo punya yang lebih kerenan bagi gue dong..

---

Inc.

Aturan Pakai

Simpan ke3²nya tepat diatas tag </head>

<link href='http://universitasswasta.com/favicon.ico' rel='shortcut icon' type='/icon/ico'/>
<link href='http://universitasswasta.com/favicon.ico' rel='icon'/>
<link href='http://universitasswasta.com/favicon.ico' rel='shortcut icon'/>

Note:

Khusus buat yang paling bawah, kalo gue sih pake file *.gif

JavaScript Standard Scroll Clock

Sample

The Script

<style type="text/css">
div.angk, div.hour, div.min, div.det
{
position:absolute;
}
div.hour, div.min, div.det
{
width:2px;
height:2px;
font-size:2px;
}
div.angk
{
width:30px;
height:30px;
font-family:arial,verdana,sans-serif;
font-size:10px;
color:#000000;
text-align:center;
padding-top:10px
}
div.min
{
background:#0000FF;
}
div.hour
{
background:#000000;
}
div.det
{
background:#FF0000;
}
</style>

<div style="width:120px;height:100px;position:relative;left:58px;top:50px">

 <div id="angk1" class="angk">1</div>
 <div id="angk2" class="angk">2</div>
 <div id="angk3" class="angk">3</div>
 <div id="angk4" class="angk">4</div>
 <div id="angk5" class="angk">5</div>
 <div id="angk6" class="angk">6</div>

 <div id="angk7" class="angk">7</div>
 <div id="angk8" class="angk">8</div>
 <div id="angk9" class="angk">9</div>
 <div id="angk10" class="angk">10</div>
 <div id="angk11" class="angk">11</div>
 <div id="angk12" class="angk">12</div>

 <div id="hour1" class="hour"></div>
 <div id="hour2" class="hour"></div>
 <div id="hour3" class="hour"></div>
 <div id="hour4" class="hour"></div>

 <div id="min1" class="min"></div>
 <div id="min2" class="min"></div>
 <div id="min3" class="min"></div>
 <div id="min4" class="min"></div>

 <div id="min5" class="min"></div>

 <div id="det1" class="det"></div>
 <div id="det2" class="det"></div>
 <div id="det3" class="det"></div>
 <div id="det4" class="det"></div>
 <div id="det5" class="det"></div>
 <div id="det6" class="det"></div>
</div>



<script type="text/javascript">
<!-- Standard Scroll Clock
var H='....';
var H=H.split('');
var M='.....';
var M=M.split('');
var S='......';
var S=S.split('');
var Ypos=0;
var Xpos=0;
var Ybase=8;
var Xbase=8;
var dots=12;

function jam(){
var waktu=new Date ();
var dets=waktu.getSeconds();
var det=-1.57 + Math.PI * dets/30;
var mins=waktu.getMinutes();
var min=-1.57 + Math.PI * mins/30;
var hr=waktu.getHours();
var hrs=-1.57 + Math.PI * hr/6 + Math.PI*parseInt(waktu.getMinutes())/360;
for (i=0; i < dots; ++i){
document.getElementById("angk" + (i+1)).style.top=0-15+40*Math.sin(-0.49+dots+i/1.9).toString() + "px";
document.getElementById("angk" + (i+1)).style.left=0-14+40*Math.cos(-0.49+dots+i/1.9).toString() + "px";
}
for (i=0; i < S.length; i++){
document.getElementById("det" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(det).toString() + "px";
document.getElementById("det" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(det).toString() + "px";
}
for (i=0; i < M.length; i++){
document.getElementById("min" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(min).toString() + "px";
document.getElementById("min" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(min).toString() + "px";
}
for (i=0; i < H.length; i++){
document.getElementById("hour" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(hrs).toString() + "px";
document.getElementById("hour" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(hrs).toString() + "px";
} 
setTimeout('jam()',50);
}

jam();
//-->
</script>

Scroll Title with JavaScript

The Code

<script language="JavaScript"><!--
var kiri="[";
var kanan="]";
var psn=" Segerombolan SemutHitam Yang Tengah Menyeret Sesosok Mayat Perempuan Tak Berbusana ";
var ngacir=200;
var t;
var lagi_scroll=0;

function scroll_title() {
        document.title=kiri+psn+kanan;
        psn=psn.substring(1,psn.length)+psn.charAt(0);
        t=setTimeout("scroll_title()",ngacir);
}

function do_scroll()
{
if (!lagi_scroll)
  {
  lagi_scroll=1;
  scroll_title();
  }
}

function stop_scroll()
{
clearTimeout(t);
lagi_scroll=0;
}
// End 
// --></script>

<a onClick="do_scroll();" style="cursor:pointer;"><b style="color:darkgreen;">Click to scroll</b></a><br/>
<a onClick="stop_scroll();" style="cursor:pointer;"><b style="color:darkred;">Click to STOP scroll</b></a>

---

Result

Click to scroll
Click to STOP scroll

---

Window Shake with JavaScript

The Code

<script language="JavaScript"><!-- Begin
function geol(n) {
if (parent.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i); 
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0); 
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);}}}}
//  End --></script> 

<a onClick="geol(1);" style="cursor:pointer;">Click Gw buat DEMO</a>

---

Result

Click Gw buat DEMO

---

Note

• onClick="geol(1);" angka 1 disitu menentukan jumlah "geol"an.
• Silahkan acak-acak i = 10; sesuai dengan selera "geol"an anda.
• Cuman ngingetin takutnya lupa, biar script load otomatis tinggal masukin aja geol(1); nya di ujung script (sebelum // End -->).