Advance Social Popup Box With Twitter Updates For Blogger

Social media is the best platform to promote your blog. Now a days most of the internet user are engaged  with social media like facebook, twitter, google+ and so on. In this way we can meet people with same niche. There are several widget made for blogger to keep your blog social, among them This Widget, which im going to share with you is a very nice and preety widget ever  i shared :), This is a Popup widget, which will help you to promote your blog. This is the customized widget of Popup facebook Likebox. This Popup is design using jquery and css, if any visitor on your site, he or she should like or tweet your fan page Subscribe your RSS and can see your twitter updates too. its simple and quality hack.

Demo

See Demo From Our Demo Page

Recommended Post For you

• Add Rounded Facebook Like Box
• Add Cute Social Subscription Slider
• Add Advanced Floating Facebook LikeBox
• Follow The Experience Widget For Blogger

How To add?

To add this widget is very simple, just Go to Layout >> Add a Gadget >> Add a HTML/JavaScript Gadget. Just Copy and Paste the code given below.

<!-- Advanced Facebook Like Box Pop Up Widget For Blogger @PokharaTech.com -->
<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}


#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 0px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 0px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 0px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLy3Yl2Boyn2QPR_vZBO-YS3mreIl7_FPBp0NlQMJUAP9kv-N3T5x0INzE2iCSdpKiqDJvsZU2ZgEPThoWAlAmMmDd2gJpxMdoTx-nqLGkRt1xJc728XFIbCCp0bNdmN8cZ2fvnufOE4/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihjDIOc6IfBi3MSvIxqWOypyLy8VkZtwHJT_SHs6ENMvrGkzdOLzD5uHo7gzgCE4gIbbdDq_knF3f6v3xGBSJ-UGxq-Of2mNxAlGQ5TdqJrLhCmvCGKbXRaxIHXCV5NG9AEU0uHAw17w/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLy3Yl2Boyn2QPR_vZBO-YS3mreIl7_FPBp0NlQMJUAP9kv-N3T5x0INzE2iCSdpKiqDJvsZU2ZgEPThoWAlAmMmDd2gJpxMdoTx-nqLGkRt1xJc728XFIbCCp0bNdmN8cZ2fvnufOE4/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLy3Yl2Boyn2QPR_vZBO-YS3mreIl7_FPBp0NlQMJUAP9kv-N3T5x0INzE2iCSdpKiqDJvsZU2ZgEPThoWAlAmMmDd2gJpxMdoTx-nqLGkRt1xJc728XFIbCCp0bNdmN8cZ2fvnufOE4/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihjDIOc6IfBi3MSvIxqWOypyLy8VkZtwHJT_SHs6ENMvrGkzdOLzD5uHo7gzgCE4gIbbdDq_knF3f6v3xGBSJ-UGxq-Of2mNxAlGQ5TdqJrLhCmvCGKbXRaxIHXCV5NG9AEU0uHAw17w/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLy3Yl2Boyn2QPR_vZBO-YS3mreIl7_FPBp0NlQMJUAP9kv-N3T5x0INzE2iCSdpKiqDJvsZU2ZgEPThoWAlAmMmDd2gJpxMdoTx-nqLGkRt1xJc728XFIbCCp0bNdmN8cZ2fvnufOE4/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLy3Yl2Boyn2QPR_vZBO-YS3mreIl7_FPBp0NlQMJUAP9kv-N3T5x0INzE2iCSdpKiqDJvsZU2ZgEPThoWAlAmMmDd2gJpxMdoTx-nqLGkRt1xJc728XFIbCCp0bNdmN8cZ2fvnufOE4/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLy3Yl2Boyn2QPR_vZBO-YS3mreIl7_FPBp0NlQMJUAP9kv-N3T5x0INzE2iCSdpKiqDJvsZU2ZgEPThoWAlAmMmDd2gJpxMdoTx-nqLGkRt1xJc728XFIbCCp0bNdmN8cZ2fvnufOE4/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-K-0Weocv1Kj0rtJgjIOoLZuLTA-NJuVTomqhyphenhyphenJYAvYMny3Zdmb8XXUGAKoEwxyH9pMIYBG0mmXGLQNJeRVnPhbeiRg9dqTFS4dIvZx8pK4yZ2CBWYirxhbTPEBrdHuyzQNZvg79VZk/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm6x6fybupq8qRoySWrWx0Wui6_g3YJaUmada2nY2GPAv_Qr7fU2U5PYViRMN8Jyndi3e7cDlQsirrqjhmmztwH7YiGuzUl_YJplGKC_XYkDQhGWVSz1G4YJNLx361PUctzhyG4a5w_K6Q/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLy3Yl2Boyn2QPR_vZBO-YS3mreIl7_FPBp0NlQMJUAP9kv-N3T5x0INzE2iCSdpKiqDJvsZU2ZgEPThoWAlAmMmDd2gJpxMdoTx-nqLGkRt1xJc728XFIbCCp0bNdmN8cZ2fvnufOE4/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}

.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}

