Flat Popup Facebook Like untuk Blogger

Assalamualaikum Wr.Wb

KEYZEE Shared - Maaf ya,saya sudah ngga posting selama 2 hari ini,karena saya fokus sama Sekolah hehe,Di Tutorial kali ini saya akan memberikan tutorial Widget "Flat Popup Facebook Like untuk Blogger",Tentunya anda sudah tahu kegunaan dari Fanspage Facebook ini,Facebook Fanspage ini berguna untuk pengunjung untuk mendapatkan informasi / artikel terbaru dari Facebooknya mengenai Blog atau Website anda hanya dengan menekan tombol "LIKE".Facebook juga telah memperbarui tampilan dari widget tersebut,
Ohh iyaa,Kelebihan dari Widget ini,disaat loading blog akan muncul tampilan Widget Like Fanspage,yang berarti pengunjung diharuskan "LIKE" atau menekan tombol " X yang artinya keluar ",dan mungkin dengan cara ini Fanspage kita akan mendapatkan LIKES yang banyak bila di pasang pada blog kita.

Manfaat / Fungsi dari Facebook Fanspage ini adalah untuk mengumpulkan Pengunjung sebanyak-banyaknya.Dengan semakin banyaknya penggemar facebook anda,maka semakin besar pula untuk blog anda menjadi dikenal oleh orang lain dan makin besar juga anda untuk mendapatkan penghasilan atau uang.

Sebelum anda memasang Widget ini,terlebih dahulu anda harus mempunyai Facebook Fanspage,jika tidak maka widget ini tidak akan bisa terpasang di blog,cara daftar Facebook Fanspage itu bisa dibilang sangat mudah kok,Di tutorial google juga banyak yang menyediakan cara membuat Facebook Fanspage,

Ga usah basa-basi, Langsung saja yuk cara memasang Widget ini,simak dengan baik-baik ya tutorial yang saya berikan,agar dapat bisa dipasang di Blog anda :D

"Cara Pasang Flat Popup Facebook Like untuk Blogger"

1. Pergi ke Dashboard Blog (Halaman Utama Blog)
2. Pilih Blog Anda Yang Ingin Dipasangkan Widget lalu pilih -> Template -> EDIT HTML
3. Cari kode ]]></b:skin , anda bisa mencari dengan cepat kode tersebut dengan menggunakan CTRL +F 
4. Lalu jika sudah ketemu kode ]]></b:skin , Copy Script dibawah ini dan tempatkan script ini diatas kode ]]></b:skin

/*=============== CSS Popup Like Box  ======================*/
.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}

5.Lalu,cari kode </body> dan Copy Script dibawah ini dan letakkan diatas kode </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>

6.Lalu Simpan Template

Eitss belum selesai,
Kita harus memasang ini di tempat
Tata Letak -> Tambahkan Widget / Add A Gadget > HTML/JavaScript

<div id="popup-box" class="mspopup">
  <div class="mspopup-container">
      <div class="mspopup-header">
          <div class="mspopup-close" data-dismiss="mspopup">x</div>
         Jangan Lupa Like Fanspagenya Yaaa!!!
<p> Dapatkan semua pembaruan terbaru kami dari halaman facebook.</p>
      </div>
<div class="mspopup-content">
     <div class="fb-page" data-href="https://www.facebook.com/Keyzee-Shared-593250424173193.rtml" 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>

Ganti kode yang berwarna merah,dengan Url Link Nama Facebook Fanspage anda yaa!!!

Sekarang Refresh blog anda,dann Selamat Widget Flat Popup Facebook Like sudah terpasang di blog anda...
Mungkin itu saja yang bisa saya sampaikan,Mudah-mudahan artikel ini bermanfaat untuk anda sekalian,Terima kasih ya telah mengunjungi blog saya.

Wassalamualaikum Wr.Wb

Tweet