Instantly share code, notes, and snippets.
Last active
August 29, 2015 14:19
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save Karthik128/450eda8e29c2769922cf to your computer and use it in GitHub Desktop.
Facebook Popup Like Box With Feedburner Newsletter Subscription
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript" language="javascript"> | |
function ccpop() | |
{ | |
document.getElementById("overlay").style.display = 'block'; | |
} | |
window.onload = ccpop; | |
</script> | |
<!--http://karthiktechfreak.blogspot.in/ Popup Like and Subscribtion Box--> | |
<style> | |
@import url(http://fonts.googleapis.com/css?family=Electrolize); | |
#overlay { | |
background:url('http://4.bp.blogspot.com/-6nW7fK26v0Q/VO4CHaK134I/AAAAAAAAKCM/vVOfX9BsHoA/s1600/overlay.png'); | |
width: 100%; | |
height: 100%; | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index: 99999; | |
} | |
.fb-box { | |
box-shadow: 0px 0px 6px #ccc; | |
-webkit-box-shadow: 0px 0px 6px #ccc; | |
-o-box-shadow: 0px 0px 6px #ccc; | |
background: #fff; | |
} | |
#ccpop { | |
position:fixed; | |
top: 50px; | |
width:300px; | |
margin-left:-150px; | |
left:50%; | |
height:auto; | |
border:5px solid #fafafa; | |
-moz-border-radius:3px; | |
-webkit-border-radius:3px; | |
border-radius:3px; | |
background: #fff url('http://3.bp.blogspot.com/-sM3Bsx_fA1s/TpA0he8PmyI/AAAAAAAABr0/MtUP_DWddp0/s000/body-pattern-1.png'); | |
padding: 15px; | |
z-index: 9999; | |
color: #333; | |
} | |
h2#ccpop-h2 { | |
font-size:12px; | |
color: #333; | |
text-shadow: 0px 1px 1px rgba(0,0,0,0.3); | |
-webkit-text-shadow: 0px 1px 1px rgba(0,0,0,0.3); | |
-o-text-shadow: 0px 1px 1px rgba(0,0,0,0.3); | |
-moz-text-shadow: 0px 1px 1px rgba(0,0,0,0.3); | |
font-family: 'Electrolize', Arial, sans-serif; | |
text-align:center; | |
text-transform:uppercase; | |
} | |
#ccpop-h2 img { | |
position: relative; | |
width: 20px; | |
top: 5px; | |
right: 3px; | |
} | |
#thebutton { | |
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7; | |
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7; | |
box-shadow:inset 0px 1px 0px 0px #54a3f7; | |
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7)); | |
background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%); | |
background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%); | |
background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%); | |
background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%); | |
background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%); | |
background-color:#007dc1; | |
-moz-border-radius:3px; | |
-webkit-border-radius:3px; | |
border-radius:3px; | |
border:1px solid #124d77; | |
display:inline-block; | |
cursor:pointer; | |
color:#ffffff; | |
font-size:13px; | |
padding:6px 47px; | |
text-decoration:none; | |
text-shadow:0px 1px 0px #154682; | |
font-family: Electrolize , Arial, sans-serif; | |
} | |
#thebutton:hover { | |
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1)); | |
background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%); | |
background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%); | |
background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%); | |
background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%); | |
background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%); | |
background-color:#0061a7; | |
} | |
#thebox { | |
padding:6px 69px; | |
margin: 10px 0px; | |
background: #fff url('http://2.bp.blogspot.com/-v5h4oiQZCYM/VIXBUFCbDEI/AAAAAAAAJxY/_wNsrurCw70/s1600/email_go.png') no-repeat right center; | |
-webkit-transition: all 0.30s ease-in-out; | |
-moz-transition: all 0.30s ease-in-out; | |
-ms-transition: all 0.30s ease-in-out; | |
-o-transition: all 0.30s ease-in-out; | |
outline: none; | |
border: 1px solid #d2d2d2; | |
font-family: Electrolize , Arial, sans-serif; | |
font-size:14px; | |
-moz-border-radius:3px; | |
-webkit-border-radius:3px; | |
border-radius:3px; | |
} | |
#thebox:focus { | |
box-shadow: 0 0 5px rgba(81, 203, 238, 1); | |
border: 1px solid rgba(81, 203, 238, 1); | |
} | |
.copyright { | |
float:right; | |
width: 110px; | |
} | |
.copyright a{ | |
font-size:10px; | |
color: #999; | |
font-family: Electrolize , Arial, sans-serif; | |
} | |
</style> | |
<div id="overlay" style="display:none;"> | |
<div id='ccpop'> | |
<h2 id='ccpop-h2'><img src="http://2.bp.blogspot.com/-zoUX4edfJXc/VIdLsHEEY6I/AAAAAAAAJyc/zBZKMB-Pl8A/s1600/facebook-messenger-like.png" />Like Our Facebook Fan Page</h2> | |
<div class='fb-like-pop'> | |
<div class="fb-box"> | |
<div id="fb-root"></div> | |
<script>(function(d, s, id) { | |
var js, fjs = d.getElementsByTagName(s)[0]; | |
if (d.getElementById(id)) return; | |
js = d.createElement(s); js.id = id; | |
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=580729428720958"; | |
fjs.parentNode.insertBefore(js, fjs); | |
}(document, 'script', 'facebook-jssdk'));</script> | |
<!--Facebook Page Username Which You Should Replace With Your Own--> | |
<div class="fb-page" data-href="https://www.facebook.com/karthikofficialpage" data-width="258" data-height="258" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/karthikofficialpage"><a href="https://www.facebook.com/karthikofficialpage">Karthik</a></blockquote></div></div> | |
</div> | |
</div><!--FB Like Box--> | |
<div class='subscribe-bottom'> | |
<h2 id='ccpop-h2'><img src="http://4.bp.blogspot.com/-VGGrj7uOYYg/VIdLsIOwN2I/AAAAAAAAJyY/iH-8KW9JjBI/s1600/rss-feed-submission.png"/>Subscribe For Free Email Updates</h2> | |
<!--The Subscribtion Box. Make sure you edit it before saving--> | |
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=blogspot/uXNEGG" , "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'> | |
<input name='uri' type='hidden' value='blogspot/uXNEGG'/> | |
<input name='loc' type='hidden' value='en_US'/> | |
<input class='emailinput' id='thebox' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' type='text' value='Enter your email'/> | |
<input id='thebutton' type='submit' value='Subscribe For Email Updates Now'/> | |
</form> | |
</div><!--subscribe--> | |
<hr width="300" align="center"/> | |
<div class="copyright"> | |
<a href="https://youtu.be/AL4nFXTqAJg"target="_blank" >Get This</a> | <a href="#" onclick="document.getElementById('overlay').style.display='none'">X Close This</a> | |
</div><!--Copyright--> | |
</div><!--ccpop--> | |
</div><!--Overlay--> | |
<!--End Of All--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment