Inilah Tombol Pop Up Comment Yang Valid HTML5

Sudah beberapa hari ini saya terus membahas semua rahasia blog agar bisa valid HTML5. Baik itu versi desktop maupun versi mobile. Nah, pada artikel ini juga begitu. Saya akan membahas tentang valid html5. Mata saya tertuju pada tombol Pop Up Comment seperti yang pernah di bagikan oleh mas +Intan Sudibjo. Pop Up Comment itu sungguh sangat membantu saya dalam mengatasi problem pada kotak komentar yang tidak muncul pada versi mobile blog ini. Setelah memasang script yang di bagikan, ternyata script tersebut belum lulus uji valid html5 sepenuhnya. Lantas bagaimana cara mengatasi hal tersebut? Tentu script yang tadi mesti kita renovasi sedikit agar bisa valid HTML5 dan tetap mempertahankan fungsi dari script tersebut.

Inilah bentuk script yang telah lulus uji valid HTML5 :

<a expr:href='&quot;http://www.blogger.com/comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; +data:post.id+ &quot;&amp;amp;isPopup=true&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>
Tambahkan Komentar
</a>

Untuk pemasangan, tempatkan code tersebut dibawah <data:blogTeamBlogMessage/>. Ingat kode <data:blogTeamBlogMessage/> itu ada 4 buah dan pasang semua script tadi di bawah kode itu.

Agar mempercantik tampilan tombol Pop Up Comment, silahkan dihias dengan css sesuai imajinasi kamu masing-masing. Sebagai contoh :

<div id='popup-comment'>
---script Pop Up Comment yang Valid HTML5---
</div>

Sedangkan untuk CSSnya:

#popup-comment {text-align:center;font-weight:bold;background:#708B9F;border:1px solid #1A5580}
#popup-comment a, #popup-comment a:hover {color:#fff}
#popup-comment:hover {background:#8A9BA8}

Untuk pemasangan kode CSSnya diatas ]]></b:skin> atau </style>. Jika sudah selesai, selanjutnya simpan template kamu tadi.