Add Facebook Likebox popup with Subscription Profiles Widget for Blogger

CLICK EDIT HTML
SEARCH FOR

</head> tag and just before it, paste the JavaScript Codes given below.
(Note: If your template is already using Google JavaScript libraries link then please do not add it again.)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Step 3) Add CSS code now so search for ]]:</b:skin> and just before that code line, paste the whole CSS code given below.

/*----Coded by tips4tricx.blogspot.com----*/
#tips4tricx-fan-page {
display: none;
background: rgba(0,0,0,0.5);
width: 100%;
height:100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:99999999;
}
#tips4tricxr-fan-page .popup-box {
padding: 5px;
position: relative;
margin: 0 auto;
max-width: 280F9FF00;
}
#tips4tricx-fan-page .popup-box .exit-button {
float: right;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
margin-top: -26px;
margin-right: -20px;
}
#tips4tricx-fan-page .popup-box .exit-button:before {
content: "X";
padding: 5px 8px;
background: #FFFFFF;
color: #000000;
font-weight: normal;
font-size: 12px;
text-shadow: 0px -1px #000;
font-family: sans-serif;
border: 4px solid #EBF000;
border-radius: 50px;
box-shadow: inset 0px 1px #F9FF00;
}
#tips4tricx-fan-page .popup-box .tweetbox {
background: #EFF408;
font-size: 12px !important;input.wbt2 {
color:#333;
font: bold 14px Calibri,Rockwell,helvetica,sans-serif;
border:1px solid #a2ccdb;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-qpYZ6qtNl2DcvriSU2ML6cCezsgfSQMRdQgJgGcq8vbb0U_80HSwzHM2ZidRKXVQ3MB3XQyl1MrYSnBRfAioh3AKXSZFpHlAqsq5EVphIOQ_uPlX2ricbjaXY1LPusaJyzbBoF0q-U/s1600/postbg.png) repeat-x scroll left top;
cursor:pointer;
}
input.wbt2hov {
border:1px solid #a2ccdb;
background:#0090ff;
color: #fff;
}
/******Text Area of All Tools*******/
textarea {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-qpYZ6qtNl2DcvriSU2ML6cCezsgfSQMRdQgJgGcq8vbb0U_80HSwzHM2ZidRKXVQ3MB3XQyl1MrYSnBRfAioh3AKXSZFpHlAqsq5EVphIOQ_uPlX2ricbjaXY1LPusaJyzbBoF0q-U/s1600/postbg.png) repeat-x scroll left top;
width:100%;
color:#666;
font: normal 13px Georgia,Times,sans-serif, verdana;
border:1px solid #a2ccdb;
}

in: 0px; padding: 0px; vertical-align: baseline;"></body> tag and just before it, paste the HTML and JavaScript given below after making required changes.

<script src='https://googledrive.com/host/0B_PLgWpOK_wTWFpIcHRHWFNnV3c' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#twist-blogger-fan-page').delay(10000).fadeIn('medium');
$('.exit-button').click(function(){
$('#twist-blogger-fan-page').stop().fadeOut('slow');
});
}
});
</script>
<div id='fb-root'/>
<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.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id='twist-blogger-fan-page'>
<div class='popup-box'>
<div class='exit-button'/>
<div style='overflow: hidden !important;'><div class='fb-page' data-adapt-container-width='false' data-height='350' data-hide-cover='false' data-href='https://www.facebook.com/tipsandtricx' data-show-facepile='true' data-show-posts='false' data-width='450' rel='nofollow'/></div><div class='fb-like' data-action='like' data-href='https://www.facebook.com/tipsandtricx' data-layout='standard' data-share='true' data-show-faces='false' data-width='200'/><div class='g-person' data-href='//plus.google.com/u/0/107343093483010265925' data-layout='landscape' data-rel='author' data-showcoverphoto='false' data-showtagline='false' data-theme='dark' data-width='200'/>
<div class='g-follow' data-annotation='bubble' data-height='24' data-href='//plus.google.com/u/0/113810872614355200039' data-rel='publisher'/><div class='tweetbox'>
<a class='twitter-follow-button' data-lang='en' data-show-count='true' href='https://twitter.com/tipsandtricx' rel='nofollow'>Follow@tipsandtricx</a>
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
</div>
</div>
</div>

Customization of Facebook Page Plugin Popup Like Box

Time Delay: You can change the timing of popup box appearance by changing the value 10000 to higher or lowers. 1000 value = 1-second delay so 10000 value means popup box will appear after the 10 seconds of loading your blog. Find this code line given below and change the value.

$('#twist-blogger-fan-page').delay(10000).fadeIn('medium');

Set Cookies Expiry Days: You can set any number of days to expire the cookie so after those days, the popup box will reappear for the same user again. This way you can make it "one time Facebook popup like box" for your blogger readers by setting the higher number of days. Find out code line given below and change the default number of days which is 15 to any number you want.