Membuat Pop Up +1 Google+ Valid HTML5

          Membuat Pop Up +1 Google+ Melayang di blog anda dapat membantu anda mempromosikan blog anda kepada visitors yang berdatangan. Trafik secara otomatis akan bertambah. Baik itu trafik manusia maupun trafik bot. Trafik bot biasanya ditandai dengan bertambahnya 4US Flag di blog anda.

          Saat anda Membuat Pop Up +1 Google+ Melayang di blog anda, visitors akan langsung melihatnya melayang tepat ditengah-tengah layar. Pop up ini juga akan muncul setiap visitors membuka artikel maupun melakukan reload atau refresh di blog anda tersebut.

Cara Membuat Pop Up +1 Google+ Melayang
1. Login ke akun blogger anda.
2. Pergi ke Tata Letak ► Tambah Gadget ► HTML/JavaScript.
3. Copy paste script berikut di kolom yang besar. Judul dikosongkan saja.

<style type="text/css" scoped>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#000000;
font:normal Dosis, Georgia, Serif;
color:blue;
border:2px green;
-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;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, 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;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #000000;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"200px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<div style="text-align: center;">
<p style=" margin:10px; font-size:15px; color:#fff; font-weight:bold;">LEMBU ILMU</p>
<div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvSBPN0-LPROea-wLqwyohngN7xjZUuNX3nQF9TjhyWIxpsXQ78giR4O9R-HQzkpdVr5ikQmSOlQp9yhwSMHp1d0KUh6I06w96M6U_OWuKBwpDLa50sLErdqGhQVl0YrdYtj57k4lGpo/s1600/LEMBUILMU.BLOGSPOT.COM.png)no-repeat top left; width:283px; height:125px; padding-top:27px; text-align:left; padding-left:60px; margin-top:20px'>
<div class='g-plusone' data-annotation='inline' data-width='300'></div>
<script type='text/javascript'>
  (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);
  })();
</script>
</div>
<!-- HTML End -->
</div>
<div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><small><a href="http://lembuilmu.blogspot.com/2014/03/membuat-pop-up-1-google-valid-html5.html" target="_blank" title='widget follow us'>+ Get Widget </a></div></small><a class='close' href='#'>&times;</a></div>

Keterangan :
a. LEMBU ILMU adalah text yang ditulis secara acak. Dapat ditulis judul atau pesan. Anda dapat menggantinya sesuai dengan minat anda sendiri.
b. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvSBPN0-LPROea-wLqwyohngN7xjZUuNX3nQF9TjhyWIxpsXQ78giR4O9R-HQzkpdVr5ikQmSOlQp9yhwSMHp1d0KUh6I06w96M6U_OWuKBwpDLa50sLErdqGhQVl0YrdYtj57k4lGpo/s1600/LEMBUILMU.BLOGSPOT.COM.png adalah URL background. Anda dapat menggantinya sesuai dengan minat anda sendiri.
c. width:283px; height:125px; padding-top:27px; text-align:left; padding-left:60px; margin-top:20px adalah kode posisi dan ukuran tombol G+1. Anda dapat menggantinya sesuai dengan minat anda sendiri.
4. Klik "Simpan" setelah anda selesai mengedit text yang telah saya beri tanda.

Cara Membuat Pop Up Menjadi Valid HTML5
1. Login ke akun blogger anda.
2. Pergi ke Tenplate  Edit HTML.
3. Cari kode <b:include name='quickedit'/> Gunakanlah Ctrl+F untuk memudahkan pencarian anda.
4. Hapus kode tersebut setelah anda menemukannya.
5. Simpan template anda dan check blog anda.

Pop Up diatas bukan buatan saya sendiri. Saya menemukannya setelah melakukan blogwalking. Saya hanya sedikit memodifikasi bentuk pop up tersebut dan menghilangkan error pada HTML script diatas sehingga mengurangi sedikit error. Untuk Valid HTML5 sepenuhnya bisa menghapus kode <b:include name='quickedit'/> dan pop up akan menjadi Valid HTML5.

Semoga Bermanfaat ^_^