[Solved] How To Create Any Pop Up Widget In Blogger?


Hi Guys!

I have a code of a widget and i want to show it as a Pop Up Widget in Blogger. I searched it on Google but I was not able to find any solution. I want some code to turn any widget into a Pop Up Widget and it would be more better if it contains the Close Button.

Waiting for a Reply from the Experts.


Hello @HassanTahir Please Tell Me What type of popup you want to make like html page popup or like subscribing popup.



You can do it easily using the Facebook Pop up like box code. Just use bellow code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;

#fbox-close {
    width: 100%;
    height: 100%;

#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
<script type='text/javascript'>
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' : ''
// 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 type='text/javascript'>
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-button, #fbox-close').click(function(){
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
<div id='fbox-background'>
<div id='fbox-close'>
<div id='fbox-display'>
<div id='fbox-button'>

Change PLACE THE WIDGET CODE HERE with the widget you want on pop up. You can change the CSS. this widget was created by HelpLogger as a facebook pop up like box.

Thanks! Hope it’ll work.


I have already tried it but it did not worked. Please Tell Me an other way.


Try to add the code in html/javascript widget in layout :smile:


I have already tried it @ngtechzone Please give any other solution. Waiting for a reply from @Mohammad and @Templatezy



can you refer me any design or similar widget so that i know you want that similar widget/type.

Have you seen any widget or design part, please show me, i will definitely create it for you…thanks.


It’s a Facebook Page plugin and Twitter feeds widget.


Show me an example, which site integrated it, or show me the facebook plugin you are talking about.


@Templatezy It was the official facebook page plugin available at facebook developers page.


@Nafees Would you please help me? I need it Urgently.


Yes for sure! by reading the above replies I can Make a widget! Actually currently I am creating a Floating Subscribe box.

I would try to create that using Javascript but can you tell me what kind of code you want to implement?


Thank! @Nafees But now I have created it myself.


Wow :sweat_smile: ! cool :innocent: ! Congrats brother :smiley:


Thanks Brother, I would like to share it with you in PM


Sure! I looked it and I have some suggestions to tell you :grinning:


What are these suggestions @Nafees ? I would like to know about them.


When I looked up to your demo page it was appearing very messed I mean that its not in the proper form factor :relieved:


This is how id did that and it’s responsive too.

This is the main digit code.

<div class="main-content"><div class="overlay-bg"></div><div class="overlay-content popup1"> <!-- Your Widget Here --><button class="close-btn">Close</button></div>

This is the css code.

.main-content {    height: 800px;    width: 1000px;    margin: 0 auto;} .overlay-bg {    display: none;    position: absolute;    top: 0;    left: 0;    height:100%;    width: 100%;    cursor: pointer;    z-index: 1000; /* high z-index */    background: #000; /* fallback */    background: rgba(0,0,0,0.75);}    .overlay-content {        display: none;        background: #fff;        padding: 1%;        width: 40%;        position: absolute;        top: 15%;        left: 50%;        margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */        cursor: default;        z-index: 10001;        border-radius: 4px;        box-shadow: 0 0 5px rgba(0,0,0,0.9);    }     .close-btn {        cursor: pointer;        border: 1px solid #333;        padding: 2% 5%;        background: #a9e7f9; /* fallback */        background: -moz-linear-gradient(top,  #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e7f9), color-stop(4%,#77d3ef), color-stop(100%,#05abe0));        background: -webkit-linear-gradient(top,  #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);        background: -o-linear-gradient(top,  #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);        background: -ms-linear-gradient(top,  #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);        background: linear-gradient(to bottom,  #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);        border-radius: 4px;        box-shadow: 0 0 4px rgba(0,0,0,0.3);    }    .close-btn:hover {        background: #05abe0;    } /* media query for most mobile devices */@media only screen and (min-width: 0px) and (max-width: 480px){     .overlay-content {        width: 96%;        margin: 0 2%;        left: 0;    }}

And finally the Javascript.

 <script type='text/javascript'>
//<![CDATA[   $(document).ready(function(){     // function to show our popups    function showPopup(whichpopup){        var docHeight = $(document).height(); //grab the height of the page        var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling        $('.overlay-bg').show().css({'height' : docHeight}); //display your popup background and set height to the page height        $('.popup'+whichpopup).show().css({'top': scrollTop+20+'px'}); //show the appropriate popup and set the content 20px from the window top    }     // function to close our popups    function closePopup(){        $('.overlay-bg, .overlay-content').hide(); //hide the overlay    }     // timer if we want to show a popup after a few seconds.    //get rid of this if you don't want a popup to show up automatically    setTimeout(function() {        // Show popup3 after 2 seconds        showPopup(3);    }, 2000);      // show popup when you click on the link    $('.show-popup').click(function(event){        event.preventDefault(); // disable normal link function so that it doesn't refresh the page        var selectedPopup = $(this).data('showpopup'); //get the corresponding popup to show                 showPopup(selectedPopup); //we'll pass in the popup number to our showPopup() function to show which popup we want    });       // hide popup when user clicks on close button or if user clicks anywhere outside the container    $('.close-btn, .overlay-bg').click(function(){        closePopup();    });         // hide the popup when user presses the esc key    $(document).keyup(function(e) {        if (e.keyCode == 27) { // if user presses esc key            closePopup();        }    });});   //]]></script>

That’s All.


can I have a look upon its demo ? :smiley: