Senin, 10 Desember 2012

Blog Connect With Facebook

Karna banyaknya sahabat Galauvers tCaFc yang bertanya-tanya gimanasih cara login ke blog harus menggunakan aplikasi facebook? / kok bisa?
ya.. bisa lah,
buat CaFc 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). wCaFc
huft.... disini kita hanya berbagi shering saling menukar fikiran dari apa yang kita tidak ketahui / jadi tau
jadi gak bakalan ada yang ngotak ngatik akun kalian disini have fun lah 2CaFc

soooo..... langsung saja ke TKP (tangkap kodok pilek) 11CaFc

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

5CaFc
/*CaFc Community
----------------------------------------------- */
.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/AVvXsEjlUt0AR5nYFPo-YoodfNmO8rsP6H12Zt-mu2eJZcfs55cB70ySs7c7OwXEnBBfoC9p_ATc8XTj_H3nCFTDMIFJJHtOd_jbEcKAbawCnXMnh2L72h0L3g2cdr_TS1Kqtn_ZMH1r5SDMNVyn/s1600/LogIn-CaFc.png)}
.punk70{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlUt0AR5nYFPo-YoodfNmO8rsP6H12Zt-mu2eJZcfs55cB70ySs7c7OwXEnBBfoC9p_ATc8XTj_H3nCFTDMIFJJHtOd_jbEcKAbawCnXMnh2L72h0L3g2cdr_TS1Kqtn_ZMH1r5SDMNVyn/s1600/LogIn-CaFc.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/AVvXsEiUqIDKcHF_ZMl4Ycq4a4PCvA7mlLG1-mvIfsWnOwmmSWKe9O9wt3qrdMIAJxld2PGtOyR0ZoxNbR1M00nqq7z7ys9dKX77Q60ZlNuGqGQGoa7rm2e3O6aIerlCG62HvFNfYKzywLPVLHdP/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/AVvXsEg7H9SgSpYKmHNTDDINZ7wx_YlfTaQlcmswjH-R9CIqX9jz2hLFNngVw3D4Fh8SgNPxQiQEnXkT83J_SbewBCt3mJGemMk7qU0VYzHaSCSsGTdOPLwAHliffZ9BC5SkmBULThGzsmuB4VVa/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/AVvXsEjhlQpG0inh5JmIp78G1UzjOMQPnEDpI7eRLnSPS-ZG1Po0wW6lWiTU7dr07UXPMGYlidony2z005mjhB3KJYyhuyimgjaTgGImRIxo6XiffnpAK56qPWGpcaMIB-B2YvuDVDzWysZaFc4/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/AVvXsEjlUt0AR5nYFPo-YoodfNmO8rsP6H12Zt-mu2eJZcfs55cB70ySs7c7OwXEnBBfoC9p_ATc8XTj_H3nCFTDMIFJJHtOd_jbEcKAbawCnXMnh2L72h0L3g2cdr_TS1Kqtn_ZMH1r5SDMNVyn/s1600/LogIn-CaFc.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 di SAVE, silahkan SALIN kode dibawah ini dan letakan di ADD GATGET >>> HTML/Java Script 

5CaFc
<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 = '402639633107255';
  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://cafc-template.googlecode.com/files/notipNyaAtuBang.js" type="text/javascript"></script>

<script type="text/javascript">
notipNyaAtuBang('
402639633107255|c35N37Dos_Oi1hMrg9pB_B4inN0
',10000);
</script>

Sekarang yang perlu ubah adalah URL Gambar dan ID Aplikasi

Eitsssss ... jangan lupa ! Pastikan APP Domain benar 4CaFc ...
Kalo gak di SETTING, bakalan ancur fCaFc


Tidak ada komentar:

Posting Komentar