Menu Close Menu

0 comments

Jquery Popup Widget 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 <head> of the document.

 

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

2. and add the following jquery link before closing </head> or after opening <head> tag.

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

 

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.

 

]]></b:skin>

 

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(http://4.bp.blogspot.com/-wbOyGFuANTQ/UVF1F4ouC4I/AAAAAAAABiA/RX4jNlICbjM/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 </body> tag.

 

<!-- Facebook POPUP LikeBox With Timer Code Start -->
<script type='text/javascript'>
jQuery(document).ready(function() {
function fbpopupdatafunc()  {
var sec = 60
var timer = setInterval(function() {
$("#fbpopupdatafooter span").text(sec--);
if (sec == 0) {
$("#fbpopupdata").fadeOut("slow");
clearInterval(timer);
}
},1000);
var fbpopupdatawindow = jQuery(window).height();
var fbpopupdatadiv = jQuery("#fbpopupdata").height();
var fbpopupdatatop = jQuery(window).scrollTop()+50;
jQuery("#fbpopupdata").css({"top":fbpopupdatatop});}
jQuery(window).fadeIn(fbpopupdatafunc).resize(fbpopupdatafunc)
//alert(jQuery.cookie('sreqshown'));
//var fbpopupdataww = jQuery(window).width();
//var fbpopupdatawww = jQuery("#fbpopupdata").width();
//var fbpopupdataleft = (fbpopupdataww-fbpopupdatawww)/2;
var fbpopupdataleft = 500;
//var fbpopupdatawindow = jQuery(window).height();
//var fbpopupdatadiv = jQuery("#fbpopupdata").height();
//var fbpopupdatatop = (jQuery(window).scrollTop()+fbpopupdatawindow-fbpopupdatadiv) / 2;
jQuery("#fbpopupdata").animate({opacity: "1", left: "0" , left:  fbpopupdataleft}, 0).show();
jQuery("#fbpopupdataclose").click(function() {
jQuery("#fbpopupdata").animate({opacity: "0", left: "-5000000"}, 1000).show();});});

</script>
<div id="fbpopupdata">
<h1>Join Us On Facebook <a style="font-size:12px; color: white; float:right; margin-right: 15px; text-align: inherit; text-decoration: none;" href="www.myblogger-tricks.com" rel="nofollow"
>Get Widget</a></h1>
<div class="fbpopupdatadata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F/mybloggerstricks&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div><div id="fbpopupdatafooter">Please Wait <span>60</span> Seconds<br/><a href="wwww.myblogger-tricks.com" target="_blank" id="fbpopupdataclose" onclick="return false;">Close X</a></div></div>
<!-- Facebook POPUP LikeBox With Timer Code End –>

 

Note:- Please change highlighted mybloggerstricks in yellow with your own facebook username..


Okay we've done it! Hope you enjoyed the tutorial and was helpful. The above code can be modified and enhanced as per your requirements.

If the content on this website somehow helped you to learn something new, please let others know about it by sharing it on your twitter page or on your Facebook page with your friends.

Read Article →

0 comments

Accordion screen shot

A lot of Blogger users are having problem getting the correct accordion menu to show up your blog recipes. In this tutorial I am going to show you how to add a jQuery accordion menu in blogger blog. Most of the time it is possible to create very functional website navigations with just CSS, but this time we are going to need a little jQuery magic to accomplish the accordion functionality. Before that, lets first talk a bit about why you would want to add accordion menu?  Well some people think that it will help with the SEO. But we think that the main reason why you would want to use them is to offer a better user experience on your site.

 

This tutorial requires you to have fair understanding of HTML, CSS.

 

Features: V 1.0

  • Standard Expand/Collapse functionality.
  • Activate/Deactivate whenever a 'click' event occurs.
  • The Accordion plugin provides support for unlimited number of levels.
  • The plugin could easily be customized and used with any website.
  • It allows multiple instances of the accordion on the same page.

and in future we will try to add some design update, functionality and much more..

 

Live Preview

 

How to add it to blogger blog

 

  1. Blogger: Go to Template > Edit HTML.
  2. Locate the ]]></b:skin> tag end of the style sheet.
  3. Copy the code below and insert it right above the tag.

