Membuat Widget G+ (Google Plus) Melayang Valid HTML5 - Sebenarnya Widget ini sudah banyak yang share dan posting. di googlepun sudah banyak. tapi sekarang saya akan share Share Google Plus G+ yang VALID HTML5. Karena yang saya temukan di luar sana banyak yang tidak VALID HTML5.dan Membuat widget ini pun tidak cukup susah hanaya memerlukan beberapa kode CSS dan Javascript Beserta dengan Jquerynya.
Sebelum Valid HTML5
Sesudah Valid HTML5
Membuat Widget G+ (Google Plus) Melayang Valid HTML5
- Pertama Seperti biasa, kalian harus masuk dulu ke akun blogger kalian.
- Buka Tab Template.
- Cari kode ]]></b:skin> atau tag </style> sesuai template anda.
#box-message{ position:fixed!important;top:-1000px;left:50%;width:300px;height:auto; background:#fff; font:normal Dosis, Georgia, Serif;color:blue; border:2px solid blue;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);box-shadow:0 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;margin:0 0 0 -182px;padding:16px}#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:0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);box-shadow:0 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:22px;cursor:pointer}#twitterx{background:#EEF9FD;text-align:center;border:1px solid #C7DBE2;border-top:0;padding:10px}- Dan tambahkan Script Jquery tepat dibawah tag <body (Lewati Langkah ini jika template anda sudah ada Jquery nya)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- Dan satu lagi Simpan JavaScript Dibawah ini tepat Diatas </body>
<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>
- Jika Sudah, Buka tab Tataletak > Tambah Gadget Baru.
- Pilih HTML/JavaScript
- Masukan Kode dibawah Ini
<div id='box-message'>
<!-- HTML Start -->
<div style="text-align: center;">
<p style=" margin:10px; font-size:15px; color:#000; font-weight:bold;">Bantu saya vote +1 pada tombol google plus di bawah!!</p><div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdFAfbtH8wBBTYmoM1RYahCIdhXgyou1DpXnyAyYk-bthEVR0OqEx3ZDRjQPeFqldB-gUx1QBgb3Dz5XdvncvT6quOEwg9p8rkXV-1IFj1qjxQYW1lvJZmzK0qaWJpICp18KQvTDibdcJ/s300/Widget+Melayang+Google+Plus.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>
</div>
</div>
<a class='close' href='#'>×</a></div>
- Terakhir tinggal save.
Sekian artikel tentang Membuat Widget G+ (Google Plus) Melayang Valid HTML5. Jika ada Pertanyaan.Silahkan Lewat for Komentar dibawah
