WordPress Style Facebook Popup Likebox For Blogger

WordPress Style Facebook Popup Likebox For Blogger
WordPress Style Facebook Popup Likebox For Blogger
Facebook popup like box ek bohot hi purana lekin kam ka blogger widget hai. Ap sab jante hai social networking sites mein se sabse popular hai facebook. Daily huge log facebook use karte hai. Aur kisi blog ki marketing ke liye facebook accha platform hai. Facebook like badane ke liye banaya gaya ye popup facebook like box apko jarur pasand aega kyunki ye ekdam alag style ki hai. Aisa style ki like box apko wordpress blog mein nasar aega. Ha, ye ek wordpress style facebook popup likebox hai.

Try Also : Floating Left and Right Side Skyscraper Banner Ad Widget For Blogger

Blogger Blog Mein Kaise WordPress Style Facebook Popup Like Box Jore?


Niche diye gaye steps follow kare.

Step 1. Pahle apna Blogger account mein log in karke Dashboard > Layout > Add a Gadget mein click kare.

WordPress Style Facebook Popup Likebox For Blogger

Step 2. Abh niche wale codes ko copy karke content box mein paste kare.

<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%2Fhelperbusdotcom&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>

WordPress Style Facebook Popup Likebox For Blogger

Customization


1. Agar apne pahle se apne template mein jQuery library install kiya hai to niche wale codes ko remove karde.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>

2. helperbusdotcom ko apna facebook page ki username se replace kare.

More Blogger Widgets:

3. Ye widget har visitor ko ek week mein sirf ek bar hi dikhai degi, agar ap apne blog ki har page mein ye likebox show karna chahte hai to widget code se niche wale codes ko remove karde.

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

4. Defaultly ye likebox sirf 10 second ke liye ati hai. Agar ap isko change karna chahte hai to niche ki code ko edit karna hoga. (Note: 1 Second = 100, 10 Seconds = 1000, 20 Seconds = 2000)

.delay(100)

Step 3. Abh Save button click kare.

Thats all. Abh apna blog visit kare. Apko nasar aega ek beautiful wordpress style facebook popup likebox. Thank You.

SHARE THIS

Author:

I'm an 18 years aged Passionate Blogger from West Bengal, India. I just love to write articles and share them with people. The day was 28th September 2015, when my dream of having a website comes true and I made this website to help you and peoples like you!

Previous Post
Next Post