Cara Membuat Widget Like Fans Page Pop Up Keren

21.58
Assalamualaikum wr.wb



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

Cara Membuat Widget Like Fans Page Pop Up Keren, Cara Membuat Widget Like Fans Page Pop Up Keren melayang


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

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


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

Cara Membuat Widget Like Fans Page Pop Up Keren, Cara Membuat Widget Like Fans Page Pop Up Keren melayang

Memasang Fanspage Facebook Like Box "Popup" alias Kotak Like FB yang muncul atau melayang di halaman blog mas/mbak adalah salah satu tips & trik untuk meningkatkan "Likers" Fans Page blog juga lho.
Kalo mas/mbak berminat memasang Kotak Popup Facebook Like Page di blog, seperti contoh diatas, yuuk ikuti tutor yang sangat mudah 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 kode 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(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%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 teman postingan yang bisa Haikal informasikan kepada kalian.
JANGAN LUPA Like dan Komentar nya ya agar blog saya bisa berguna bagi anda
SEMOGA BERMANFAAT ^_^
Terima Kasih atas kunjungannya

Wassalamualaikum wr.wb

Artikel Terkait

Previous
Next Post »