WordPress Style Facebook Popup For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Tuesday 30 December 2014

WordPress Style Facebook Popup For Blogger


Facebook likebox popup is one of the evergreen blogger widget. Till now I have shared many versions of facebook likebox popups but this one is totally different among of them, you may have seen this type of popup on wordpress blogs. But today I am sharing a totally bloggerized version of this popup.

Live Widget Demo

Before going further have a look on other popup widgets by Helper Blogger

Other Popup Widgets By Helper Blogger


Widget Installation

The installation of this widget is damn easy, you can add this widget as an simple HTML/JavaScript widget. Follow below steps to add this widget
  • Go to Blogger Dashboard
  • Select your blog from
  • Go to Layout > Add Widget > HTML/JavaScript
  • Copy and Paste code (don't forgot to change our username with yours)
  • Save your widget

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJO8r0Zv21Ynl7DM7v7ErX_NPtmZ7HMM1SWB8bA1s7liW1Zjbj5fo_imKkgPw1aDrv9_QyGtRe0nLlzs9A4fhr2iECqlY7aSeFM6vXmzlUoKu7u-mvWYMz2hhG979hyphenhyphen-SnIQKyIJoIbE/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%2Fhelper.blogger&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>

Widget Customizations

  • If you have already installed jQuery library then remove below code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
  • Replace helper.blogger with your facebook fanpage username.
  • This widget appears only once in 7 days (per person), if you want to appear it on every page load then remove below code snippet from widget code
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
  • By default, This popup appears on screen for 10 seconds . If you wish to change it then edit below code. (Note: 1 Second = 1000, 10 Seconds = 10000, 20 Seconds = 20000)
.delay(10000)

That's All
Have a nice day and Happy Blogging :)

7 comments:

  1. Sudah seru, odds nya menguntungkan lagi!!. itulah permainan sabung ayam online di agen sabung ayam
    Dapatkan informasi penting dalam dunia sabung ayam di website bawah ini
    http://judicockfight.over-blog.com/2018/07/taktik-dalam-pasarkan-sabung-ayam-kampung.html

    ReplyDelete
  2. Rohini Call Girls

    Pitampura Escorts

    Janakpuri Call Girls

    Tilak Nagar Escorts




    Rohini escorts is the most popular escort website in Delhi Pitampura with more than 50 currently available Call girls. Our Rohini Escort are well trained to fulfill your sexual ...Call Us For Book An Escorts 9650262602

    ReplyDelete

  3. We provide you the best and Top Chandigarh escorts

    services at affordable price. Contact us or visit us today!!

    ReplyDelete
  4. We provide you the best and Top Dehradun escorts services at affordable price. Contact us or visit us today!!

    ReplyDelete
  5. Trick Gampang Memenangkan Permainan Situs Judi Sabung Ayam Online Klik Di Sini

    Agen Sabung Ayam Online Terbaik Dan Juga Terpercaya http://www.bakarayam.co

    Informasi Terlengkap Mengenai Sabung Ayam

    http://bakarayam330033.blogspot.com/2018/08/langkah-buat-sabung-ayam-si28net-tahan.html/

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM