PAsang Connect Facebook Kedalam Blog

karna banyaknya sahabat Galauvers yang bertanya-tanya gimanasih cara login ke blog harus menggunakan aplikasi facebook? / ~~kok bisa~~?

ya.. bisa lah,

buat lo apasih yang gak bisa ahihihhi..

kelebihan login menggunakan aplikasi facebook; kita bisa memasang scripsi yang tdk bisa di gunakan oleh blogger lain dan agak sedikit unik(~~kata gue~~).

kekurangan login menggunakan facebook; banyak yang salah sangka atau takut akun facebooknya gak aman(~~kata dia~~).

huft.... disini kita hanya berbagi shering saling menukar fikiran dari apa yang kita tdk ketahui / jadi tau

jadi gak bakalan ada yang ngotak ngatik akun kalian disini have fun lah

soooo..... langsung saja ke TKP (~~tangkap kodok pilek~~)

letakan kode dibawah ini di atas ]]></b:skin>

/* gue-galau punya
----------------------------------------------- */
.transparent, .transparent7, .CustomSearch form.gsc-search-box, #fblike-profile{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7}
.transparent8, .transparent9{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8}
.bg-fit{-moz-background-size:100%; -webkit-background-size:100%; -goog-ms-background-size:100%; background-size:100%;}
.shadow, #gbr-pesbuk2{-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, .5); -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, .5); -goog-ms-box-shadow:1px 1px 5px rgba(0, 0, 0, .5); box-shadow: 1px 1px 5px rgba(0, 0, 0, .5)}
.shadow-header{-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .52); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .52); box-shadow: 0 0 2px rgba(0, 0, 0, .52)}
.textshadow-header, h3.post-title{text-shadow: -1px -1px 1px rgba(0, 0, 0, .2)}
.rocksalt, .grande h3{font-family:Rock Salt, Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size:14px;}
.grande, .post-body input, .post-body textarea, .post-body select{font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px;}
.schoolbell{font-family:Schoolbell,comic sans ms,lucida grande,tahoma,verdana,arial,sans-serif; font-size:13px}
.indie, h2{font-family:Indie Flower,comic sans ms,lucida grande,tahoma,verdana,arial,sans-serif}
.round3, .header-inner .HTML .widget-content a img, .post-body select, .post-body input, .post-body textarea, .profile-datablock, .Feed,.post-body{-moz-border-radius:3px; -webkit-border-radius:3px; -goog-ms-border-radius:3px; border-radius:3px}
.round7, #HTML3, .BlogArchive, .BlogList, .PopularPosts, .bunkus-coy .fb_ltr, .Followers,.post-outer{-moz-border-radius:7px; -webkit-border-radius:7px; -goog-ms-border-radius:7px; border-radius:7px}
.round-sabit{-moz-border-radius:0px 100px 0px 0px / 0px 30px 0px 0px; -webkit-border-radius:0px 100px 0px 0px / 0px 30px 0px 0px; -goog-ms-border-radius:0px 100px 0px 0px / 0px 30px 0px 0px; border-radius: 0px 100px 0px 0px / 0px 30px 0px 0px}
.punk{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZEY1FU2FWJMBEpp3MX1TOMaclnOEIZwpTB-KJ7_MHhQtPukzOiOjY8nQ-Gq_thMSt_rSzSvXfSpNhyr4pki6SDmp-PcrC3wUJjGXvMYJTRnxMlQwqr8saZcE7MKaA5Y-23EuNgTojYn4/s1600/connect+to+facebook+gue-galau.png)}
.punk70{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZEY1FU2FWJMBEpp3MX1TOMaclnOEIZwpTB-KJ7_MHhQtPukzOiOjY8nQ-Gq_thMSt_rSzSvXfSpNhyr4pki6SDmp-PcrC3wUJjGXvMYJTRnxMlQwqr8saZcE7MKaA5Y-23EuNgTojYn4/s1600/connect+to+facebook+gue-galau.png)}
.black25, #huwashir, #parahu, .BlogArchive, .BlogList, .PopularPosts, .bunkus-coy .fb_ltr, .Followers, .profile-datablock, .Feed{background-image:url(http://3.bp.blogspot.com/_bBL9ze_JZsw/TT_XA8lKqMI/AAAAAAAAAM0/uiy-BP_zbN8/s1600/black25.png)}
.black50,.post-outer{background-image:url(http://www.blogblog.com/1kt/transparent/black50.png)

-moz-border-radius: 10px 10px 10px 10px;

}
.black70{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc5NsA5JQVHKPfIYMStrrEjHcEX7rNj4rMHP4Wwz04nE7o3D67vA-vt4HzoAFyMuQHkQwEPXj26sxvqusilw0OWND21MWYCtlTXXTrdmWOCqOyxwFd2I1sdoCdbH7soNkSTRXMDXFlJKC4/s1600/black70.png)}
.white50{background-image:url(http://1.bp.blogspot.com/_bBL9ze_JZsw/TULYxvyKIUI/AAAAAAAAANE/9nrpKKLH1fE/s1600/white50.png)}
.white80{background-image:url(http://www.blogblog.com/1kt/transparent/white80.png)}
.red25{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-U-EXuEhYMfbylafm9l62A5IgFOceg0g8qo8FVoAg-ZQY3uigBlnpkL59Hf_Fnip884QAXn-YKJpp7np5bW59omGBKcIbNVyKBccORXAuJGsD2HBKebOYLrcag9J1wkvLwOHwNvZmWq8/s1600/red25.png)}
.paper70, .epbe-komen-light{background-image:url(http://www.blogblog.com/1kt/transparent/black50.png)

-moz-border-radius: 10px 10px 10px 10px;

}
.awan70{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Rh6q0TfJc6N8rkeO51lhsX9Fy7j7haoiNyV_kxEbbwzRQsTvcRYfcUOQfYvN1EkljueOyK8Jjwxle3xp13Yx8L5FjJ5Ipq1eCDFBmgyOJsoN7k06GEG7QsNo0_Gia7ekv66ez3nRzQ0/s1600/clouds-background75.png)}
.body-birds{background-image:url(http://www.blogblog.com/1kt/watermark/body_background_birds.png)}
.post-birds{background-image:url(http://www.blogblog.com/1kt/watermark/post_background_birds.png)}
.overlay-birds{background:transparent url(http://www.blogblog.com/1kt/watermark/body_overlay_birds.png) no-repeat scroll bottom left}
.kotak-kuning{background:#FFF9D7; padding:5px 10px; border:1px solid #E2C822; color:#333}
.kotak-kuning p{text-indent:30px; text-align:justify}
.klos{position:relative; z-index:5; cursor:pointer; width:15px; height:15px; margin:0px 0px 5px 5px; float:right; background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}
.klos:hover{background-position: 0px -32px;}
.klos:active, .klos:focus{background-position: 0px -48px;}
.gambar-jempol{background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yO/r/OuziOid04jS.png) no-repeat scroll -66px -280px; height:16px; width:16px; display:inline-block; vertical-align:middle}
.gambar-blogger{background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/y3/r/YPFeM0EXezc.png) no-repeat scroll -170px -91px; height:16px; width:16px; display:inline-block; vertical-align:middle}
.gambar-pesbuk{background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png) no-repeat scroll 0px -47px; display:inline-block; vertical-align:middle; height:16px; width:16px}
.tanya-tanda{display:inline-block; vertical-align:middle; cursor:pointer; width:14px; height:14px; margin:0px 5px; background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yt/r/7rpZ7CHyvX7.gif) no-repeat scroll top left;}
i.addfriend{width:15px;height:15px;display:inline-block;vertical-align:bottom;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yY/r/JAf9WA7ojO0.png) no-repeat scroll -41px -125px;}
#rep-wan div{display:inline-block; vertical-align:middle; margin:2px; line-height:11px; background:#D7D7D6; color:#444545; padding:2px; width:50px; -moz-border-radius:3px; border-radius:3px}
.blok-element{position:fixed; z-index:999; width:100%; height:100%; top:0px; left:0px; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1o0tcMG8GQt2mu8g3NIW17ycs9FQgfKyhmJwjODdNMJROyk7V3DWnUpbsrxfR181XTDM6VeFXNMfC2zlLE-lppZogem_R2FoMkhhPseDmFUp5aaDDpOjUjKnkDvThKQgsI9Zf9UXnOym/s1600/connect+to+facebook.png)no-repeat fixed top center;}
.blok-element-dalem{background:transparent none no-repeat fixed top right; position:relative; z-index:99; width:100%; height:100%; /*-moz-background-size:100%; -webkit-background-size:100%; -goog-ms-background-size:100%; background-size:100%*/}
.blok-element-dalem b.block-text-elm{position:absolute; width:auto; height:auto; right:10px; bottom:10px; display:inline-block; padding:10px 20px; background-image:url(http://www.blogblog.com/1kt/watermark/body_background_birds.png); color:black; font-size:11px}
.grupkomeng{background-color:#E1E6EE; border:1px solid #99A8C7; color:#333366; padding:4px 4px 3px; text-align:center; -moz-border-radius:3px; border-radius:3px; line-height:1.2; font-weight:normal}
.tbl-google{color:white; font-size:11px; font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; cursor:pointer}
.tbl-google i.left, .tbl-google i.right, .tbl-google b.center{background-image:url(http://www.google.com/friendconnect/scs/images/gfc_button_v2.gif); background-repeat:no-repeat; display:inline-block; width:22px; height:22px; margin:0; padding:0; vertical-align:middle}
.tbl-google i.left{background-position:top left}
.tbl-google i.right{background-position:0 -44px}
.tbl-google b.center{background-repeat:repeat-x; background-position:0 -22px; width:auto; height:16px; padding:3px}
.post-body pre, #kode{white-space:pre-wrap; word-wrap:break-word; padding:7px; cursor:text; border:1px inset black; -moz-border-radius:10px; border-radius:10px; text-align:left; overflow:auto}
.post-body pre{font-family:verdana,arial,sans-serif; color:#8093C0; margin:5px auto}
.post-body img{max-width:100%}
.post-body select, .post-body input, .post-body textarea{cursor:pointer; padding:2px; border:1px solid transparent; background-color:#3C464A; color:#EFE0AF}
.post-body input, .post-body textarea{border:1px solid #C3D3FD; background-color:#F6F7EF; color:#3C464A}
.post-body select:focus, .post-body input:focus, .post-body textarea:focus{border:1px solid #E2C822; background-color:#FFF9D7; color:#333333}
.post-body input:focus, .post-body textarea:focus{cursor:text}
.post-body p{text-align:left; font-size:12px}
.post-body center p{text-align:center}
.post-body .fl{font-size:150%;line-height:1;color:#FF00FF;text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);font-family:Dancing Script,verdana}
.post-body q{color:#E9A360}
.post-body i, .comments i{color:#70A3E9}
.post-body b, .comments b{color:green}
.post-body strong{color:#C3D3C3}
.post-body strike, .post-body del{color:#579365}
.post-body code{color:#8C8}
.post-timestamp{margin-left:0}
#Blog1_backlinks-container h4{text-align:right}

setelah itu copy kode dibawah ini dan letakan di ADD gatget >> HTML/JavaScript

<script type="text/javascript">
<!--
//jaga-jaga kalo elements gak ada..
  if(!document.getElementById('fb-root')){
    document.write('<div id="fb-root"></div>');
  }
  if(!document.getElementById('facebook-propic')){
    document.write('<img id="facebook-propic" src="" style="display:none;"/>');
  }
  if(!document.getElementById('block-login-aing')){
    document.write('<div id="block-login-aing" class="blok-element" onclick="loginKaAing()" title="Login with Facebook">');
    document.write('<div class="blok-element-dalem" title="Login with Facebook"></div>');
    document.write('</div>');
  }

//Global Variable..
  var idAplikasi = '337732132937612';
  var idUserYgLogin = '';

  var blokLoginElment = document.getElementById('block-login-aing');
  var tempatGambarPropil = document.getElementById('facebook-propic');
//-->
</script>





<script type="text/javascript">
<!--
function loadAplikasiAing(appid){
  window.fbAsyncInit = function() {
    FB.init({appId: appid, status: true, cookie: true, xfbml: true, oauth: true});
    var getLoginGagal = setTimeout("titahLoginHeula()",30000);

    FB.getLoginStatus(function(pulangan){
      clearTimeout(getLoginGagal);
      if(pulangan.authResponse && pulangan.authResponse.userID){
        idUserYgLogin = pulangan.authResponse.userID;
      }else{
        titahLoginHeula();
      }
      tulisDitelLoginAing(pulangan);
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = 'true';
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
}

function titahLoginHeula(){
  blokLoginElment.style.display='block';
}

function loginKaAing(){
  FB.login(tulisDitelLoginAing,{scope:'status_update,user_status,friends_status,read_stream,publish_stream,share_item,publish_actions'});
}

function tulisDitelLoginAing(tahMere){
  if(tahMere.authResponse){
    if(tahMere.authResponse.userID){
      idUserYgLogin = tahMere.authResponse.userID;
      tempatGambarPropil.src='http://graph.facebook.com/'+tahMere.authResponse.userID+'/picture?type=large';
    }
  }
  if(tahMere.status){
    if(tahMere.status=='connected'){
      blokLoginElment.style.display='none';

//execute scripts setelah sesi connect facebook selesai..
      nextSript();
    }
  }
}

function nextSript(){
//execute scripts setelah sesi connect facebook selesai..
  if(typeof postScript != 'undefined'){postScript()}
}

loadAplikasiAing(idAplikasi);
//-->
</script>
<script src="http://gue-galau.googlecode.com/files/Notification_gue-galau.js" type="text/javascript"></script>
<script type="text/javascript">
notipNyaAtuBang('337732132937612|bw8T7CFLxZlbk4O9Qe102LKrlsY',30000);
</script>

sekarang yang perlu rubah yaitu ID aplikasi dengan URL gambar welcome connect facebooknya

Awas Tukang Copas Mengintai :p

Galauers

PAsang Connect Facebook Kedalam Blog

1 komentar:

Followers

Populer POST

ALL POST