How to Add Facebook Popup Like Box For Blogger

      

Hi Guys In this Post I will Show You How to Add Facebook Popup Like Box to Blogger

                Watch  Video For Detailed Instructions

Copy Code Below

	<script type="text/javascript" language="javascript">
	function ccpop()
	{
	document.getElementById("overlay").style.display = 'block';
	}
	window.onload = ccpop;
	</script>
	<!--CodingCrazy.com 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'>
	<!--Facebook Page Username Which You Should Replace With Your Own-->
	<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>
	<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-->
	<hr width="300" align="center"/>
	<div class="copyright">
	<!--Do not remove the credit-->
	<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-->

view raw Facebook Popup Like Box hosted with ❤ by GitHub

Replace "https://www.facebook.com/karthikofficialpage" With your Facebook Page URL