Cara Menciptakan Widget Like Fans Page Pop Up Keren

Assalamualaikum wr.wb



Pada kali ini Haikal akan share Cara Membuat Widget Like Fans Page Pop Up Keren. Widget ialah salah satu akomodasi yang di berikan oleh blogger untuk mempermudah mas/mbak memasukkan arahan html dan script lainnya.

Widget itu sendiri ialah sebuah kotak yang berisi kode-kode di mana mas/mbak sanggup memindahkan ke dalam sidebar di manapun yang mas/mbak sukai.
Mas/mbak sanggup menggunakannya untuk personalisasi blog dan memperoleh isu yg diinginkan hanya dengan melihatnya dari widget sidebar.

Baca Juga: PicSay Pro v1.8.0.5 - Ringan untuk editing foto

Mas/mbak juga sanggup memasukkan arahan - arahan untuk memperindah blog anda ibarat tanggal, jam, radio dan lain - lain. Naah pada artikel kali ini Haikal akan share sedikit cara sederhana menciptakan widget dari html/javascript yaitu Like Fans Page Pop Up Melayang.

Memasang Fanspage Facebook Like Box "Popup" alias Kotak Like FB yang muncul atau melayang di halaman blog mas/mbak ialah salah satu tips & trik untuk meningkatkan "Likers" Fans Page blog juga lho.
Kalo mas/mbak berminat memasang Kotak Popup Facebook Like Page di blog, ibarat teladan diatas, yuuk ikuti tutor yang sangat gampang di bawah ini :

1. Login ke Home Blogger mas/mbak
2. Dan pilih Layout > Add a Gadget > pilih "HTML/JavaScript"
3. Kosongkan judul Widget-nya
4. Copy dan Paste arahan dibawah ini di kolom "Content".

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7niTyvUMBd4avxdAZ-vDCUFITQtg7MpEnqt5TUIYMVZhgtsvxRlXIuwzZBx7a9bnspJfJSwPnQf825KPGWPnRppOg1RBgZMSbwiET04NdMg5WD-hGJmgvaVurO1yj9hNHl9WUHtRTwgI/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%2Fmustofahaikalblog&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>

5. Ganti mustofahaikalblog dengan username halaman fanspage FB mas/mbak.
6. Setelah save dan enjoy :)

Cuman segitu aja sobat postingan yang sanggup Haikal informasikan kepada kalian.
JANGAN LUPA Like dan Komentar nya ya biar blog aku sanggup mempunyai kegunaan bagi anda
SEMOGA BERMANFAAT ^_^
Terima Kasih atas kunjungannya

Wassalamualaikum wr.wb

Bagikan Artikel ini