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

DEMO

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf_KrKg2dbvotLvxr4E8qQQrv8-CYpudyiT97Dd28oSc7TPLspCScL8GGfl6TL1hfr48KbIwWjUmCkajH_6Cn8kQdPFGSGQ6_2BCnR6mzHcuQPsgsHNX_3OhKKYkVG5tD4FNl-_oygPlM/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 :)