JSFiddle - React, Tailwind, and code Playground
HTML
<div id='irvandevbox'>
<!-- HTML Start -->
<div style='text-align: center;'>
<p style=' margin:10px; font-size:15px; color:#000; font- weight:bold;'>Please Follow Me On Google Plus
, Thanks.</p>
<div class="g-person" data-href="//plus.google.com/+IrvanDevIce" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div>
<!-- HTML End -->
</div>
<small><div style='text-align:right; text-shadow:2px 2px 2px #adadad;'><a href='http://irvandev.blogspot.com' target='_blank' title='Get Widget'>+ Get This </a></div></small><a class='closex'>X</a>
</div>
CSS
#irvandevbox {
position:fixed !important;
position:relative;
top:100px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Roboto, Georgia, Serif;
color:blue;
border:2px solid black;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#irvandevbox a.closex {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Roboto, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
JavaScript
$(window).bind("load", function() {
// Page Loaded
$('#irvandevbox').animate({top:"200px"}, 1000);
// Close Button
$('a.closex').click(function() {
$(this).parent().fadeOut();
return false;
});
});
//gplus letakan dibawah <div class="g-person" data-href="//plus.google.com/+IrvanDevIce" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();