Tutorial Membuat Popup Facebook Like Page di Blog ~ RenSEO

Tutorial Membuat Popup Facebook Like Page di Blog



Seringkah kamu mengunjungi website yang tiba tiba itu ada kotak popup gunanya untuk menyukai halaman facebook yang mereka buat. Admin Ren akan memberikan Tutorial atau Cara membuat Popup Facebook Like Fanpage di Blog. Wah trik ini cukup ampuh si untuk memperbanyak liker fanpage kamu. Admin Ren juga memasangnya sih, hehe.
Caranya tidak terlalu rumit kok untuk membuatnya, tidak perlu masuk ke edit template, hanya perlu menambahkan widget blog saja. Kalau untuk website beda lagi, hehe, dia harus memasuki edit template.


Baca juga nih jobsmart.co.id : Situs informasi lowongan kerja terbaru di indonesia
  1. Kalau kamu sudah login di dashboard Blogger, sekarang kamu klik di bagian Tata Letak / Layout - Add a Gadget - Pilih yang bagian HTML/Javascript
  2. Widget itu otomatis kosong kan? lalu kamu isi script, caranya dengan copy-paste script dibawah ini:

  3. <!-- Facebook Like Fanpage -->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
    <style>
        #hbfanback {
            display: none;
            background: rgba(0, 0, 0, 0.8);
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
        }
        #hbfan-exit {
            width: 100%;
            height: 100%;
        }
        #hbfanbox {
            background: white;
            width: 420px;
            height: 270px;
            position: absolute;
            top: 58%;
            left: 63%;
            margin: -220px 0 0 -375px;
            -webkit-box-shadow: inset 0 0 50px 0 #939393;
            -moz-box-shadow: inset 0 0 50px 0 #939393;
            box-shadow: inset 0 0 50px 0 #939393;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin: -220px 0 0 -375px;
        }
        #hbfanclose {
            float: right;
            cursor: pointer;
            background: url(http://1.bp.blogspot.com/-FNtcBhH50iA/VKGx_CODj0I/AAAAAAAAD5w/rbd0OLy5lDs/s1600/hb-fanclose.png) repeat;
            height: 15px;
            padding: 20px;
            position: relative;
            padding-right: 40px;
            margin-top: -20px;
            margin-right: -22px;
        }
        .hbremove-borda {
            height: 1px;
            width: 366px;
            margin: 0 auto;
            background: #F3F3F3;
            margin-top: 16px;
            position: relative;
            margin-left: 20px;
        }
    </style>
    <script type='text/javascript'>
        //<![CDATA[
        jQuery.cookie = function(key, value, options) {
            // key and at least value given, set cookie...
            if (arguments.length > 1 && String(value) !== "[object Object]") {
                options = jQuery.extend({}, options);
                if (value === null || value === undefined) {
                    options.expires = -1;
                }
                if (typeof options.expires === 'number') {
                    var days = options.expires,
                        t = options.expires = new Date();
                    t.setDate(t.getDate() + days);
                }
                value = String(value);
                return (document.cookie = [
                    encodeURIComponent(key), '=',
                    options.raw ? value : encodeURIComponent(value),
                    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                    options.path ? '; path=' + options.path : '',
                    options.domain ? '; domain=' + options.domain : '',
                    options.secure ? '; secure' : ''
                ].join(''));
            }
            // key and possibly options given, get cookie...
            options = value || {};
            var result, decode = options.raw ? function(s) {
                return s;
            } : decodeURIComponent;
            return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
        };
        //]]>
    </script>
    <script type='text/javascript'>
        jQuery(document).ready(function($) {
            if ($.cookie('popup_user_login') != 'yes') {
                $('#hbfanback').delay(100).fadeIn('medium');
                $('#hbfanclose, #hbfan-exit').click(function() {
                    $('#hbfanback').stop().fadeOut('medium');
                });
            }
            $.cookie('popup_user_login', 'yes', {
                path: '/',
                expires: 7
            });
        });
    </script>
    <div id='hbfanback'>
        <div id='hbfan-exit'></div>
        <div id='hbfanbox'>
            <div id='hbfanclose'></div>
            <div class='hbremove-borda'></div>
            <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Frenseoo&amp;width=340&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowtransparency="true"></iframe>
        </div>
    </div>
    <!-- Facebook Like Fanpage -->

  4. Setelah Copy-Paste ke Gadget Blogger langsung kamu Simpan atau Save
Note:
  1. Ganti tulisan renseoo dengan username fan page yang kamu punya.
  2. Jika di template kamu sudah ada code seperti ini <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script> maka hapus saja ya.
  3. Oh iya satu lagi nih, kalau kamu Popup Like Fan Page  itu disetiap halaman, langkah yang harus dilakukan adalah menghapus code yang berwarna Hijau
Jika kamu sudah selesai melakukannya, silahkan bisa dicoba dengan cara membuka blog kamu sendiri. Mudah kan Tutorialnya? Wah mudah dong dan juga enggak ribet ribet banget.
Oke itu saja penjelasan tentang Tutorial Membuat Popup Facebook Like Page di Blog. Oh iya teman, jangan lupa ya untuk mengklik Like pada Popup Fanpagenya ya atau kamu bisa mengunjungi fanpage Ren SEO, itu saja ya yang Admin Ren inginkan.
Wassalamualaikum War'rahmatulahi Wabarakatu.
Kamu baru saja membaca artikel yang berkategori Tips Blogger / Tutorial dengan judul Tutorial Membuat Popup Facebook Like Page di Blog. Kamu bisa bookmark halaman ini dengan URL http://renseo.blogspot.com/2015/08/cara-membuat-popup-facebook-like-page.html. Terima kasih telah berkunjung ke Website Ini!
Selanjutnya
« Prev Post
Sebelumnya
Next Post »

2 comments

Klik di sini untuk bercomments
September 25, 2015 at 4:05 PM ×

keren nih, ijin coba ah mas bro :D

Balas
avatar image

Berkomentarlah dengan relevan ya kawan. Gunakannlah kata-kata yang bisa dimengerti oleh orang lain, dan jangan kata-kata yang mengandung SEX, SARA, dan lain sebagainya.

Admin Ren

ConversionConversion EmoticonEmoticon