#accor-wrap{
    width: 350px;
    font-family:Verdana, Geneva, sans-serif;
    margin-left: auto;
    margin-right: auto;
    }
.accordionButton {   
    width: 325px;
    float: left;
    background: #fff url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x bottom left;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    border-bottom: solid 1px #ddd;
    padding: 3px 0px;
    cursor: pointer;
    padding: 5px 10px;
    text-shadow: #fff 0px 1px 0px;
    }

  .accordionButton  span {
    float:right;
    margin-right: 10px;
    color:#555;
    border: 1px dotted #555;
    display:inline-block;
    }
.accordionContent {   
    width: 325px;
    float: left;
    background: #444;
    font-size:12px;
    display: none;
    padding: 5px 10px;
    margin: 0 auto;
    }
.accordionContent ul {
    float: left;
    width:300px;
    margin:0 auto;
    padding:10px 10px;
}
.accordionContent li {
    list-style: none;
    list-style-image: none;
}
.accordionContent li a {
    background: #555 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x 0 100%;
    display:block;
    font-family:Arial, sans-serif,Helvetica;
    font-size:12px;
    font-weight: bold;
    overflow:hidden;
    color:#555;
    border: none;
    text-decoration:none;
    position:relative;
    width:100%;
    line-height:20px;
    text-transform:capitalize;
    padding:5px 0 10px 5px;
    text-shadow:0px 1px px #fff;
        }
.accordionContent li a:hover{
    background: #b3b3b3 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-medium.png) repeat-x 0 100%;
    text-shadow:none;
    color: #fff;
    text-decoration:none;

}

 

  1. Locate the </head> tag in the middle of your template.
  2. Copy the code below and insert it right above the tag. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/JavaScript/Accordion.js"</script>

 

  1. Go to Layout.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it where you want to show gadget.
  7. Click Save button (top right hand corner).

    <div id="accor-wrap">
<!-- Dropdown 1 -->      

<div class="accordionButton">Top Blogger widget 2014 <span>&#9660;</span></div>
        <div class="accordionContent">
        <ul>
        <li><a  href="#" >1. Floating Sharing Bar</a></li>
                    <li> <a  href="#">2. Facebook Poput Like Box</a></li>
                    </ul>
        </div>
<!-- End Dropdown 1 -->

<!-- Start Dropdown 2 -->       

<div class="accordionButton">Top SEO Articles <span>&#9660;</span></div>
        <div class="accordionContent">
        <ul>
        <li><a  href="#"> 1. Search Engines That Respect Privacy </a></li>
                    <li> <a  href="#"> 2. The SEO Tools That Help Boost Your Sites Traffic </a></li>
                    </ul>
      </div>

<!-- End Dropdown 2 -->

<!-- Dropdown 3 -->


        <div class="accordionButton">Top Best Blogger Template <span> &#9660; </span> </div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >1. Blogger Beginner</a></li>
                    <li> <a  href="#">2. Premium Blogger Template</a></li>
                    <li> <a  href="#">3. Sky Blue Blogger Template</a></li>
                    </ul>
        </div>
     <!-- End Dropdown 3 -->  

<!-- Dropdown 4 -->

<div class="accordionButton">Top Blogger Resources & Tools <span>&#9660;</span></div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >1. HTML Econder</a></li>
                    <li> <a  href="#">2. HTML Editor</a></li>
                    </ul>
        </div>

<!-- End Dropdown 4 -->
    </div>

 

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

<!--end dropdown 4 –->

<div class="accordionButton">here is the title For your new dropdown <span>&#9660;</span></div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >here is your anchor text </a></li>
                    <li> <a  href="#">here is your anchor text </a></li>
                    </ul>
        </div>

 

We hope that you will find this article useful and it will help you create cool looking accordion menu. Have Any Questions? Leave them in comments below and don’t forget to share.

Read Article →