© Don't Republish Any Article Of This Site √

11 May, 2013

Share To Enter Pop Up Box For Blogger


SOCIALIZE IT →
Share To Enter
How many of you guys are getting traffic from social networking sites? There are a lot of Bloggers or web masters which are getting handsome traffic from social sites because now a days these sites are an important source of getting traffic and almost every internet user is using social sites. Well, let's come to our today's post which is about "Share To Enter" pop up box. This pop up box is really fantastic in getting traffic from social sites because when someone will enter to your blog/site. This pop up box will appear and the user will have to click on any social button to access your site. This pop up box is built with the 3 main social site buttons which are Facebook like button, Twitter tweet button and Google+ plus one button.

Some Great Features Of This Pop Up Box

  1. This widget has a close button which can allow your readers to dismiss this widget.
  2. This widget is working fine on every browser and it is cleaned widget.
  3. It has three main social buttons Facebook Like, Tweet and Plus one.
  4. This widget will only appear to those who is not following you on social sites and after the following it will disappear next time to that visitor.

Add Share To Enter Pop Up Box In Blogger

  • Go To Blogger >> Layout >> Add a Gadget
  • Choose HTML/JavaScript
  • Paste The Following Code In The Content Box and Leave The Title Empty.

<style>
.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;
}
</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="http://mytechcafe.googlecode.com/svn/trunk/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/mytechcafe',


  plusone: 'http://www.MyTechCafe.com/',


  count: 0,


  manualClose: true,


 });


 $('body').socialmodal({


  twitter: 'Itstechcafe',


  onclick: '#download',


  callback: function(success) {


  },


 });


});
</script>

  • Replace http://www.facebook.com/mytechcafe with your Facebook page URL.
  • Replace http://www.MyTechCafe.com/ with your blog URL.
  • Replace Itstechcafe with your twitter username.
  • Finally Click Save and You Have Done!

Last Words

So friends, I hope first widget will help you to increase your social followers and credits for this widget goes to MBL who developed this widget. If you have got any question then let me know in comments. Stay connected with us and Happy Blogging!

5 comments:

  1. Nice Post Man U R Doing Great Job Keep Posting

    ReplyDelete
    Replies
    1. Thanks brother. Stay connected with us for more great posts.

      Delete
  2. Bro how to lock its close button? I have tested it and we can close it without hitting the like button. Is there any solution for that.

    ReplyDelete
    Replies
    1. Brother! Removing the close button can really annoy your readers and it can break the relationship between your blog and your readers. I think this widget is good and in my opinion, you will get 90% likes from your visitors and 10% will be ignored by using close button. However, If you still want a pop up completely locked then tell me, I'll work for you.

      Delete
  3. In my opinion, showing a pop up like box on any blog is not a good way to increase followers/fans. It really irritates the visitors and you may loose valuable traffic. And ankit bro, you're trying to lock the close button there, it means you are forcing people to like your page. I don't think it suits for a good blogger like you dear :)
    I agree with mohammed bro.
    The Easy Tech

    ReplyDelete

 

Recent Comments

Recent Comments Widget

Recent Posts

Copyright © 2012-2013. All Rights Reserved | My Tech Cafe | Designed By

Home | Contact Us | About Us | Privacy Policy |Top