Validasi Html5 Blogger Share Button
Ternyata masih banyak blogger yang memakai tombol sharing default blogger. Tampilan blogger share button ini cukup mungil dan menarik, apalagi gambarnya memakai CSS Sprite. Namun sayang blogger share button ini cukup banyak memperlihatkan error dan warning pada validasi HTML5.
Error dan warning yang disumbangkan blogger share button ini berasal dari instruksi & pada link buttonnya dan button G+. Setelah aku cek, ada belasan error dan warning pada blogger share button ini. Bayangkan jikalau ini ditampilkan di homepage pada setiap post-nya. Tinggal dikalikan belasan error dengan jumlah post-nya, tidak mengecewakan banyak kan...?
Nah untuk itu aku akan memperlihatkan solusi bagi yang memakai blogger share button ini biar mengurangi error validasi HTML5 di blog Anda. Biasanya instruksi blogger share button akan menyerupai di bawah ini.
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</b:includable> Kode di atas akan menghasilkan link menyerupai di bawah ini pada setiap buttonnya.
http://www.blogger.com/share-post.g?blogID=8930362772176675616&postID=6331841241074388507&target=email Sebuah linknya mengandung 2 buah instruksi &, jadi errornya 2 x 4 button = 8 buah ditambah 4 error dan satu warning dari button G+ jadi jumlahnya 12 buah error dan 1 warning dari blogger share button ini. Untuk itu silahkan ganti instruksi blogger share button di atas dengan instruksi di bawah ini.
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><div class='g-plusone' data-size='medium'/></div></b:if>
</b:includable> Dengan instruksi di atas maka akan dihasilkan link menyerupai di bawah ini.
http://www.blogger.com/share-post.g?blogID=8930362772176675616&postID=6331841241074388507&target=email Untuk membuktikannya silahkan cek dulu validasi HTML5 blog Anda sebelum diganti kodenya dan lihat jumlah errornya, lalu silahkan ganti kodenya dan cek lagi jumlah errornya. Jika berkurang berarti kodenya bekerja dan coba klik tombolnya untuk memastikan linknya benar.
Jika dengan instruksi di atas, button G+ tidak muncul, silahkan tambahkan javascriptnya di atas instruksi </body>
<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> Selamat mencoba....
Sumber https://www.kompiajaib.com/
0 Response to "Validasi Html5 Blogger Share Button"
Posting Komentar