Subscribe For Free Updates!

We'll not spam mate! We promise.

Tuesday, October 1, 2013

Add Share To Enter Pop Up Box In Blogger

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.

How To Add Share To Enter Pop Up Box In Blogger?
  • First for All Go To Blogger.com > Design > Page Elements > Add a Gadget
  • Choose HTML/JavaScript from the list of the gadgets
  • Copy and paste the code below in the content box.

<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: 'https://www.facebook.com/SoftTechSpot',
  plusone: 'http://www.SoftTechSpot.BlogSpot.com',
  count: 0,
  manualClose: true,
 });
 $('body').socialmodal({
  twitter: 'HKashifJaved',
  onclick: '#download',
  callback: function(success) {
  },
 });
});
</script>

  • Replace https://www.facebook.com/SoftTechSpot with your Facebook page URL.
  • Replace http://www.SoftTechSpot.BlogSpot.com/ with your blog URL.
  • Replace HKashifJaved with your twitter username. 

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
Follow us →
Share It →

1 comments:

  1. I all the time used to study piece of writing in news papers but now as I am a user of net therefore from now I am using net for posts, thanks to web.
    website design

    ReplyDelete