Header Ads

  • Widget Fanspage Facebook Melayang Di Blogger



    Cara membuat dan memasang fanspage facebook dengan tampilan melayang (float) responsive ditengah layar monitor browser PC atau Mobile pengunjung ketika pertama kali halaman blog selesai di load. Widget fanspage facebook ini akan terlihat fokus dan mengarahkan pengunjung agar bisa mendapatkan like atau hanya sekedar subscribe halaman fanspage facebook kamu.

    Halaman fanspage facebook secara ekspilisit hampir sama penggunaannya dengan halaman website/blog, dibutuhkan pengunjung atau pengguna facebook lainnya agar halaman fanspage facebook yang kita buat bisa maksimal dan menghasilkan.

    Salah satu cara memaksimalkan fitur fanspage facebook agar bisa memiliki kesempatan untuk menambah subscriber dengan cara menampilkannya sebagai widget notifikasi melayang pada tengah halaman di dalam website/blog kita. Widget ini akan mempermudah pengunjung untuk menekan tombol Like secara sukarela.

    Ada banyak cara untuk menampilkan widget fanspage facebook di halaman website/blog. Metode yang sering digunakan adalah dengan cara menggunakan kotak (box) notifikasi melayang ditengah layar monitor pc atau mobile. Metode tampilan tengah layar ini terbukti efektif dalam menjangkau perhatian pengunjung blog untuk bisa fokus pada bidang obyek yang ditampilkan.

    Trik tampilan notifikasi melayang di tengah layar monitor banyak digunakan untuk berbagai macam widget, yaitu untuk menampilkan widget fanspage facebook, widget twitter timeline, guestbook, chat box dan promosi produk atau jasa.

    Contoh box notifikasi melayang seperti yang terlihat pada saat halaman ini ketika selesai di render, akan muncul kotak widget fanspage facebook di tengah layar monitor pc atau mobile kalian. Tekan tombol CLOSE yang berada di pojok kanan atas widget untuk menutup box notifikasi widget.

    Berdasarkan hasil pengamatan pribadi cara ini sangat bagus untuk menaikkan pengunjung karena dari 100 orang yang mengunjungi blog kita kemungkinan pengunjung yang menuju halaman fanspage facebook kita berkisar 10% akan mengunjungi dan 5% akan me-like halaman fanspage kita. Sedikit saran pastikan halaman fanspage facebook kamu sudah memiliki informasi yang menarik agar pengunjung mau me-like fanspage facebook kamu.


    Informasi Singkat

    Facebook adalah media sosial online Amerika dan layanan jejaring sosial yang dimiliki oleh Meta Platforms. Didirikan pada tahun 2004 oleh Mark Zuckerberg dengan sesama mahasiswa Harvard College dan teman sekamar Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, dan Chris Hughes, namanya berasal dari direktori buku wajah yang sering diberikan kepada mahasiswa Amerika. Keanggotaan awalnya terbatas pada mahasiswa Harvard, secara bertahap berkembang ke universitas Amerika Utara lainnya dan, sejak 2006, siapa pun yang berusia di atas 13 tahun. Pada tahun 2020, Facebook mengklaim 2,8 miliar pengguna aktif bulanan, dan menempati peringkat ketujuh dalam penggunaan internet global. Itu adalah aplikasi seluler yang paling banyak diunduh pada tahun 2010-an.

    Facebook dapat diakses dari perangkat dengan konektivitas Internet, seperti komputer pribadi, tablet, dan smartphone. Setelah mendaftar, pengguna dapat membuat profil yang mengungkapkan informasi tentang diri mereka sendiri. Mereka dapat memposting teks, foto, dan multimedia yang dibagikan dengan pengguna lain yang telah setuju untuk menjadi "teman" mereka atau, dengan pengaturan privasi yang berbeda, secara publik. Pengguna juga dapat berkomunikasi langsung satu sama lain dengan Facebook Messenger, bergabung dengan grup dengan minat yang sama, dan menerima pemberitahuan tentang aktivitas teman Facebook mereka dan halaman yang mereka ikuti.

    Subjek dari banyak kontroversi, Facebook sering dikritik atas isu-isu seperti privasi pengguna (seperti dengan skandal data Cambridge Analytica), manipulasi politik (seperti pemilihan AS 2016), pengawasan massal, efek psikologis seperti kecanduan dan harga diri rendah, dan konten seperti berita palsu, teori konspirasi, pelanggaran hak cipta, dan ujaran kebencian. Para komentator menuduh Facebook dengan sukarela memfasilitasi penyebaran konten semacam itu, serta melebih-lebihkan jumlah penggunanya untuk menarik pengiklan.


    Sumber : Wikipedia



    DAFTAR ISI
    1. Fanspage Facebook
      1. 1 Apa itu Fanspage Facebook ?
      2. 2 Manfaat Fanspage Untuk Bisnis
      3. 3 Kelebihan Fanspage Facebook
    2. Cara Pemasangan Fanspage Facebook Melayang
      1. 1 Kelebihan Penggunaan Widget Fanspage Facebook Melayang Codeflare
      2. 2 Cara Pemasangan Plugin Script JQuery
      3. 3 Cara Pemasangan Widget Fanspage Facebook Melayang
        1. 3. 1 Cara Pemasangan Pada Blog
        2. 3. 2 Keterangan Parameter Variabel
    3. Penggunaan Fitur Parameter Variabel AfterEffect
      1. 1 Nilai Varabel afterEffect [0]
      2. 2 Nilai Varabel afterEffect [1]
      3. 3 Nilai Varabel afterEffect [2]
      4. 4 Nilai Varabel afterEffect [3]
      5. 5 Nilai Varabel afterEffect [4]

    #1 Fanspage Facebook

    Fasilitas fanspage pada facebook banyak memberikan manfaat kepada penggunanya baik untuk penggunaan pribadi maupun untuk penggunaan komunitas hingga koorporat. Fanspaga facebook dibuat sebagai halaman khusus yang bisa menyebarkan informasi dengan jangkauan luas dan cepat.

    1.1 Apa itu Fanspage Facebook ?

    Fanspage Facebook adalah sebuah fitur tambahan yang ada pada layanan sosial media Facebook yang menyajikan informasi mengenai sebuah bisnis, profil, komunitas, brand (merk dagang) dan lain sebagainya. Fitur ini bebas digunakan untuk kebutuhan berbagai promosi atau informasi kedalam bentuk digital marketing yang bisa terjangkau secara global.

    Berbeda dengan facebook personal yang sering digunakan untuk sekedar berbagi informasi tentang keseharian atau memberikan opini pribadi secara acak, konten dalam Fanspage cenderung lebih tertata dan informatif.

    Mulai dari pengguna pribadi hingga koorporat perusahaan akan menggunakan halaman fanspage untuk mengelola konten mereka secara terarah. Mulai dari edukasi customer, konten menarik dan informatif untuk keperluan bisnis yang lebih baik serta promosi untuk meningkatkan penjualan produk dan jasa.

    1.2 Manfaat Fanspage Untuk Bisnis

    Seperti yang kita ketahui perkembangan teknologi dunia sangat cepat yang menyebabkan perubahan drastis terhadap pola bisnis dan perdagangan. Berkat akses internet yang mudah dan cepat arus informasi global dapat diakses 24 jam non stop. Hampir setiap saat halaman facebook diakses oleh jutaan pengguna diseluruh dunia. Oleh sebab itu penggunaan facebook sangat cocok dalam menunjang aktifitas bisnis.

    Halaman fanspage facebook dapat diakses dalam skala global sehingga memiliki banyak manfaat jika diimplementasikan secara terarah sebagai penunjang aktifitas bisnis. Berikut beberapa manfaat penggunaan fanspage facebook untuk bisnis.

    1. Pengguna facebook yang banyak dan dapat diakses secara global sehingga memberikan peluang yang lebih baik untuk memperoleh pelanggan dari seluruh dunia.

    2. Menghemat biaya operasional promosi digital karena tidak perlu memiliki server yang mahal.

    3. Informasi tentang produk dan jasa bisa lebih cepat dan uptodate serta bisa mendapatkan feedback produk secara langsung dan cepat.

    4. Produk atau jasa yang ditawarkan bisa terjual dengan cepat.

    1.3 Kelebihan Fanspage Facebook

    1. Konten Bisnis dan Personal Terpisah
      Fanspage membuat sebuah bisnis menjadi lebih profesional. Hal ini karena konten fanpage dibuat lebih terarah dan tertata. Tidak ada curhat random, foto sedang momong anak, atau konten pribadi lainnya.

      Dengan konten yang tertata ini lah fanspage akan menjangkau penggemar dengan lebih meyakinkan. Kita akan terlihat spesialisnya jualan ini atau ahli dalam bidang itu.

    2. Profesional dan Terpercaya
      Persis seperti penjelasan di poin sebelumnya. Dengan konten yang terpisah dan terarah, sebuah bisnis di Facebook akan terlihat lebih profesional dan terpercaya. Bukan abal- abal.

      Dengan profesionalitas ini, kepercayaan orang- orang dalam membeli produk Anda akan meningkat.

    3. Feedback dan Kontak dari Konsumen
      Penggemar bisa leluasa menghubungi Anda untuk menanyakan produk lewat kolom komentar atau messenger. Saat feedback yang mereka berikan positif, dampak psikologis ini bisa mengena ke penggemar yang lainnya.

      Selain itu, karena kemudahan untuk menghubungi lewat komentar atau messenger, peluang terjadi penjualan menjadi lebih mudah dari sekedar facebook personal.

    4. Terindeks Search Engine
      Konten dari fanpage akan terindeks dengan lebih baik oleh mesin pencari karena dinilai lebih terpercaya dan memberikan informasi yang berkualitas. Konten dengan engagement baik juga akan mempunyai bobot yang lebih baik.

    5. Viral Marketing
      Fanspage bisa menjadi media untuk campaign viral marketing. Dengan konsep giveaway, Anda bisa mendorong peningkatan jumlah penggemar di fanpage dan mengoptimalkan penjualan.

    #2 Cara Pemasangan Widget Pada Blogger

    Cara menampilkan kotak (box) notifikasi melayang tengah layar dibuat dengan menggunakan tiga komponen kode, yaitu kode JavaScript untuk mengolah logic dan timer, kemudian kode HTML yang digunakan sebagai kode dasar dan yang terakhir adalah penggunaan kode CSS untuk menampilkan tampilan yang manis dan dinamis.

    2.1 Kelebihan Widget Fanspage Facebook Melayang Codeflare

    Widget fanspage facebook melayang besutan Codeflare memiliki segudang fitur dan manfaat. Berikut beberapa kelebihan script widget fanspage facebook melayang codeflare.

    1. Sudah menggunakan plugin JQuery dan plugin FontAwesome sehingga widget fanspage facebook lebih uptodate dan bisa ditampilkan di semua browser modern PC dan mobile.
    2. Memiliki tampilan auto responsive sehingga bisa ditampilkan pada browser mobile tanpa masalah.
    3. Mudah untuk dikonfigurasi agar bisa diimplementasikan pada platform website atau blog.
    4. Memiliki tampilan unik, keren dan menarik serta cocok dengan berbagai tema template blog yang kamu gunakan.
    5. Memiliki otomatisasi kode widget sehingga kamu cukup memasukan nama pengguna dan widget langsung siap beraksi.
    6. Menggunakan fitur kode session storage sehingga tampilan widget hanya ditampilkan sekali selama pengunjung berada pada tab browser dan belum menutup halaman website atau blog kamu. Jika pengunjung menutup kemudian dilain waktu kembali mengunjungi maka widget akan ditampilkan kembali.

    2.2 Cara Pemasangan Plugin Script JQuery

    Kode widget untuk kotak (box) notifikasi melayang menggunakan dua plugin script tambahan yaitu script jQuery dan Fontawesome v4.7, pastikan kamu sudah memasang kedua plugin tersebut agar widget fanspage facebook ini bisa berjalan dengan semestinya.

    Perhatian !!!
    Jika belum ada plugin script jQuery dan Fontawesome pada template blog yang kamu gunakan maka silakan kamu pasang terlebih dahulu kedalam template blog kamu. Cara pemasangan kedua plugin tersebut adalah sebagai berikut. Pasang kode script plugin yang ada di bawah ini kemudian letakan kedalam kode HTML template blog pada bagian di atas kode <Head>.

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

    cara pasang plugin script jquery

    Jika kode diatas sudah ada pada template blog kamu maka kode di atas tidak perlu dipasang, cukup menggunakan plugin script jquery dan fontawesome masing-masing satu saja agar plugin tersebut tidak tertumpuk satu sama lainnya. Oke selanjutnya adalah pemasangan untuk kode widget notifikasi melayang dan fanspage facebook.

    2.3 Cara Pemasangan Widget Fanspage Facebook Melayang

    Bagi pengguna blogspot pemasangan widget fanspage facebook bisa dipasang kedalam kode template blog atau bisa juga dipasang di dalam kotak widget blogger dengan menekan tombol Add to Blogger yang ada di bawah.

    • Silakan login dahulu ke blog kamu.

    • Klik tombol Tema untuk masuk ke tema editor.


    • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


    • Geser scrollbar ke posisi paling bawah.


    • Letakan kode dibawah ini tepat diatas kode </body>.


      <!-- Start fanspage facebook floating box by codeflare.net -->
      <div id='fbox-widget'>Loading...</div>
      <script type='text/javascript'>
      /*--- PARAMETER SETTING ---*/
      /*Use number in second to activate timer or set empty*/
      var useTimer = '';
      /*Facebook FansPage Name or Facebook User Name*/
      var fbUserName = 'codeflarepage';
      /*Facebook Application ID or set empty if you not use it*/
      var fbAppId = '';
      /*Use width in pixel or set empty for default value*/
      var fbWidth = '300';
      /*Use height in pixel or set empty for default value*/
      var fbHeight = '350';
      /*Enable click body page to close widget*/
      var bodyClose = false;
      /*Use 0,1,2,3 only value*/
      var afterEffect = '0';
      </script>
      <style type="text/css">
      /* --- COLOR SETTING --- */
      #fbox-widget{background:rgba(0,0,0,0.8);}
      #fbox-display{background:#eaeaea;border-color:#828282;}
      #fbox-button{background:rgba(0,0,0,0.4);color:#aaa;}
      #fbox-button:hover{background:#eb8301;color:#fff;}
      #fbox-link a{color:#fff;}
      #fbox-link a:hover{color:#0083da;}
      #fbox-link{background:rgba(0,0,0,.4);}
      #fbox-link:hover{background:#333;}
      #fbox-link:hover > a{color:#eb8301;}
      </style>
      <!-- codeflare.blogspot.com || codeflare.net || codeflare.eu.org -->
      <style>
      #fbox-widget{position:fixed;width:100vw;height:100vh;top:0;left:0;z-index:99999;display:none;}
      #fbox-close{width:100%;height:100%}#fbox-display{position:absolute;border-width:5px;border-style:solid;border-radius:5px;display:none;}
      #fbox-button{position:absolute;right:0;top:0;float:right;cursor:pointer;padding:5px 8px;border-radius:0 0 0 5px;font-weight:700;font-size:12px;}
      #fbox-link{position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box;transition:.5s ease;cursor:pointer;user-select:none;text-align:center;padding:5px;display:none;}
      #fbox-link a{text-decoration:none;font-size:12px;}
      #fbox-display:hover > #fbox-button, #fbox-display:hover > #fbox-link {display:block;}
      </style>
      <script type='text/javascript'>
      //<![CDATA[
      var _0xa6a2=["\x66\x61\x73\x74","\x66\x61\x64\x65\x4F\x75\x74","\x23\x66\x62\x6F\x78\x2D\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64","\x70\x72\x6F\x6D\x6F\x53\x65\x73\x73\x69\x6F\x6E","\x67\x65\x74\x49\x74\x65\x6D","\x6C\x6F\x61\x64","","\x33\x30\x30","\x33\x35\x30","\x26\x61\x70\x70\x49\x64\x3D","\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68","\x69\x6E\x6E\x65\x72\x48\x65\x69\x67\x68\x74","\x3C\x69\x66\x72\x61\x6D\x65\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x2F\x70\x6C\x75\x67\x69\x6E\x73\x2F\x70\x61\x67\x65\x2E\x70\x68\x70\x3F\x68\x72\x65\x66\x3D\x68\x74\x74\x70\x73\x25\x33\x41\x25\x32\x46\x25\x32\x46\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x25\x32\x46","\x25\x32\x46\x26\x74\x61\x62\x73\x3D\x74\x69\x6D\x65\x6C\x69\x6E\x65\x26\x77\x69\x64\x74\x68\x3D","\x26\x68\x65\x69\x67\x68\x74\x3D","\x26\x73\x6D\x61\x6C\x6C\x5F\x68\x65\x61\x64\x65\x72\x3D\x74\x72\x75\x65\x26\x61\x64\x61\x70\x74\x5F\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72\x5F\x77\x69\x64\x74\x68\x3D\x74\x72\x75\x65\x26\x68\x69\x64\x65\x5F\x63\x6F\x76\x65\x72\x3D\x66\x61\x6C\x73\x65\x26\x73\x68\x6F\x77\x5F\x66\x61\x63\x65\x70\x69\x6C\x65\x3D\x74\x72\x75\x65","\x22\x20\x77\x69\x64\x74\x68\x3D\x22","\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22","\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x62\x6F\x72\x64\x65\x72\x3A\x6E\x6F\x6E\x65\x3B\x6F\x76\x65\x72\x66\x6C\x6F\x77\x3A\x68\x69\x64\x64\x65\x6E\x22\x20\x73\x63\x72\x6F\x6C\x6C\x69\x6E\x67\x3D\x22\x6E\x6F\x22\x20\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x61\x6C\x6C\x6F\x77\x66\x75\x6C\x6C\x73\x63\x72\x65\x65\x6E\x3D\x22\x74\x72\x75\x65\x22\x20\x61\x6C\x6C\x6F\x77\x3D\x22\x61\x75\x74\x6F\x70\x6C\x61\x79\x3B\x20\x63\x6C\x69\x70\x62\x6F\x61\x72\x64\x2D\x77\x72\x69\x74\x65\x3B\x20\x65\x6E\x63\x72\x79\x70\x74\x65\x64\x2D\x6D\x65\x64\x69\x61\x3B\x20\x70\x69\x63\x74\x75\x72\x65\x2D\x69\x6E\x2D\x70\x69\x63\x74\x75\x72\x65\x3B\x20\x77\x65\x62\x2D\x73\x68\x61\x72\x65\x22\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E","\x6C\x65\x6E\x67\x74\x68","\x23\x66\x62\x6F\x78\x2D\x77\x69\x64\x67\x65\x74\x20\x69\x66\x72\x61\x6D\x65","\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x66\x62\x6F\x78\x2D\x63\x6C\x6F\x73\x65\x22\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x66\x62\x6F\x78\x2D\x64\x69\x73\x70\x6C\x61\x79\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x77\x69\x64\x74\x68\x3A","\x70\x78\x3B\x68\x65\x69\x67\x68\x74\x3A","\x70\x78\x3B\x74\x6F\x70\x3A","\x70\x78\x3B\x6C\x65\x66\x74\x3A","\x70\x78\x3B\x22\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x66\x62\x6F\x78\x2D\x62\x75\x74\x74\x6F\x6E\x22\x3E\x43\x4C\x4F\x53\x45\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x66\x62\x6F\x78\x2D\x6C\x69\x6E\x6B\x22\x3E\x3C\x61\x3E","\x68\x6F\x73\x74\x6E\x61\x6D\x65","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x68\x74\x6D\x6C","\x23\x66\x62\x6F\x78\x2D\x77\x69\x64\x67\x65\x74","\x77\x69\x64\x74\x68","\x77\x69\x64\x74\x68\x3D","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x68\x65\x69\x67\x68\x74","\x68\x65\x69\x67\x68\x74\x3D","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x31\x32\x70\x78\x3B\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3A\x68\x69\x64\x64\x65\x6E\x3B\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x6F\x64\x65\x66\x6C\x61\x72\x65\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x32\x30\x32\x32\x2F\x30\x32\x2F\x77\x69\x64\x67\x65\x74\x2D\x66\x61\x6E\x73\x70\x61\x67\x65\x2D\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2D\x6D\x65\x6C\x61\x79\x61\x6E\x67\x2D\x64\x69\x2D\x62\x6C\x6F\x67\x67\x65\x72\x2E\x68\x74\x6D\x6C\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x77\x69\x64\x67\x65\x74\x20\x66\x61\x6E\x73\x70\x61\x67\x65\x20\x66\x61\x63\x65\x62\x6F\x6F\x6B\x20\x6D\x65\x6C\x61\x79\x61\x6E\x67\x22\x3E\x77\x69\x64\x67\x65\x74\x20\x66\x61\x6E\x73\x70\x61\x67\x65\x20\x66\x61\x63\x65\x62\x6F\x6F\x6B\x20\x6D\x65\x6C\x61\x79\x61\x6E\x67\x3C\x2F\x61\x3E\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x6F\x64\x65\x66\x6C\x61\x72\x65\x2E\x6E\x65\x74\x22\x3E\x63\x6F\x64\x65\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x6C\x6F\x67\x67\x65\x72\x2E\x67\x6F\x6F\x67\x6C\x65\x75\x73\x65\x72\x63\x6F\x6E\x74\x65\x6E\x74\x2E\x63\x6F\x6D\x2F\x69\x6D\x67\x2F\x61\x2F\x41\x56\x76\x58\x73\x45\x68\x46\x69\x69\x4F\x68\x32\x66\x65\x54\x77\x31\x58\x74\x6C\x42\x6C\x4B\x64\x43\x41\x76\x2D\x76\x33\x30\x4E\x79\x74\x5F\x30\x39\x6B\x49\x37\x76\x47\x61\x39\x70\x65\x30\x79\x2D\x36\x34\x4C\x66\x34\x53\x4D\x42\x41\x73\x44\x72\x31\x5A\x4E\x33\x6C\x45\x61\x4B\x4B\x31\x71\x64\x4B\x4E\x59\x68\x4E\x5A\x31\x52\x42\x2D\x54\x72\x57\x54\x53\x4C\x32\x46\x39\x35\x50\x43\x50\x78\x72\x42\x48\x5F\x4E\x6C\x65\x4D\x73\x76\x50\x31\x7A\x7A\x47\x63\x7A\x33\x34\x65\x31\x43\x72\x64\x76\x41\x58\x39\x6E\x66\x45\x30\x5A\x37\x6C\x76\x4E\x6E\x68\x69\x33\x47\x6A\x41\x39\x53\x31\x61\x39\x75\x73\x44\x37\x67\x77\x58\x6B\x56\x70\x4B\x34\x6F\x62\x53\x49\x38\x6B\x53\x75\x33\x35\x63\x38\x73\x63\x47\x6D\x4A\x5A\x30\x78\x58\x34\x4E\x79\x47\x37\x59\x33\x55\x4F\x4F\x5A\x73\x6E\x67\x22\x2F\x3E\x66\x6C\x61\x72\x65\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x61\x70\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E","\x64\x65\x6C\x61\x79","\x23\x66\x62\x6F\x78\x2D\x64\x69\x73\x70\x6C\x61\x79","\x6D\x65\x64\x69\x75\x6D","\x66\x61\x64\x65\x49\x6E","\x45\x72\x72\x6F\x72\x20\x69\x6E\x20\x75\x73\x65\x54\x69\x6D\x65\x72\x20\x76\x61\x72\x69\x61\x62\x65\x6C\x20\x21\x20\x50\x6C\x65\x61\x73\x65\x20\x75\x73\x65\x20\x6E\x75\x6D\x62\x65\x72\x20\x66\x6F\x72\x20\x69\x6E\x70\x75\x74","\x63\x6C\x69\x63\x6B","\x23\x66\x62\x6F\x78\x2D\x63\x6C\x6F\x73\x65","\x23\x66\x62\x6F\x78\x2D\x62\x75\x74\x74\x6F\x6E","\x73\x65\x74\x49\x74\x65\x6D","\x23\x33\x33\x33","\x62\x6C\x6F\x63\x6B","\x63\x73\x73","\x23\x66\x62\x6F\x78\x2D\x6C\x69\x6E\x6B","\x68\x69\x64\x65","\x62\x69\x6E\x64","\x73\x6C\x69\x64\x65\x55\x70","\x30","\x72\x65\x6D\x6F\x76\x65","\x31","\x23\x63\x66\x6C\x46\x42\x57\x69\x64\x67\x65\x74","\x61\x70\x70\x65\x6E\x64\x54\x6F","\x23\x66\x62\x6F\x78\x2D\x62\x75\x74\x74\x6F\x6E\x2C\x23\x66\x62\x6F\x78\x2D\x6C\x69\x6E\x6B","\x73\x74\x79\x6C\x65","\x72\x65\x6D\x6F\x76\x65\x41\x74\x74\x72","\x72\x65\x6C\x61\x74\x69\x76\x65","\x70\x78","\x69\x6E\x6C\x69\x6E\x65\x2D\x62\x6C\x6F\x63\x6B","\x61\x6E\x69\x6D\x61\x74\x65","\x32","\x33","\x34","\x23\x66\x62\x6F\x78\x2D\x64\x69\x73\x70\x6C\x61\x79\x2C\x23\x63\x66\x6C\x46\x42\x49\x63\x6F\x6E","\x73\x68\x6F\x77","\x23\x66\x62\x6F\x78\x2D\x64\x69\x73\x70\x6C\x61\x79\x2C\x23\x66\x62\x6F\x78\x2D\x62\x75\x74\x74\x6F\x6E","\x6F\x66\x66","\x6F\x6E\x63\x6C\x69\x63\x6B","\x75\x6E\x62\x69\x6E\x64","\x23\x66\x62\x6F\x78\x2D\x6C\x69\x6E\x6B\x20\x61","\x6D\x61\x74\x63\x68","\x6C\x65\x66\x74","\x23\x63\x66\x6C\x46\x42\x49\x63\x6F\x6E","\x66\x69\x78\x65\x64","\x2D","\x2B\x3D","\x2D\x3D","\x72\x69\x67\x68\x74","\x2B\x39\x39\x39\x39\x39\x39\x39","\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79","\x68\x69\x64\x64\x65\x6E","\x76\x69\x73\x69\x62\x6C\x65","\x77\x61\x69\x74\x20\x30","\x20\x28\x73\x29","\x77\x61\x69\x74\x20","\x74\x65\x73\x74"];var promoBoxshow,promoBoxshow,bgGTPrWidth,lebar,tinggi;var promoBoxstart=useTimer;function closeBoxPromo(){clearInterval(promoBoxshow);promoBoxstart= 0;$(_0xa6a2[2])[_0xa6a2[1]](_0xa6a2[0])}var promoSession=sessionStorage[_0xa6a2[4]](_0xa6a2[3]);if(promoSession=== null){$(window)[_0xa6a2[56]](_0xa6a2[5],function(){setTimeout(function(){if(fbWidth== _0xa6a2[6]|| fbWidth== null|| fbWidth< 300){fbWidth= _0xa6a2[7]};if(fbHeight== _0xa6a2[6]|| fbHeight== null|| fbHeight< 350){fbHeight= _0xa6a2[8]};if(fbAppId== _0xa6a2[6]|| fbAppId== null){var _0xae54x8=fbAppId}else {var _0xae54x8=_0xa6a2[9]+ fbAppId};if(fbWidth> $(window)[_0xa6a2[10]]()){fbWidth= $(window)[_0xa6a2[10]]()- 30};if(fbHeight> $(window)[_0xa6a2[11]]()){fbHeight= $(window)[_0xa6a2[11]]()- 30};lebar= fbWidth;tinggi= fbHeight;var _0xae54x9=_0xa6a2[12]+ fbUserName+ _0xa6a2[13]+ lebar+ _0xa6a2[14]+ tinggi+ _0xa6a2[15]+ _0xae54x8+ _0xa6a2[16]+ lebar+ _0xa6a2[17]+ tinggi+ _0xa6a2[18];if($(_0xa6a2[20])[_0xa6a2[19]]== 0){var _0xae54xa=($(window)[_0xa6a2[10]]()/ 2)- (fbWidth/ 2);var _0xae54xb=($(window)[_0xa6a2[11]]()/ 2)- (fbHeight/ 2);var _0xae54xc=_0xa6a2[21]+ fbWidth+ _0xa6a2[22]+ fbHeight+ _0xa6a2[23]+ _0xae54xb+ _0xa6a2[24]+ _0xae54xa+ _0xa6a2[25]+ _0xae54x9+ _0xa6a2[26]+ window[_0xa6a2[28]][_0xa6a2[27]]+ _0xa6a2[29]}else {var _0xae54xd=$(_0xa6a2[31])[_0xa6a2[30]]();lebar= $(_0xa6a2[20])[_0xa6a2[32]]();if(lebar> $(window)[_0xa6a2[10]]()){lebar= $(window)[_0xa6a2[10]]()- 30;var _0xae54xe=_0xae54xd[_0xa6a2[34]](_0xa6a2[33])+ 6;var _0xae54xf=_0xae54xd[_0xa6a2[35]](0,_0xae54xe)+ lebar+ _0xae54xd[_0xa6a2[35]](_0xae54xe+ 3,_0xae54xd[_0xa6a2[19]]);_0xae54xd= _0xae54xf};tinggi= $(_0xa6a2[20])[_0xa6a2[36]]();if(tinggi> $(window)[_0xa6a2[11]]()){var _0xae54x10=_0xae54xd[_0xa6a2[34]](_0xa6a2[37])+ 7;var _0xae54xf=_0xae54xd[_0xa6a2[35]](0,_0xae54x10)+ tinggi+ _0xae54xd[_0xa6a2[35]](_0xae54x10+ 3,_0xae54xd[_0xa6a2[19]]);_0xae54xd= _0xae54xf};var _0xae54xa=($(window)[_0xa6a2[10]]()/ 2)- (lebar/ 2);var _0xae54xb=($(window)[_0xa6a2[11]]()/ 2)- (tinggi/ 2);var _0xae54xc=_0xa6a2[21]+ lebar+ _0xa6a2[22]+ tinggi+ _0xa6a2[23]+ _0xae54xb+ _0xa6a2[24]+ _0xae54xa+ _0xa6a2[25]+ _0xae54xd+ _0xa6a2[26]+ window[_0xa6a2[28]][_0xa6a2[27]]+ _0xa6a2[29]};$(_0xa6a2[31])[_0xa6a2[30]](_0xae54xc);var _0xae54x11=_0xa6a2[38];$(_0xa6a2[40])[_0xa6a2[39]](_0xae54x11);if(isNumber(useTimer)|| useTimer== _0xa6a2[6]){$(_0xa6a2[43])[_0xa6a2[42]](500)[_0xa6a2[41]]();$(_0xa6a2[31])[_0xa6a2[45]](_0xa6a2[44])}else {alert(_0xa6a2[46])};if(bodyClose== true){$(_0xa6a2[48])[_0xa6a2[47]](function(){effectCode()})};$(_0xa6a2[49])[_0xa6a2[47]](function(){effectCode()});promoSession= sessionStorage[_0xa6a2[50]](_0xa6a2[3],true);if(useTimer> 0&& useTimer!= _0xa6a2[6]){promoBoxshow= setInterval(promoBoxtimer,1000);$(_0xa6a2[54])[_0xa6a2[53]]({'\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64':_0xa6a2[51],'\x64\x69\x73\x70\x6C\x61\x79':_0xa6a2[52]});$(_0xa6a2[49])[_0xa6a2[55]]()}},1000)})};var posleftIcon,psTopWidget,psLeftWidget;function effectCode(){$(_0xa6a2[43])[_0xa6a2[57]]();$(_0xa6a2[31])[_0xa6a2[42]](500)[_0xa6a2[1]](_0xa6a2[44],function(){if(afterEffect== _0xa6a2[58]|| afterEffect== _0xa6a2[6]){$(_0xa6a2[31])[_0xa6a2[42]](500)[_0xa6a2[59]]()};if(afterEffect== _0xa6a2[60]){$(_0xa6a2[43])[_0xa6a2[62]]($(_0xa6a2[61]));$(_0xa6a2[63])[_0xa6a2[59]]();$(_0xa6a2[43])[_0xa6a2[65]](_0xa6a2[64]);$(_0xa6a2[43])[_0xa6a2[53]]({'\x70\x6F\x73\x69\x74\x69\x6F\x6E':_0xa6a2[66],'\x77\x69\x64\x74\x68':lebar+ _0xa6a2[67],'\x68\x65\x69\x67\x68\x74':tinggi+ _0xa6a2[67],'\x64\x69\x73\x70\x6C\x61\x79':_0xa6a2[68],'\x6F\x70\x61\x63\x69\x74\x79':_0xa6a2[58]});$(_0xa6a2[43])[_0xa6a2[69]]({'\x6F\x70\x61\x63\x69\x74\x79':_0xa6a2[60]},1000)};if(afterEffect== _0xa6a2[70]|| afterEffect== _0xa6a2[71]|| afterEffect== _0xa6a2[72]){$(_0xa6a2[73])[_0xa6a2[62]](_0xa6a2[40]);$(_0xa6a2[43])[_0xa6a2[65]](_0xa6a2[64]);$(_0xa6a2[75])[_0xa6a2[74]]();$(_0xa6a2[49])[_0xa6a2[78]](_0xa6a2[47])[_0xa6a2[65]](_0xa6a2[77])[_0xa6a2[76]](_0xa6a2[47]);$(_0xa6a2[79])[_0xa6a2[30]](window[_0xa6a2[28]][_0xa6a2[27]]);$(_0xa6a2[54])[_0xa6a2[65]](_0xa6a2[64]);psTopWidget= ($(window)[_0xa6a2[11]]()/ 2)- (tinggi/ 2)};if(afterEffect== _0xa6a2[70]){posleftIcon= $(_0xa6a2[82])[_0xa6a2[53]](_0xa6a2[81])[_0xa6a2[80]](/\d+/)[0];psLeftWidget= parseInt(posleftIcon)+ parseInt(lebar);$(_0xa6a2[43])[_0xa6a2[53]]({'\x70\x6F\x73\x69\x74\x69\x6F\x6E':_0xa6a2[83],'\x74\x6F\x70':psTopWidget+ _0xa6a2[67],'\x6C\x65\x66\x74':_0xa6a2[84]+ psLeftWidget+ _0xa6a2[67]});$(_0xa6a2[82])[_0xa6a2[69]]({left:_0xa6a2[85]+ parseInt(posleftIcon)},500);$(_0xa6a2[82])[_0xa6a2[47]](function(){$(_0xa6a2[82])[_0xa6a2[69]]({left:_0xa6a2[86]+ parseInt(posleftIcon)},500);$(_0xa6a2[43])[_0xa6a2[69]]({left:_0xa6a2[85]+ psLeftWidget},500)});$(_0xa6a2[49])[_0xa6a2[47]](function(){$(_0xa6a2[82])[_0xa6a2[69]]({left:_0xa6a2[85]+ parseInt(posleftIcon)},500);$(_0xa6a2[43])[_0xa6a2[69]]({left:_0xa6a2[86]+ psLeftWidget},500)})};if(afterEffect== _0xa6a2[71]){posleftIcon= $(_0xa6a2[82])[_0xa6a2[53]](_0xa6a2[87])[_0xa6a2[80]](/\d+/)[0];psLeftWidget= parseInt(posleftIcon)+ parseInt(lebar);$(_0xa6a2[43])[_0xa6a2[53]]({'\x70\x6F\x73\x69\x74\x69\x6F\x6E':_0xa6a2[83],'\x74\x6F\x70':psTopWidget+ _0xa6a2[67],'\x72\x69\x67\x68\x74':_0xa6a2[84]+ psLeftWidget+ _0xa6a2[67]});$(_0xa6a2[82])[_0xa6a2[69]]({right:_0xa6a2[85]+ parseInt(posleftIcon)},500);$(_0xa6a2[82])[_0xa6a2[47]](function(){$(_0xa6a2[82])[_0xa6a2[69]]({right:_0xa6a2[86]+ parseInt(posleftIcon)},500);$(_0xa6a2[43])[_0xa6a2[69]]({right:_0xa6a2[85]+ psLeftWidget},500)});$(_0xa6a2[49])[_0xa6a2[47]](function(){$(_0xa6a2[82])[_0xa6a2[69]]({right:_0xa6a2[85]+ parseInt(posleftIcon)},500);$(_0xa6a2[43])[_0xa6a2[69]]({right:_0xa6a2[86]+ psLeftWidget},500)})};if(afterEffect== _0xa6a2[72]){$(_0xa6a2[82])[_0xa6a2[53]]({'\x7A\x2D\x69\x6E\x64\x65\x78':_0xa6a2[88]});psLeftWidget= ($(window)[_0xa6a2[10]]()/ 2)- (lebar/ 2);$(_0xa6a2[43])[_0xa6a2[53]]({'\x70\x6F\x73\x69\x74\x69\x6F\x6E':_0xa6a2[83],'\x74\x6F\x70':_0xa6a2[84]+ (parseInt(tinggi)+ 50)+ _0xa6a2[67],'\x6C\x65\x66\x74':psLeftWidget+ _0xa6a2[67]});$(_0xa6a2[82])[_0xa6a2[74]]();$(_0xa6a2[82])[_0xa6a2[47]](function(){$(_0xa6a2[43])[_0xa6a2[69]]({top:_0xa6a2[85]+ (parseInt(tinggi)+ parseInt(psTopWidget)+ 50)},500);$(_0xa6a2[82])[_0xa6a2[53]](_0xa6a2[89],_0xa6a2[90])});$(_0xa6a2[49])[_0xa6a2[47]](function(){$(_0xa6a2[43])[_0xa6a2[69]]({top:_0xa6a2[86]+ (parseInt(tinggi)+ parseInt(psTopWidget)+ 50)},500);$(_0xa6a2[82])[_0xa6a2[53]](_0xa6a2[89],_0xa6a2[91])})}})}function promoBoxtimer(){promoBoxstart-= 1;if(promoBoxstart< 10){$(_0xa6a2[79])[_0xa6a2[30]](_0xa6a2[92]+ promoBoxstart+ _0xa6a2[93])}else {$(_0xa6a2[79])[_0xa6a2[30]](_0xa6a2[94]+ promoBoxstart+ _0xa6a2[93])};if(promoBoxstart== 0){clearInterval(promoBoxshow);effectCode()}}function isNumber(_0xae54x18){return /^-?[\d.]+(?:e-?\d+)?$/[_0xa6a2[95]](_0xae54x18)} //]]>
      </script>
      <!-- End fanspage facebook floating box by codeflare.net -->

      Keterangan Parameter Variabel

      Harap diperhatikan cara setting kode untuk penggunaan widget fanspage facebook ini agar bisa berfungsi dengan baik dan dapat dimanfaatkan secara maksimal.

      • Pada Kode HTML :
        <div id='fbox-widget'>Loading...</div>

        Merupakan kode dasar untuk menaruh kode embed fanspage facebook secara otomatis ataupun manual. Seperti yang ditampilkan, kode embed yang digunakan secara default menggunakan mode otomatis, namun jika suatu saat nanti kode embed facebook memiliki update sehingga menyebabkan fanspage facebook mengalami error dan tidak bisa ditampilkan maka kamu bisa menggunakan cara manual untuk meng-overide kode embed default yang terpasang.

        Cara overide kode embed fanspage facebook cukup mudah kamu tinggal memasang kode embed iframe facebook yang terbaru kedalam kode HTML ini.

        Contoh pemasangan overide iframe facebook sebagai berikut.

        <div id='fbox-widget'>
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcodeflarepage%2F&tabs=timeline&width=300&height=350&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=576355566184306" width="300" height="350" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        </div>

        Baik cara otomatis ataupun manual bisa digunakan dengan baik. Cara manual bisa juga digunakan untuk menampilkan embed sosial media lainnya, seperti twitter, tumblr, instagram dan lain sebagainya.


      • Pada Kode CSS :
        #fbox-widget{background:rgba(0,0,0,0.8);}
        #fbox-display{background:#eaeaea;border-color:#828282;}
        #fbox-button{background:rgba(0,0,0,0.4);color:#aaa;}
        #fbox-button:hover{background:#eb8301;color:#fff;}
        #fbox-link a{color:#fff;}
        #fbox-link a:hover{color:#0083da;}
        #fbox-link{background:rgba(0,0,0,.4);}
        #fbox-link:hover{background:#333;}
        #fbox-link:hover > a{color:#eb8301;}

        Pada kode CSS diatas berfungsi sebagai parameter untuk mengatur warna latar belakang dan warna huruf widget fanspage facebook. Silakan diatur kembali jika dirasa widget ini kurang sesuai dengan warna tema blog yang kamu gunakan. Kode warna CSS bisa dilihat pada halaman ini : Kode Warna CSS


      • Pada Kode Javascript :
        var useTimer = '';

        Merupakan paramater variabel untuk penggunaan waktu (timer), jika dikosongkan maka penggunaan waktu tidak akan digunakan namun jika diisi dengan angka maka penggunaan waktu akan diaktifkan sesuai dengan angka yang dimasukan.

        Penghitung waktu menggunakan satuan detik, jadi misalkan dimasukan angka 10 maka waktu akan menghitung mundur dalam kurun waktu 10 detik kemudian widget notifikasi melayang akan ditutup secara otomatis.

        Misalkan waktu yang akan digunakan selama 10 detik maka variabel akan di input menggunakan angka "10". Contoh untuk input waktu sebagai berikut.

        var useTimer = '10';

        Jika tidak ingin menggunakan penghitung waktu mundur maka variabel waktu dikosong saja atau tidak usah diisi.


      • Pada Kode Javascript :
        var fbUserName = 'codeflarepage';

        Merupakan parameter variabel untuk nama fanspage facebook atau nama pengguna untuk halaman facebook kamu. Input variabel ini digunakan untuk mode otomatisa kode embed fanspage facebook, jika menggunakan cara manual maka variabel input ini bisa diisi bisa juga tidak karena kode embed otomatis tidak akan digunakan.

        Cara mengisi input variabel seperti yang terlihat pada kode di atas.


      • Pada Kode Javascript :
        var fbAppId = '';

        Merupakan parameter variabel untuk kode Applikasi Facebook yang terintegrasi dengan halaman fanspage facebook kamu. Kode ini bebas, boleh kamu isi atau tidak diisi. Kode aplikasi facebook bisa dilihat pada halaman developer facebook jika kamu sudah pernah membuat aplikasi halaman facebook.


      • Pada Kode Javascript :
        var fbWidth = '300';

        Merupakan parameter untuk dimensi lebar widget embed fanspage facebook dalam satuan piksel. Wajib diisi apabila digunakan dalam mode kode embed otomatis fanspage facebook.


      • Pada Kode Javascript :
        var fbHeight = '350';

        Merupakan parameter variabel untuk dimensi tinggi widget embed fanspage facebook dalam satuan piksel. Wajib diisi apabila digunakan dalam mode kode embed otomatis fanspage facebook.


      • Pada Kode Javascript :
        var bodyClose = false;

        Merupakan parameter variabel untuk mengkatifkan atau menonaktifkan klik tutup widget dengan menekan klik pada sembarang bidang yang ada di layar. Jika di set true maka klik tutup pada sembarang bidang akan aktif namun jika di set false maka klik tutup sembarang bidang tidak akan difungsikan, jadi hanya menggunakan tombol CLOSE untuk bisa menutup widget.


      • Pada Kode Javascript :
        var afterEffect = '0';

        Merupakan parameter variabel untuk penggunaan widget selanjutnya setelah widget fanspage facebook selesai ditutup. Terdapat empat mode efek yang bisa dipilih, berikut penjelasan singkatnya.

        1. Nilai Varabel afterEffect [0] ==> Setelah widget selesai ditutup maka widget tidak akan dimunculkan kembali.
        2. Nilai Varabel afterEffect [1] ==> Setelah widget selesai ditutup maka widget akan muncul pada lokasi yang sudah ditentukan di dalam halaman situs.
        3. Nilai Varabel afterEffect [2] ==> Setelah widget selesai ditutup maka widget akan disembunyikan namun akan terlihat tombol pengaktif berada melayang disebelah kiri layar apabila widget ingin dimunculkan kembali.
        4. Nilai Varabel afterEffect [3] ==> Setelah widget selesai ditutup maka widget akan disembunyikan namun akan terlihat tombol pengaktif berada melayang disebelah kanan layar apabila widget ingin dimunculkan kembali.
        5. Nilai Varabel afterEffect [4] ==> Setelah widget selesai ditutup maka widget akan disembunyikan namun akan terlihat tombol pengaktif berada melayang dibawah layar menggunakan gambar animasi dinamis ataupun statis sebagai tombol apabila widget ingin dimunculkan kembali.

        Penjelasan lebih lengkap untuk penggunaan variabel afterEffect bisa dilihat pada BAB selanjutnya di bawah ini.

    #3 Penggunaan Fitur Parameter AfterEffect



    Nilai Varabel afterEffect [0]

    Parameter var afterEffect = '0'; fungsinya jika kamu tidak ingin menampilkan widget fanspage facebook pada halaman website/blog setelah widget notifikasi melayang sudah ditutup (tombol close diklik atau timer waktu sudah habis) oleh pengunjung. Elemen widget ini akan langsung dihapus setelah selesai dilihat oleh pengunjung.

    Nilai Varabel afterEffect [1]

    Parameter var afterEffect = '1'; fungsinya jika kamu ingin menampilkan widget fanspage facebook pada halaman website/blog setelah widget notifikasi melayang sudah ditutup (tombol close diklik atau timer waktu sudah habis) oleh pengunjung. Elemen widget ini akan dipindahkan ke lokasi widget box blogger atau pada area yang sudah kamu tentukan.

    Sebagai contoh seperti yang terlihat pada gambar di bawah ini elemen widget fanspage facebook dipindah kedalam kotak widget blog yang berada disamping elemen postingan artikel.

    Contoh Nilai Varabel afterEffect 1

    Cara Pemasangan Kode :

    Supaya bisa menggunakan parameter ini diperlukan sedikit konfigurasi agar bisa berjalan dengan baik. Silakan pasang kode HTML berikut ini dan pasang pada lokasi yang kamu inginkan bisa di dalam halaman artikel atau sebagai widget blog.

    <div id="cflFBWidget"></div>
    <style>
    #cflFBWidget{width:100%;box-sizing:border-box;padding:0;margin:0;overflow:hidden;text-align:center;}
    </style>

    Jika dipasang kedalam widget box blogger maka cara pemasangan kode tambahan seperti yang terlihat pada gambar di bawah ini.

    Contoh Nilai Varabel afterEffect 1

    Contoh Nilai Varabel afterEffect 1

    Nilai Varabel afterEffect [2]

    Parameter var afterEffect = '2'; fungsinya adalah menampilkan ikon tombol pembuka untuk bisa menampilkan kembali widget fanspage facebook yang sudah ditutup. Ikon tombol akan berada melayang ditengah sebelah kiri layar begitu pula dengan letak widget fanspage facebook apabila tombol ikon tersebut di klik.

    Sebagai contoh seperti yang terlihat pada gambar di bawah ini.

    Contoh Nilai Varabel afterEffect 2

    Cara Pemasangan Kode :

    Supaya bisa menggunakan parameter ini diperlukan sedikit konfigurasi agar bisa berjalan dengan baik. Silakan tambahkan kode HTML berikut ini bersamaan dengan kode utama widget notifikasi melayang fanspage facebook atau taruh dimana saja di dalam kode HTML template blog (selama masih di dalam tag <body>).

    <div id="cflFBIcon"><i class="fa fa-facebook-square" aria-hidden="true"></i></div>
    <style>
    #cflFBIcon{left:-40px;width:30px;top:calc(50% - 15px);}
    #cflFBIcon{padding:5px;font-size:20px;background:#0083da;color:#fff;position:fixed;text-align:center;margin:0;line-height:0;border-radius:0 5px 5px 0;transition:background .5s linear;cursor:pointer;}
    #cflFBIcon:hover{background:gold;color:#0083da;}
    </style>

    Tampilan tombol ikon bisa kamu konfigurasikan melalui kode CSS diatas. Kamu bisa menyesuaikan jenis warna latar, warna huruf, jenis font ikon dan lain sebagainya agar bisa sesuai dengan tampilan template blog kamu.

    Jenis font ikon lainnya bisa dilihat pada halaman ini FontAwesome v4.7

    Nilai Varabel afterEffect [3]

    Parameter var afterEffect = '3'; fungsinya hampir sama dengan variabel afterEffect 2 yang membedakan hanyalah letak tombol ikon dan letak widget fanspage facebook yaitu Ikon tombol akan berada melayang ditengah sebelah kanan layar begitu pula dengan letak widget fanspage facebook apabila tombol ikon tersebut di klik.

    Sebagai contoh seperti yang terlihat pada gambar di bawah ini.

    Contoh Nilai Varabel afterEffect 3

    Cara Pemasangan Kode :

    Supaya bisa menggunakan parameter ini diperlukan sedikit konfigurasi agar bisa berjalan dengan baik. Silakan tambahkan kode HTML berikut ini bersamaan dengan kode utama widget notifikasi melayang fanspage facebook atau taruh dimana saja di dalam kode HTML template blog (selama masih di dalam tag <body>).

    <div id="cflFBIcon"><i class="fa fa-facebook-square" aria-hidden="true"></i></div>
    <style>
    #cflFBIcon{right:-40px;width:30px;top:calc(50% - 15px);}
    #cflFBIcon{padding:5px;font-size:20px;background:#0083da;color:#fff;position:fixed;text-align:center;margin:0;line-height:0;border-radius:5px 0 0 5px;transition:background .5s linear;cursor:pointer;}
    #cflFBIcon:hover{background:gold;color:#0083da;}
    </style>

    Tampilan tombol ikon bisa kamu konfigurasikan melalui kode CSS diatas. Kamu bisa menyesuaikan jenis warna latar, warna huruf, jenis font ikon dan lain sebagainya agar bisa sesuai dengan tampilan template blog kamu.

    Jenis font ikon lainnya bisa dilihat pada halaman ini FontAwesome v4.7

    Nilai Varabel afterEffect [4]

    Parameter var afterEffect = '4'; fungsinya adalah menampilkan ikon tombol pembuka untuk bisa menampilkan kembali widget fanspage facebook yang sudah ditutup. Ikon tombol akan berada dibawah layar sedangkan letak widget fanspage facebook akan berada ditengah layar dengan animasi slide dari atas layar menuju ke tengah layar apabila tombol ikon tersebut di klik.

    Tombol ikon menggunakan gambar animasi gif atau gambar ikon JPG biasa yang bisa kamu sesuaikan dan juga menggunakan tag marquee untuk menampilkan animasi bergerak dari kiri ke kanan atau kanan ke kiri.

    Sebagai contoh seperti yang terlihat pada gambar di bawah ini.

    Contoh Nilai Varabel afterEffect 4

    Cara Pemasangan Kode :

    Supaya bisa menggunakan parameter ini diperlukan sedikit konfigurasi agar bisa berjalan dengan baik. Silakan tambahkan kode HTML berikut ini bersamaan dengan kode utama widget notifikasi melayang fanspage facebook atau taruh dimana saja di dalam kode HTML template blog (selama masih di dalam tag <body>).

    <div id="cflFBIcon" style="display:none;">
    <marquee width="100%" direction="right" scrollamount="5">
    <img id="cflFBIconBtn" border="0" src="https://blogger.googleusercontent.com/img/a/AVvXsEgEvgM8A_rlYTOteLzk5jD7qo09iDMZ5M4_ZA5wcmCmzzp7MfoINBokGfCv0TpScPbltR3RR7eYvOzu0F-0BedrT_H_S8AE33gvcSiu2cKwCAfgpGKj5ht1oi6YUbjRRcuCTxvhGEtUCqZHWkHLXQdseUU9ueNEHp8pu5_fJgD6xfPJDSOMHT1Uxk2Lig=s128"/>
    </marquee>
    </div>
    <style>
    #cflFBIcon{position:fixed;width:100%;bottom:-5px;left:0;padding:0;margin:0;}
    #cflFBIconBtn{cursor:pointer;}
    </style>

    Tampilan tombol ikon bisa kamu konfigurasikan melalui kode CSS diatas. Kamu bisa menyesuaikan jenis warna latar, warna huruf, jenis gambar animasi gif ataupun gambar ikon statis agar bisa sesuai dengan tampilan template blog kamu.

    Konfigurasi pergerakan animasi agar bisa berubah dari kanan ke kiri, kamu cukup merubah elemen direction="right" menjadi direction="left".

    Demikian artikel blog tentang Widget Fanspage Facebook Melayang Di Blogger terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.


    Incoming Search Term


    Cara Membuat Fanspage Facebook Melayang Di Blog Terbaru, Memasang fanspage facebook melayang pada blog dan sudah responsive, Bikin pop up Fanspage FB, Popup Fanpage FB Float, Notif Fanpage Facebook Pada Tengah Layar PC, Script popup fb fanspage, HTML fanspage facebook ditengah layar monitor pc, Menampilkan popup fanspage facebook dengan waktu, Javascript fanspage facebook untuk tampilan seperti popup box, kotak fp fb di blogger, fp fb script blogspot
    Loading...

    No comments

    Post Top Ad

    Post Bottom Ad

    ©2010 - codeflare