Cara membuat like box fanspage pop up melayang

Brodendy, setelah sekian lama akhirnya posting mulu nih ada apa gerangan saya posting, mau tau saya posting terus karena enggak ada kerjaan selain gini ya namanya juga anak SMK yang nunggu hasil pengumuman kalo di rumah abis pulang kerja sambilan bingung mau ngapain ya posting aja ya.

Oke kali ini saya sendiri akan membagikan tutorial buat para blogger yaitu Cara membuat like box fanspage pop up melayang sebenarnya tutorial ini saya temukan dan sudah di bahas oleh blogger luar negeri, dengan desain yang menarik flat dan enteng dapat membuat orang ingin menggunakanya , oke langsung saja tanpa basa basi kita akan bahas tutorial atau caranya dan ini tampilanya

Tampilan Yang flat dan caranya juga cukup mudah ini akan membantu anda memiliki like box fanspage yang melayang atau popup, cara kerjanya cukup mudah sobat bro ketika seorang visitor mengunjungi situs sobat pas udah pasang kode ini, otomatis likebox fanspage ini akan melayang dan memungkinkan ini menjadi pusat perhatian pertama visitor lalu coba melike fanspage blogger, keren bukan.

Langkah Pertama

Pergi Ke Blogger > Blogger Dashboard > Template > Edit HTML dan tempelkan kode CSS di bawah ini di bawah <style> atau di atas </style>

/*=============== CSS Popup Like box fanspage ======================*/
.mspopup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90000;background:rgba(0,0,0,.6);overflow-x:hidden;overflow-y:auto;display:none}
.mspopup-container{background:#fff url(http://i.imgur.com/2twQjiN.gif) no-repeat 50% 50%;padding:0;font-size:14px;height:236px;position:fixed;top:50%;left:50%;z-index:90001;-webkit-box-shadow:0 0 15px 0 rgba(50,50,50,0.8);transform:translateY(-50%) translateX(-50%)}
.mspopup .mspopup-close{position:absolute;top:9px;right:20px;font-weight:700;font-family:Verdana;font-size:18px;cursor:pointer;color:#fff}
.mspopup .mspopup-close:hover{color:#535353}
.mspopup .mspopup-header{font-size:20px;padding:10px;text-align:center;color:#fff;font-family:Open Sans;background-color:#3B5998;text-shadow:1px 2px 4px #838383}
.mspopup .mspopup-header p{font-size:10px;padding:0;margin:0;font-weight:400;text-transform:initial}
.mspopup .mspopup-content{padding:10px 20px}

Langkah Kedua

Copy pastekan Kode Javascript ini tepat di atas </body>

<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/mspopup.js' type='text/javascript'/>
<script type='text/javascript'>
  $(&#39;#popup-box&#39;).mspopup({
  &#39;autoOpen&#39;: true
});
        </script>

Langkah Selanjutnya

Pergi Ke Layout Pada Blogger > Add widget > HTML/Javascript dan Copy Lalu pastekan kode di bawah ini di kolom HTML/Javascript tersebut

<div id="popup-box" class="mspopup">
  <div class="mspopup-container">
      <div class="mspopup-header">
          <div class="mspopup-close" data-dismiss="mspopup">x</div>
         Like us and Join with our community
<p> Get our all latest update from our facebook page, Its free and speedy</p>
      </div>
<div class="mspopup-content">
     <div class="fb-page" data-href="https://www.facebook.com/Brodendy-1759548934374307" data-width="400" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div>
      </div>
  </div>
</div>

Notice/Catatan : Ubah Brodendy-1759548934374307 dengan id/link fanspage kamu

Sekian tutorial dari saya semoga bermanfaat dan berguna bagi anda semua sudah membaca tutorial Cara membuat like box fanspage pop up melayang dan terimkasih juga atas waktu 5 menit dan mau belajar tutorial ini.