Tuesday, April 2, 2013

Widgets

0

Popup social sharing Blogger widget

  • Tuesday, April 2, 2013
  • Unknown
  • Popup Sharing Google +, Twitter, Facebook widget for Blogger

    Social sites are very important as it bring lots of visits at a click,pop up sharing widget is one of the most used widgets,that helps to share your website or blog instantly.In past we discussed about how to create facebook like box for blogger.This very new pop up sharing widget include google plus,twitter and facebook like.

    Share to Enter This site Blogger widget

    This popup up social sharing blogger widget contains all 3 major social sharing buttons which automatically loads when visitors loads any page of that blog.To disable this widget User need to share all the 3 social media.Then the this widget shutdown for them util they clear their browser coolie.


    • Log in to blogger.
    • Then add a html/javascript widget.
    • Then paste the below code.
    <style type="text/css">
    .blackout {
     display: none;
     position:fixed;
     _position:absolute;
     width: 100%;
     z-index:10000;
     background-color:#000;
     margin: 0px;
     padding: 0px;
     left:0;
     top:0;
    }
    .blog4alsocialOuter {
     display: none;
     font-family: arial;
     color: #575E6D;
        font-size: 14px;
     line-height: 20px;
     background: rgb(73, 73, 73); /* The Fallback */
        background: rgba(0, 0, 0, 0.6);
        border-radius: 10px;
        left: 50%;
        padding: 7px;
        position: fixed;
     _position:absolute;
        top: 50%;
        z-index: 10001;
    }
    .blog4alsocial {
        background: none repeat scroll 0 0 #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        width: 460px;
    }
    .blog4alsocial .title {
        border-bottom: 1px solid #E5E8EF;
        font-weight: bold;
        font-size: 19px;
        font-weight: bold;
     padding:16px 15px 10px 15px;
     text-align:center;
    }
    .blog4alsocial .subtitle {
     margin: 0px;
     background:#2e6886;
     color:#ffffff;
     padding:4px;
     text-align:center;
     font-weight: bold;
     font-size: 15px;
    }
    .blog4alsocial .warning {
     margin: 0px;
     background:#cb2026;
     color:#ffffff;
     padding:4px;
     text-align:center;
    }
    .blog4alsocial .content {
     padding: 0px 15px;
        margin-top: 10px;
     line-height: 17px;
    }
    .blog4alsocial .share {
     padding: 0px 15px;
     margin:20px 0px 15px 0px;
     text-align:center;
     height: 24px;
    }
    .blog4alsocial .close {
     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbTD51vJm7VIkiOO04qBK83zz-drq3FpfeDN6Q6jRL7UrvJJ8re9Eo2c29uyXG23RpNx_mO0lStuIYNgrwSsbe9JeJGfyvL4QucN718mF38qxIhcMCoHotzDo7tBpyuOcW768WECl0NQ/s1600/close.png") no-repeat;
        cursor: pointer;
        height: 12px;
        position: absolute;
        right: 15px;
        top: 15px;
        width: 12px;
     display: none;
    }
    .blog4alsocial .button {
        float: left;
        width: 115px;
     line-height: 24px;
     height: 24px;
    }
    .blog4alsocial .like {
     margin-left: 15px;
    }
    .blog4alsocial .twttr {
     margin-left: 30px;
    }
    .blog4alsocial .plus {
     width: 90px;
     margin-left: 50px;
    }
    .blog4alsocial .footer {
     clear: both;
        background: none repeat scroll 0 0 #E8EAEF;
        border-radius: 0 0 3px 3px;
        border-top: 1px solid #DDE0E8;
        padding: 10px 0;
        color: #878D9C;
        text-shadow: 0 1px 0 #FFFFFF;
     text-align:center;
     font-size:13px;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      !window.jQuery && document.write('<script src="js/jquery.js"><\/script>')
    </script>
    <script src="http://apis.google.com/js/plusone.js" type="text/javascript" gapi_processed="true"></script>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
    <script src="http://platform.twitter.com/widgets.js"></script>
    <script src="https://blog4al.googlecode.com/files/share-to-enter-popup-widget.js" type="text/javascript"></script>
    <script src="https://blog4al.googlecode.com/files/jquery-cookie.js" type="text/javascript"></script>
    <script language="javascript">
    $(function() {
     $('body').blog4alsocial({
      uniqueName: 'autoloadmodal',
      subtitle: 'Like And +1 to Disable This Notification',
      facebook: 'http://www.facebook.com/blog4al',
      plusone: 'http://www.blog4al.com/',
      count: 0,
      manualClose: true,
     });
     $('body').blog4alsocial({
      twitter: 'blog4al',
      onclick: '#download',
      callback: function(success) {
      },
     });
    });
    </script>


    • Then change blog4al with you facebook page and website URL for blog give full URL then give twitter page URL.
    • Then save the widget.

    0 Responses to “ Popup social sharing Blogger widget ”


    *Important - If you want to be informed of any replies to your comment, check the "Subscribe By Email" before submitting. Please Do Not Spam

    Post a Comment