JQUERY: Automatic Timed & Self-Closing Facebook Popup Like Box For Blogger

How can you tell that a blog or a website is successful? Obviously, some would say that it depends on the traffic, but actually, traffic alone is not everything. Often the goal for a website is to generate sales, increase subscription rates, and develop loyal readership. Internet marketers are more familiar to this principle than any others are working online, and part of their success formula is the use of forceful and effective call to action, which is oftentimes contained in a pop-up box or lightbox.  Creating your own pop-ups for your website is not an easy task. You need to have knowledge of programming to be able to generate the codes that define your intended pop-up. Fortunately, for WordPress websites, there are many useful pop-up plugins available. Pop-ups actually are versatile, and can be used for many conversion related purposes.

So today i have write a tutorial on how to add popup like box with timer on blogger blog. You can set it for how long the widget/Plugin must display before disappearing automatically. It also includes a close option, we just trying to add some more features into code and update it as soon as possible. its a beta version please post your review below in the comment section. if you see any bug let us know we will try to fix that as soon as possible.

Live Preview

 

The plugin depends on jQuery, so be sure to include the library. Any recent jQuery version will do. We include plug-in file very similar to jQuery library file in the of the document.

1. Go to your blogger dashboard>> Template>> Edit Template

2. and add the following jquery link before closing or after opening tag.

 

 

 

Okay, we've completed adding JQuery now but we'll add a couple of styles to our Facebook Popup box.

 

3. again find the following code in your template.

 

]]>

4. and paste the below code before/above closing b:skin tag.

/*css for fbpopup*/

#fbpopupdata {
    background-color: none;
    position:absolute;
    z-index: 9999;
    display: none;
    padding: 0;
    border: 10px solid #446c95;
    -webkit-background-clip: padding-box;
/* for Safari */
    background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    width: 420px;
    height: 300;
    overflow: auto;
    left:50% !important;
    margin-left:-220px;
    margin-top:auto;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

#fbpopupdata span {
    font-size: 12px !important;
    font-weight: normal !important;
}

#fbpopupdata h1 {
    background: #446c95 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2EdoQs27ED3TSQhRkA4uswsF-ICja8jfJ-p9uW6s8DBEYHVIZb7F7btfi4vj41a_E7kij0ZJ1TADhyphenhyphen2tuyv3NeiIPchNIoDipnEJKoG_hGTmVba7JXfWZ3z7PQ4z8G2qVYM8OhHSYL14/s1600/aktechz-fb-lock.png) 98% 30% no-repeat;
    border: 0px solid #3b5998 !important;
    color: #FFF !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 5px !important;
    margin: 0 0 10px 0  !important;
    font-family: arial !important;
    overflow: hidden !important;
}

.fbpopupdatadata {
    font-size: 12px !important;
    font-weight: normal !important;
    height: 275px !important;
    padding: 1px !important;
    background: #fff !important;
    border-bottom: 0px solid #ddd;
    overflow: show !important;
}

#fbpopupdatafooter {
    text-align: right;
    font-size:12px;
    background: #F2F2F2 !important;
    height: auto !important;
    padding: 10px !important;
    overflow: hidden !important;
}

#fbpopupdatafooter p {
    text-align: right;
    font-size:12px;
}

#fbpopupdataclose {
    float: right;
    background-color: #446c95 !important;
    border: 0px solid #ccc !important;
    color: #fff !important;
    font-weight: normal !important;
    padding: 5px 35px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-family: arial !important;
    outline: none !important;
    font-size: 12px !important;
    margin: 0px !important;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
}

5. and last and final step, just paste the below before closing your tag.

Join Us On Facebook >Get Widget

Please Wait 60 Seconds
Close X

      

Top Blogger widget 2014 ▼

       

       

       
• 1. Floating Sharing Bar

                   
• 2. Facebook Poput Like Box

                   

       

       

Top SEO Articles ▼

       

       

       
• 1. Search Engines That Respect Privacy

                   
• 2. The SEO Tools That Help Boost Your Sites Traffic

                   

     

       

Top Best Blogger Template ▼

       

            

       
• 1. Blogger Beginner

                   
• 2. Premium Blogger Template

                   
• 3. Sky Blue Blogger Template

                   

       

       

Top Blogger Resources & Tools ▼

       

            

       
• 1. HTML Econder

                   
• 2. HTML Editor

                   

       

   

Troubleshooting for setting up for your blog

In the above html code we have created 4 accordion menu.

• Replace Highlighted in yellow with the name of the dorp down title.
• Replace Highlighted in Green with your Link anchor text.
• Replace hash (#) sign with your article (page) link.

So now we sure you want to add another dropdown, So then just add the following code after