Wednesday, 12 February 2014

Add Like To Enter 'Social Popup Box' in Blogger


Social Networking Sites Are Great For spreading you blog and getting traffic from it today i will show you how you can increase you social presence with today tutorial.

LIKE TO ENTER SOCIAL WIDGET:

Today I Will Give You a Special Widget Which definitely increase your social presence on Facebook,Twitter and Google+ This Widget Comes With These Three Sites Like,Follow & +1 Button You Can Show it on your homepage when a visitor enters your site he see the box there is a close button when visitor click it the box will close but if you font want to show the close button its not a big problem i will show it later how to do it so lets get towards the tutorial.

PREVIEW


INSTALLATION

  • Head Over To Blogger.com
  • Sign in
  • Click on Template
  • Edit HTML
  • Search For ]]></b:skin>
  • Then Above it Paste The Following CSS Code:


    /*---MashArena.Blogspot.Com Like To Enter Advance Traffic POP ---*/ .blackout { display: none; position:fixed; _position:absolute; width: 100%; z-index:10000; background-color:#000; margin: 0px; padding: 0px; left:0; top:0; } .socialmodalOuter { 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; } .socialmodal { background: none repeat scroll 0 0 #FFFFFF; border-radius: 3px 3px 3px 3px; width: 460px; } .socialmodal .title { border-bottom: 1px solid #E5E8EF; font-weight: bold; font-size: 19px; font-weight: bold; padding:16px 15px 10px 15px; text-align:center; } .socialmodal .subtitle { margin: 0px; background:#2e6886; color:#ffffff; padding:4px; text-align:center; font-weight: bold; font-size: 15px; } .socialmodal .warning { margin: 0px; background:#cb2026; color:#ffffff; padding:4px; text-align:center; } .socialmodal .content { padding: 0px 15px; margin-top: 10px; line-height: 17px; } .socialmodal .share { padding: 0px 15px; margin:20px 0px 15px 0px; text-align:center; height: 24px; } .socialmodal .close { background: url("http://1.bp.blogspot.com/-Ke5ehk-86ic/UDjNPBFGGSI/AAAAAAAAE7Q/n_T4qfGD40U/s1600/close.png") no-repeat; cursor: pointer; height: 12px; position: absolute; right: 15px; top: 15px; width: 12px; display: none; } .socialmodal .button { float: left; width: 115px; line-height: 24px; height: 24px; } .socialmodal .like { margin-left: 15px; } .socialmodal .twttr { margin-left: 30px; } .socialmodal .plus { width: 90px; margin-left: 50px; } /* // cusomize position of elements */ .socialmodal .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; }

    /*---MashArena.Blogspot.Com Like To Enter Advance Traffic POP ---*/ Now After Adding The CSS Code Head Over To The HTML/JavaScript

    • Go to Layout
    • Click Add a Gadget
    • Now Scroll Down & Select HTML/JavaScript
    • And Paste The Following Code in It
    <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="http://mybloggerlab.com/Scripts/Sharetoenter.js" type="text/javascript"></script> <script src="http://mybloggerlab.com/Scripts/jquery.cookie.js" type="text/javascript"></script> <script language="javascript"> $(function() { $('body').socialmodal({ uniqueName: 'autoloadmodal', subtitle: 'Like And +1 to Disable This Notification', facebook: 'http://www.facebook.com/mybloggerlab', plusone: 'http://www.mybloggerlab.com/', count: 0, manualClose: true, }); $('body').socialmodal({ twitter: 'mybloggerlab', onclick: '#download', callback: function(success) { }, }); }); </script>

    CUSTOMIZATIONS

    Now Replace The Yellow Highlighted Links & Words With Your Own Social Sites link and Sentence if You Want To Remove The Close Button Change  manualClose: true,To manualClose: false,

    WHAT I WANT FROM YOU ?

    Hey I Post This Article Specially For You Now Its Your Turn To Give Me Some Credits Please Subscribe & Like Below & Comment Below It takes Only 5 Seconds :)

    1 comment: