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


#1

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.


#2

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

-Thanks


#3

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>
<style>
#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;
}
</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_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
PLACE THE WIDGET CODE HERE
</div>
</div>

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.


#4

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


#5

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


#6

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


#7

@HassanTahir

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.


#8

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


#9

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


#10

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


#11

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


#12

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?


#13

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


#14

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


#15

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


#16

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


#17

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


#18

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


#19

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.


#20

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