Tuesday, December 18, 2012

Social Welcome Popup Box With Social Share Using Jquery For Blogger

Social Welcome Popup Box With Social Share Using Jquery For Blogger

Hi All Of CBT Fans, After Long Time I Will Post Small Article for Your Blogger Blog's. This Hack For Popup Box, This Popup bov design using jquery and css, if any visitor on your site, he or she should like or tweet your fan page, its simple and quality hack, Follow This Steps To Don It

Check This Demo
Demo Blog

1. Go to Layout >> Add a Gadget >> Add a HTML/JavaScript Gadget.

After Add This Code To There


  • <style>
    #stp-bg{
     display:none;
     position:fixed;
     _position:absolute; /* hack for IE 6*/
     height:100%;
     width:100%;
     top:0;
     left:0;
     background:#000000; 
     z-index:998;
    }
    
    #stp-main{
     position:fixed;
     top:220px;
     _position:absolute; /* hack for IE 6*/
     display:none;
     width:450px;
     border:7px solid #2f2f2f;
     background:#fff;
     z-index:999;
            border-radius: 9px;
     -moz-border-radius: 9px;
     -webkit-border-radius: 9px;
     margin:0pt;
     padding:0pt;
     color:#333333;
     text-align:left;
     font-family:arial,sans-serif !important;
     font-size:13px;
    }
    
    #stp-title{
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
     font-size:18px;
     padding:13px 0 13px 15px;
    }
    
    #stp-close{
     float:right;
     font-size:14px;
     font-weight:bold;
     font-family:Verdana, Geneva, sans-serif;
     color:#777777 !important;
     margin:0 13px 0 0;
     border-bottom:0px !important;
     text-decoration:none !important;
    }
    
    #stp-close:hover{
     text-decoration:none !important;
    }
    
    #stp-msg{
     background:#4074CF;
     padding:10px 15px;
     color:#ffffff;
     font-family:Arial, Helvetica, sans-serif !important;
     font-weight:bold;
     line-height:20px;
    }
    
    #stp-buttons{
     margin:25px 0px 25px 120px;
     padding:0 0 0 15px;
    }
    
    #stp-bottom{
     padding:15px 10px;
     background:#EFEFEF;
     color:#95989F;
     border-top:1px solid #DDE0E8;
    }
    
    #stp-counter{
     font-size:11px !important;
     text-align:right;
     font-weight:bold;
    }
    
    .stp-button{
     float:left;
     width:120px;
    }
    
    .step-clear{
     clear:both !important;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript">
    </script>
    <script type="text/javascript" src="http://swflor.googlecode.com/files/jquery.stp.min.js">
    </script>        
    <script>       $(document).ready(function(){                                                           $().socialTrafficPop({                      timeout: 30,                    title: "Wellcome To Coolbthemes Demo Blog ",                  
    message: 'Please Like And  <em>Help Us To Grow</em>! ',                     google_url: "", google_size: "tall",                     fb_url: "https://www.facebook.com/fbpages0001",   fb_layout: "box_count",                     closeable: true,                      advancedClose: false,                      opacity: '0.45', twitter_on: true              
    });                  
    });      
    </script>
    
    
 Replace This Link "https://www.facebook.com/fbpages0001" With Your Fan page URL




 Now All Is Don

If you Have Any Question Please Comment Here

 Enjoy..!!

13 comments:

  1. its not working in my blog http://snehapoorvvam-shoukkathali.blogspot.com/

    ReplyDelete
    Replies
    1. Your Blog Have Already Jquery Version, Add This Code Without Jquery Js

      Delete
  2. can i have without the timer, one time only based on cache ?

    ReplyDelete
  3. Can you add this to other website? If yes where to add the code? In css or index or ?

    ReplyDelete
    Replies
    1. yes you can add this css, html and jquery code :)

      Delete
  4. Do you just add the whole code in the same page? Where exactly? Before or after the body tag? Can you describe it a bit better? I want to add it in joomla and wordpress sites.

    ReplyDelete
  5. mantap gan http://stafabandet.blogspot.com/

    ReplyDelete
  6. Hi for me it doesn't work...may I have make some mistake....I've obtained this 2 errors:
    FB.getLoginStatus() called before calling FB.init().

    ReplyDelete
  7. Its not working in my blog..... how to.... Without Jquery Js... please tell me bro..

    ReplyDelete
  8. not working to my blogspot: http://bettingonlen.blogspot.com/

    ReplyDelete