agung wisudhatama July 14, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Cara Memasang Widget Pop Up Menuju Halaman Facebook

POP UP Widget adalah sebuah halaman yang muncul ketika membuka halaman baru di blog. Dengan cara membuatkan HTML, CSS serta Javascript maka halaman Pop Up ini bisa tampil di halaman blog kita. Biasanya halaman Pop Up ini dibuat untuk akses menuju halaman Fans Page Facebook, tapi sayang halaman Fanspage sudah tidak dapat bekerja dengan normal. Dan gantinya kita menggunakan halaman utama atau halaman profil facebook kita.

Dalam penerapannya, Pop Up ini dibuat dengan menempelkan sebuah embed. Tapi kali ini kita hanya membuatkan tampilan dengan gambar saja. Jadi gambar yang disetting sedemikian rupa, sehingga ketika diklik langsung akan menuju ke halaman facebook. Trik ini secara tidak langsung tidak akan memberatkan loading blog, karena akan dimuat setelah loading halaman tampil. Sehingga untuk ringannya sudah tidak perlu dipertanyakan lagi ya teman-teman.

Untuk Pop Up bisa berupa subscribe email, pemberitahuan maintenance, pemberitahuan penerimaan order iklan, dan juga bisa contact. Terserah bisa diisi dengan contact. Tapi disini kali ini kita menggunakan alamat profil FB saja. Penerapannya mudah dan tidak memerlukan waktu lama, karena tinggal copy saja kode yang ada dibawah.

Jangan lupa teman-teman, kunjungi juga artikel Alifacode.com yang lain ya. Ini ada di Baca Juga.

Memasang Widget Pop Up Facebook dengan Vector Foto Kita

1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Klik Sesuaikan : Edit HTML ini langsung masuk ke template
4. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi.

#alifacode {
    z-index: 1000;
    position: fixed !important;
    top: 100px;
    left: 50%;
    width: 700px;
    margin-left: -350px;
}
#belakang {
    left: 0px;
    background: #000 none repeat scroll 0% 0%;
    opacity: 0.6;
    position: fixed;
    z-index: -1;
    top: 0px;
    height: 100%;
    width: 100%;
}
.tulisan {
font-size: 20px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14);
cursor: pointer;
display: inline-block;
padding: 2px 9px;
text-align: center;
font-family: arial,sans-serif;
position: absolute;
top: -15px;
right: -20px;
  collor:#344;
  return:false;
}
.isinya {
    border-radius: 3px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    width: 710px;
    height: 410px;
    border: 4px solid #FFF;
}

Terus simpan ya di template itu teman-teman kodenya. Setelah itu kita akan menuju ke postingan untuk menempelkan kode yang nanti untuk menampilkan widgetnya di postingan. Begini kodenya.

<div id='alifacode'>
<div id='belakang'></div>
<div class='tulisan' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>&#215;</a></div>
<div class='isinya'><a href='https://fb.me/alifacodecom' target='_blank'><img style="width: 700px; height: 400px;" alt='Alifacode di FB!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_2hRdTQEsysobaM_96F9wRI6rdsI0Km5cLqcWxFGickbAPLXOq25XV6gZB4-YL13yDLpRiljlRJVW62H3AFugwK6YFLrOQw6FLx3SU94LaV3ANJA-aSs8_oTi27L4c715P51afDFUjwQ7Msll0z9MfYPbOg8X9me2Rk9ljam_Taur3QFzhsDVTqis1ZU/s1600/alifacode-widget-pop-up-menuju-halaman-facebook.jpg'></a>
</div>
</div>

Selanjutnya kita taruh Javascript di template kita. Seperti ini kode Jsnya.

<script type='text/javascript'> 
//<![CDATA[
$(document).ready(function() {
$('#alifacode').click(function() {
$('#alifacode').fadeOut('500');
});
});
//]]> 
</script>

Itu kodenya punya saya dan sudah saya taruh di DEMO. Silakan lihat dulu demonya ya.

Pop Up

Sekian dulu teman-teman, semoga bermanfaat dan blog kalian bisa digunakan halaman redirect link menuju halaman Facebook profil kalian. Silakan lanjutkan pekerjaan kalian. “Janganlah pernah menyerah ketika kamu masih mampu berusaha lagi. Tidak ada kata berakhir sampai kamu berhenti mencoba.” -- “Don’t give up when you still have something to give. Nothing is really over until the moment you stop trying.”

Terkadang tantangan dalam hidup kita bisa dibilang “biasa” bila dibandingkan tantangan yang dialami oleh orang lain yang terus berusaha lebih keras dari kita menghadapi masalah yang lebih besar. Semua usaha yang kamu lakukan tidak akan sia-sia asalkan kamu tidak menyerah dan mampu menghadapinya sampai akhir. Jangan sampai berhenti berusaha karena kamu berpikir bahwa usahamu akan sia-sia. Ingat bahwa masih banyak orang-orang di luar sana yang memiliki masalah lebih berat darimu namun tidak pernah menyerah untuk menghadapinya.Salam hangat. Salam Blogger.

Bagikan ke teman-teman kamu

Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Memasang Widget Pop Up Menuju Halaman Facebook . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.