.tweet {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmA9dQvm7iTGcX3RPoiYlLEKKAdOynwRd_xgv2X0X1Z3w9VNNaxAJO5jxLtV9IE0uBgFGMWRh5IHrD99dFO2h33Kv7JakIxmgUTc6iM14GdbGpRb6_wcY7UY-yLeMxdRe5mOBn_7O7ts/s1600/twitter.png") no-repeat scroll 1px 1px;
}
.fb {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgC8B_JDdcpZVb_QmxxQB8Gwvm2Q7G6ol2Oo7mO_b5TL-a7pS_ISiZd1NgGkR0S1_woYV6sPgEcP_r8WnGNMapYK3hrdiWyzY62SVnUBf5elUhpJV2iG4RRzVwZF_dflXI8nUuFD-Pso/s1600/facebook500.png") no-repeat scroll 1px 1px;
}
.feed {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimG8UGwMqX9w5UJHniWSsABg8p5lK_DamO-TUtKnQOqU3Pwpq_E7lW8gXfZpQfNAONbBJVWI1itE8zP3j67auWap0VwBc8t-4ZB0XAmYRrMwgV77XNMU1YKcrgOtVqesI1O41C_5kzUmg/s1600/rss.png") no-repeat scroll 1px 1px;
}
</style>
<script src='http://widcraft.googlecode.com/svn/jquery.min.js'></script>
<script src="http://widcraft.googlecode.com/svn/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*1;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px",height:"485px", inline:true, href:"#subscribe"});
}
});
</script>
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>

<center>
<div class="tbisubscribe">
<div class="fb" style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">Like Us On Facebook</div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpokharatech&width=318&height=65&colorscheme=light&show_faces=false&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:318px; height:65px;" allowtransparency="true"></iframe>
</div>


<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbisubscribe'>
<div class="feed" style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Subscribe To Us</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=pokharatech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='pokharatech' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' 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 alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;text-align:left;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='http://www.facebook.com/pokharatech' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgC8B_JDdcpZVb_QmxxQB8Gwvm2Q7G6ol2Oo7mO_b5TL-a7pS_ISiZd1NgGkR0S1_woYV6sPgEcP_r8WnGNMapYK3hrdiWyzY62SVnUBf5elUhpJV2iG4RRzVwZF_dflXI8nUuFD-Pso/s1600/facebook500.png' alt='facebook'/></a>
<a href='http://www.twitter.com/PokharaTech' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmA9dQvm7iTGcX3RPoiYlLEKKAdOynwRd_xgv2X0X1Z3w9VNNaxAJO5jxLtV9IE0uBgFGMWRh5IHrD99dFO2h33Kv7JakIxmgUTc6iM14GdbGpRb6_wcY7UY-yLeMxdRe5mOBn_7O7ts/s1600/twitter.png' alt='twitter'/></a>
<a href='http://plus.google.com/113706905512320214162/' rel='nofollow' target='_blank'
title='Follow Us On Google Plus'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUK4qBIPu6KJHTGhFgcwlOPHJ7_yMFMSYPgxlF7Nr75tpJ9b2OYqtu_smHS7POXFFqqlLyi0Ry3GVesaEcADgbspq4VaT-O9U3ZN_d0oE6o1c0p0m8Rf83ArVCVGlz3hm1P7dhex3Pls/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/PokharaTech' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLq2A8L3QG8CpudTyNmj83MjKode_SKytuapOJVxC27dw2eQ0HYjaDKr5uwoB0Zr0S0ma32BIXy6WPGHlPnOkDKnQ82NIK7vORoJNbSBMPInIoP3F2_BkW4LZrMD1jM9KQEdhHpjU0e7g/s1600/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/pokharatech' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimG8UGwMqX9w5UJHniWSsABg8p5lK_DamO-TUtKnQOqU3Pwpq_E7lW8gXfZpQfNAONbBJVWI1itE8zP3j67auWap0VwBc8t-4ZB0XAmYRrMwgV77XNMU1YKcrgOtVqesI1O41C_5kzUmg/s1600/rss.png' alt='rss'/></a>
</div>
</div>
<!--Extra Ordinary Social Subscription Widget-->
<div class="tbisubscribe" >
<div>
<div class="tweet" style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">We Also Tweet</div>
<ul id="twitter_update_list" style="list-style:none;text-align:left;"></ul>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'></script>
<script src='http://twitter.com/statuses/user_timeline/PokharaTech.json?callback=twitterCallback2&count=1' type='text/javascript'></script>
</div>
</div>
</center>
<p style=" float:right;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.PokharaTech.com">PokharaTech</a></p>
</div>
</div>
<!-- Facebook Like Box Pop Up Widget For Blogger @ Pokharatech.com -->

Costomization

• Replace pokharatech with your related social and feed burner username.
• Replace PokharaTech with your Twitter and Pinterest Username.
• Replace 113706905512320214162 With your Google Plus User ID.

Now Save HTML/JavaScript, All done.

From The Editors Desk

There are several social popup widget available in blogsphare but this is one of the best widget to keep your visitor  engaged with your social profile.As like another social pop ups it will not show every time visitor click on new page. it will show only one time per day. Isn't it awesome? if you like this widget please make share with your friends, if you face any problem during costomization, please let us know via comment box below. Peace, happy blogging.