Validasi HTML5 Blogger Share Button

Validasi HTML5 Blogger Share Button

Bola Hero Gawai

Validasi HTML5 Blogger Share Button

Blogger Share Button
Ternyata masih banyak blogger yang menggunakan tombol sharing default blogger. Tampilan blogger share button ini cukup mungil dan menarik, apalagi gambarnya menggunakan CSS Sprite. Namun sayang blogger share button ini cukup banyak memberikan error dan warning pada validasi HTML5.

Error dan warning yang disumbangkan blogger share button ini berasal dari kode & pada link buttonnya dan button G+. Setelah saya cek, ada belasan error dan warning pada blogger share button ini. Bayangkan jika ini ditampilkan di homepage pada setiap post-nya. Tinggal dikalikan belasan error dengan jumlah post-nya, lumayan banyak kan...?

Nah untuk itu saya akan memberikan solusi bagi yang menggunakan blogger share button ini agar mengurangi error validasi HTML5 di blog Anda. Biasanya kode blogger share button akan seperti 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 + &quot;&amp;target=email&quot;' 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 + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' 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 + &quot;&amp;target=twitter&quot;' 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 + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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 + &quot;&amp;target=orkut&quot;' 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 seperti di bawah ini pada setiap buttonnya.

http://www.blogger.com/share-post.g?blogID=8930362772176675616&postID=6331841241074388507&target=email

Sebuah linknya mengandung 2 buah kode &, 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 kode blogger share button di atas dengan kode 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='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' 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='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' 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='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' 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='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=orkut&quot;' 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 kode di atas maka akan dihasilkan link seperti di bawah ini.

http://www.blogger.com/share-post.g?blogID=8930362772176675616&amp;postID=6331841241074388507&amp;target=email

Untuk membuktikannya silahkan cek dulu validasi HTML5 blog Anda sebelum diganti kodenya dan lihat jumlah errornya, kemudian silahkan ganti kodenya dan cek lagi jumlah errornya. Jika berkurang berarti kodenya bekerja dan coba klik tombolnya untuk memastikan linknya benar.

Jika dengan kode di atas, button G+ tidak muncul, silahkan tambahkan javascriptnya di atas kode </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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

36 Comments Add Comment

validasi lagi,,,
nice post, siap dicoba

Balas

Oh itu ternyata itu masalahnya kang.. :)

Kang saya udah hampir nyerah validasi blog saya. Masih banyak error yang blum bisa ditangani.
Di chek me juga banyak gambar yang tidak memiliki tag title. padahal udah saya beri tag semua. Mungkin Kang Adhy punya saran??

Balas

Hehehe iya mas silahkan dicoba :D

Balas

Baik banget kang Adhy sudah mau ngeshare validasi button share default dari blogger..ta coba kang
Terima Kasih ;)

Balas

Sepertinya masih ada masalah dengan css reset stylesheet na kang, teras javascript kanggo modif archive (tanda & tambah amp;) dan yang di atas kode google analityc, ada yang salah dengan kode FB (fb-root), untuk logo Gupitannya hilangkan satuan px pada height dan width-nya.

Edit lagi postingan Menghitung 1 Tahun Cahaya Dalam Satuan Jarak, jangan mengunakan tanda kutip pada paragraf pertama (untuk kata tahun cahaya)

Ada masalah pada tabel widget archive kalender.

Hapus quickedit pada widget kang.

Masalah pada widget footer untuk tulisan Welcome to dan Dapatkn informasi seputar Teknologi, Software dan Iternet dan tulisan email pada footer kanan, ada kode face untuk jenis hurufnya, langsung aja tulis pada style-nya seperti font:13px Gergia. dan pada tabelnya.

Balas

Saya nggak pakai widget sharing default dari blogger :D jadi cara ini buat di simak aja :-d

Balas

Karena saya lihat masih banyak yang menggunakannya dan belum valid mas :D

Balas

Siapa tahu kalau udah bisa valid, mas Ahmad tertarik untuk mencobanya.

Balas

gile.. bisa seteliti gini mas adhy.. benar2 deh.. julukan DUKUN PALITAN hehehehe...

Balas

Haturnuhun kang di cobian..
Muhun kang aya quickedit hiji di label tapi pami dihapus posisi widget jdi ancur kang. kumaha nya??

https://lh5.googleusercontent.com/-lwPbMjzCyHk/UnJPcDnVQ0I/AAAAAAAACOA/pyPTM4bbZVc/s1600/Widget.JPG

Balas

Cobi tentukan langsung tinggi widget content kanggo sidebar tempat labelna kang, misalnya .sidebar .widget-content {height:210px}

Balas

Heeehehe asal jangan dukun ca**l aja sis :D

Balas

Wah, tentang validasi lagi..
Mantap dah kang Adhy :)

Saya masih terus menunggu template buatan kang adhy selanjutnya :D

Balas

Pasti sudah keren valid lagi hehe .... kompli always lah kang

Balas

keren deh, cukup bermanfaat bagi blogger pemula seperti saya :)

Balas

wah saya gk pake share button dari blogger kang :D

Balas

kang kalau mau hapus share button yang begitu di blog saya gimana kang?

Balas

Iya nanti kalau ada ide yang unik mas :D

Balas

Heheheh iya kang biar semuanya valid :D

Balas

iya semoga bermanfaat....

Balas

Hehehehe iya mas ini bagi yang pakai atau yang tertarik untuk memakainya :D

Balas

Hapus kode ini

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

Balas

valid kamana cunah kang ?? hehe

Balas

Hehhehe valid ka susukan :D

Balas

:-bd kang....saya sudah ganti pakai kode dari kang adhy.
Mungkin ma nyomot share button di post selanjutnya

Balas

oh ya ngomong-ngomong tentang error, penyebab error yang ini apa ya????/

Line 53, Column 122: & did not start a character reference. (& probably should have been escaped as &amp;.)

…n.css?targetBlogID=5395351220485834014&zx=64eb2b4b-3a92-4e50-8b26-fbeded48bb89…


tanda " & " nya warna merah

Balas

kodenya di pastekan di bagian apa kang

Balas

Itu sepertinya dari CSS Reset Stylesheet Blogger mas :D Silahkan pakai trik untuk menyembunyikannya.

Balas

Hanya mengganti kode bawaan blogger aja mas :D

Balas

Ini artikel yang saya cari mas... langsung di coba he.. he...

Balas

Terima kasih Mas..errornya sudah berkurang,
Salam sukses:)

Balas

Gan , Sy sudah menggunakan cara pertama :
script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript


tetapi hasilnya tetap seperti yang dibawah

Error Line 18, Column 128: & did not start a character reference. (& probably should have been escaped as &.)
…n.css?targetBlogID=6673542326556106003&zx=6e2921fb-faf6-4789-a739-d0b727b2c0f1…

Blog : http://grosire-parfum.blogspot.com
Bisa di tolong gan, tinggal satu ini saja saya sudah Valid HTML, trims dlu

Balas

Perhatikan pada kode javascriptnya yang mas tulis itu ada 2 buah kode &
Nah tambahkan kode amp; pada masing-masing kode & menjadi seperti ini &amp;

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×