Cara membuat widget halaman facebook melayang

Membuat widget halaman facebook melayang, Widget fanpage fb melayang
2 min read
Membuat widget halaman fb melayang

Facebook menjadi salah satu alternative untuk meningkatkan jumlah pengunjung blog dengan melakukan share artikel blog di fanspage facebook.

Fanspage merupakan sebutan untuk halaman pribadi yang bisa kita buat untuk melakukan interaksi seperti share link, video, photo, hingga status. Apa bedanya dengan akun biasa?

AKun bisanya memang bisa digunakan untuk share link, video hingga photo juga, namun sifat dari fanspage lebih ke profesional dan bersifat publik, berbeda dengan akun pribadi yang mana akun pribadi bersifat khusus orang-orang yang akan menjadi teman anda.

Lagi pula dalam fanspage tidak ada batasan berapa banyak orang yang mengikuti, maka fanspage memang lebih baik digunakan untuk share artikel blog bkan.

Memasang Widget Fanspage Melayang di Blog dengan tombol close.

Hal khusus untuk meningkatkan jumlah pengikut atau like halaman blog di facebook adalah dengan menampilkan fanspage di blog itu sendiri. Sebelumnya anda haruslah memiliki fanspage, jika anda tidak tahu cara membuat fanspage facebook ikuti tutorial sebelumnya cara membuat fanspage facebook.

Saya anggap anda telah membuat dan mempunyai fanspage untuk blog anda, lalu sekarang kita akan memasangkan fanspage dengan blog, namun hasil dari cara ini akan sedikit mengganggu pengunjung anda. Silahkan ikuti jika ingin mencobanya.

  • Buka dashboard blogger.
  • Klik menu Tata letak.
  • Klik Add widget dan pilihlah HTML/Jawascript.
  • Copy dan Pastekan kode membuat widget fanspage melayang berikut ini.
  • 
    <!-- FB melayang tombol close  | KENSCRIPTS-->
    <style type='text/css'>
    #kotak-facebook {
    position:fixed !important;
    position:absolute; /* IE6 */
    bottom:-1000px;
    right:40%;
    margin:0px 0px 0px -182px;
    width:310px;
    height:auto;
    padding:16px;
    -webkit-box-shadow: 0px 0px 7px #222;
    -moz-box-shadow: 0px 0px 7px #222;
    box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
    color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#333;
    font:bold 16px Arial,Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#fff;
    border:2px solid #fff;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    cursor:pointer;
    }
    </style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
    // animasikan nilai top saat halaman telah selesai dimuat
    $('#kotak-facebook').animate({bottom:"50px"}, 1000);
    // hilangkan kotak pesan saat tombol (x) di klik
    $('a.close').click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>
    <div id='kotak-facebook'>
    <p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
    <!-- Mulai -->
    
    
    <div class="fb-like-box" data-href="https://www.facebook.com/Kenscripts" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>
    
    
    <!-- Selesai KENSCRIPTS-->
    <a class='close' href='#'>&times;</a>
    <p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://kumpulan-adsen.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://bos-tutorial.blogspot.com/2013/07/inilah-memasang-widget-like-box.html">Get This Widget</a></p>
    </div>
    
    

    Catat :
    1. Ubah script dengan background warna kuning diatas dengan script halaman facebook yang kalian buat,
    2. Jika gagal ulangi dari awal.

  • Done, simpan widget dab lihatlah hasilnya.

Baca : Menulis artikel dengan seo friendly dan user friendly

Demikianlah Cara membuat widget melayang untuk fanspage facebook, meskipun seditit mengganggu pengunjung namun jika konten yang disuguhkan unik percaya deh pasti tetap banyak pengunjung. Sekian dari saya.

Kenny is my name, someone who is quite calm with a charming smile. Don't bother me if you don't want to see the devil. Don't act like you're innocent.

Anda mungkin menyukai postingan ini

  • Membuat tampilan dark mode pada website merupakan salah satu fitur yang dapat membuat tampilan menjadi terlihat gelap seperti website twitter, youtube, dan facebook pun mema…
  • Hallo kali ini kenny akan memberikan tutorial membuat tombol download dan demo dengan efek animasi. Tombol download dan demo ini bisa digunakan untuk blog berniche download, ba…
  • .gradient1{background: rgba(11, 0, 0, 0) linear-gradient(-15deg, rgb(8, 0, 11) 0%, rgb(39, 16, 137) 15%, rgb(17, 0, 238) 15%, rgb(17, 5, 48) 28%, rgb(11, 0, 94) 28%, rgb(132, 0, …
  • Tutorial ini merupakan cara merubah tampilan status bar browser pada android atau smartphone sesuai dengan warna yang apa kita inginkan Status bar merupakan sebuah kotak yang ter…
  • Memberikan warna scrool yang berbeda dari yang lain akan membuat tampilan blog berbeda dari blog lainnya, ini diberikan semata-mata hanya untuk memebrikan kesan yang berebada. …
  • Hallo kali ini kenny akan memberikan source kode untuk membuat pop up email subscribe yang biasa digunakan untuk berlangganan artikel blog Membuat pop up email berlangganan blo…

Posting Komentar

1. Dilarang komentar spam
2. Dilarang berkomentar dengan link aktif
3. Dilarang menghina agama, antar manusia, suku, bangsa, dan budaya
4. Dilarang komentar diluar pembahasan blog
5. Berkomentarlah dengan bijak