Cara Untuk Membut Like Box Popup Cara Untuk Membut Like Box Popup - mizipediacom mizipediacom: Cara Untuk Membut Like Box Popup

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Untuk Membut Like Box Popup

Thursday, 8 June 2017



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.
Baca Juga