Cara Untuk Membut Like Box Popup




Cara Untuk Membut Like Box Popup
Cara Untuk MembuLike Box Popup

Pada kali ini ini saya  akan berbagi Cara Untuk MembuLike Box Popup, jika anda sudah membuat blog dan telah mengisikan berbagai macam judul artikel, dana di wajibkan kita untuk mempromosikan artikel milik kita, jika tidak melakukan promosi dipastikan blog milik kita akan kesepian, Meskipun blog anda mempunyai kualitas sebagus apapun postingan yang kita buat, tanpa kita promosi akan sepi pembaca juga. kecuali anda mahir dalam SEO untuk membuat artikel anda pada peringkat halaman utama.

Jika anda ingin membuatnya secara manual maka klik aja Fans Page Facebook, fans page facebook ini memiliki tampilannya berbentuk box yang didalamnya memuat Nama Halaman, Foto Halaman, Tombol Like, Jumlah Likers, dan juga foto Likers.

Namun disini saya bukan menjelaskan untuk membuat nya secara manual dan menjelaskan cara pendaftarannya, tetapi penjelasanya mengenai cara penerapan  widget fans page ini, karena kode facebook box nya sudah di sediakan dan sudah di modifikasi javascript onscroll tersebut untuk agar bisa dapat membuat popup widget facebook like box atau facebook page plugin.

Dan popup ini juga sudah dilengkapi dengan tombol close dengan cookie, pada saat pengunjung menekan tombol "Don't Show Again" maka widget tidak akan muncul selama belum menghapus cookie browser, untuk mencobanya agar muncul halaman di scrool ke bawah, maka popup facebook like box  pun akan muncul dengan tombol close. 

Untuk anda ingin membuat nya silahkan ikuti langkah-langkah di bwah ini, ohya untuk demonya bisa anda klik DISINI

# Cara Untuk Membut Like Box Popup

  1. Seperti biasa pastikan anda sudah masuk di dasbhor anda sendiri
  2. Anda masuk pada bagian Editor Template 
  3. Caranya pilih Menu Template ==> Edit HTML.
  4. Lalu silahkan anda copas  kode CSS di bawah ini  letakan di atas kode </head>
    <style>
    /*<![CDATA[*/
    .close-fbbox,.close-fbcookie{background:#fff;transition:all .4s ease-in-out;color:#555;cursor:pointer}
    .fbbox-wrapper{width:360px;position:fixed;left:50%;margin-left:-180px;top:50%;margin-top:-131px;height:auto;background-color:#fff;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);box-shadow:0 10px 50px 0 rgba(0,0,0,.25);padding:10px;border:1px solid #dedede;border-radius:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:1000000}
    .close-fbbox{position:absolute;top:-15px;right:-15px;font-family:Arial;font-size:24px;font-weight:700;width:25px;height:25px;line-height:25px;text-align:center;border:1px solid #dedede;border-radius:100%}
    .close-fbcookie{padding:1px 5px;border:1px solid #dedede;border-radius:2px;font:11px Arial;display:inline;float:left;line-height:1}
    .close-fbcookie span{font-size:18px;font-weight:700;vertical-align:middle}
    .close-fbbox:hover,.close-fbcookie:hover{background:#ddd;border:1px solid #ccc}
    #fbOnscroll .layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.7);z-index:999999}
    .zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
    @-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
    60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
    }
    @keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
    60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
    }
    .fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
    @-webkit-keyframes fadeIn{0%{opacity:0}
    100%{opacity:1}
    }
    @keyframes fadeIn{0%{opacity:0}
    100%{opacity:1}
    }
    /*]]>*/
    </style>
    
  5. Selanjutnya anda silahkan copas lgi kode ini letakan di atas kode </body>
    <script>
    //<![CDATA[
      var appended = false,
      bookmark = document.createElement("div");
      bookmark.id = "fbOnscroll";
      bookmark.innerHTML = '<div class="fbbox-wrapper zoomInUp">\
      <iframe name="f13bea94f064144" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&amp;app_id=113869198637480&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FuN4_cXtJDGb.js%3Fversion%3D42%23cb%3Df19b772d4d20444%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff1ba7fe51c4d354%26relation%3Dparent.parent&amp;container_width=613&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fmizicuwey/&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>\
    <div class="close-fbcookie" onclick="hidesubscribebox()"><span>&#215;</span> Don\'t Show Again</div>\
    <div class="close-fbbox" onclick="hidesubscribe()">&#215;</div>\
                  </div>\
                  <div class="layer fadeIn"></div>\
    ';
    function hidesubscribe(){document.getElementById("fbOnscroll").style.display="none"}function hidesubscribebox(){document.getElementById("fbOnscroll").style.display="none",createCookie("hideDialog","hide",7000)}function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("fbOnscroll").style.display="none"))};
    //]]>
    </script>
  6. Jika sudah maka anda bisa klik Save Template, dan lihat hasilnya.
Note: Anda bisa menggantikan kode mizicuwey/ dengan username fans page facebook blog  milik Anda, ubah angka 7000 untuk lamanya cookie dan 800 untuk tinggi kemunculan kotak ketika di-scroll.

Demikian penjelasan saya pada hari ini, selamat mencoba dan bisa bermanfaat untuk anda, jika ada yang kurang jelas bisa anda tanyakan melalui tombol komentar di bawah ini, thanks.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect