First Step:-
Go to Blogger=>Select Blog
Select Layout
Select Add a Gadget
Select HTML/JavaScript
Add Below Code in Content Box and Save it.
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--> |
Replace "https://www.facebook.com/karthikofficialpage" With your Facebook Page URL
And For Feed Burner Replace uri=blogspot/uXNEGG"
value='blogspot/uXNEGG'
Red marked text with your feedburner ID .
No comments:
Write comments