Youtube Android,Blogging SEO & Whatsapp Tricks

youtube SEO, tricks for blogger, wordpress tricks for earning money online youtube earning, whatsapp,windows, android & all about new technology.

Facebook popup like box widget

October 17, 2014 No comments

Add popup Facebook Like box gadget in Blogger

Facebook like box for website or blog add beautiful facebook page like recommended widget increase your page liker how it work when your webpage open a popup window will appear for recommending like your facebook page. Grow facebook page likes increase blogger blog or website readers.

Specialty of this widget.

 1. this widget appear after 20 second of page load. you can customize time according to you change delay(20000) in below code for change delay time.
2. most important feature of this widget this widget appear only one time this widget will not disturb to visitors  by showing popup box again n again (if viewer delete the cookies and open this page again then popup box again will show for 1st time).

you can see live demo on this page.

Follow Below steps for Add this widget

  1. Go to Blogger
  2. Take Backup of your Blog Template
  3. Search For <head>
  4. Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog

    5. Add Below JQuery inside the head tag only if yet you are not using Jquery script in your blog

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

  5. Now Add Below Given Code in your blog by add a widget option
    6. Below demo indicator
    Copy and Past Below Code in Your Blog

    <!-- Facebook Popup Widget START -->
    <style>
    #vktechzone-back {
    display:none;
    background:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    }
    #vktechzone-exit {
    width:100%;
    height:100%;
    }
    #vktechzone1 {
    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;
    }
    #vktechzone-fb-popup {
    float:right;
    cursor:pointer;
    height:15px;
    padding:20px;
    position:relative;
    padding-right:40px;
    margin-top:-20px;
    margin-right:-22px;
    }
    .vktechzone-fb-like {
    height:1px;
    width:366px;
    margin:0 auto;
    background:#F3F3F3;
    margin-top:16px;
    position:relative;
    margin-left:20px;
    }
    #linkit,#linkit a.visited,#linkit a,#linkit a:hover {
    color:#80808B;
    font-size:10px;
    margin: 0 auto 5px auto;
    float:center;
    }
    </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'){
    $('#vktechzone-back').delay(20000).fadeIn('medium');
    $('#vktechzone-fb-popup, #vktechzone-exit').click(function(){
    $('#vktechzone-back').stop().fadeOut('medium');
    });
    }
    $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
    });
    </script>
    <div id='vktechzone-back'>
    <div id='vktechzone-exit'>
    </div>
    <div id='vktechzone1'>
    <div id='vktechzone-fb-popup'>Close
    </div>
    <div class='vktechzone-fb-like'>
    </div>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
    href=http://www.facebook.com/vktechzone&width=402&height=255&colorscheme=light&
    show_faces=true&show_border=false&stream=false&header=false'
    style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
    <span id="linkit"><a href="http://www.vktechzone.com">Get This Widget</a></span></center>
    </div>
    </div>
    <!-- Facebook Popup Widget END-->

    Note:- Replace vktechzone with your Facebook page ID.

    How to Add Html/Java widget? Follow below steps to add Widget

    1. Go to Blogger
    2. Go to your blog Layout option.
    3. Now Select Add a Gadget option.
    4. Now select Html/Java Script option
    5. Now past the above code in Content area field and press save button.


      6. You may also like to try Facebook Floating Like box





Close
Subscribe to: Post Comments ( Atom )