Membuat Widget Followers Blog agar Valid HTML5

  

Beberapa hari yang lalu saya menambahkan widget Followers Blog pada blog FebbryPattinson-Blog. Namun, ada keganjalan setelah saya menambahkan widget Followers Blog. Setelah menambahkan widget tersebut, saya melakukan cek validasi HTML5 blog ini di situs validator.w3.org dan ternyata saya mendapati hasil seperti berikut.

Ternyata kesalahan tersebut berasal dari widget followers blog yang baru saya tambahkan tadi. Setelah saya cari tahu masalahnya, ternyata masalah tersebut berasal dari kode <b:include data='post' name='postQuickEdit'/> (kode icon obeng) yang membandel atau tidak dapat dihapus. Setelah itu saya mencoba cara lain dengan menyalin kode widget followers blog melalui inspect element dengan sedikit beberapa penambahan. Dan hasilnya pun memuaskan. Setelah menggunakan cara ini saya kembali melakukan cek validasi HTML5 blog ini dan ternyata blog saya menjadi valid HTML5 atau tidak ada kesalahan dari widget followers blog tersebut. Langsung saja berikut tutorialnya.

Mengatasi Widget Followers Blog agar Valid HTML5

1. Login ke Blogger > Tata Letak > Tambahkan Widget Followers Blog yang asli dari blogger > Simpan Setelan.
2. Buka blog Sobat di tab baru.
3. Setelah itu tekan tombol CTRL+U lalu cari dan salin kode yang mirip dengan kode di bawah ini.

<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
    window.followersIframe = null;
    function followersIframeOpen(url) {
      gapi.load("gapi.iframes", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          window.followersIframe = gapi.iframes.getContext().openChild({
            url: url,
            where: document.getElementById("followers-iframe-container"),
            messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
            messageHandlers: {
              '_ready': function(obj) {
                window.followersIframe.getIframeEl().height = obj.height;
              },
              'reset': function() {
                window.followersIframe.close();
                followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d9215924029638889503\x26origin\x3dhttp://www.wahyupratama.com/\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjAwMDAwMCIGMDAwMDAwKgZGRkZGRkYyBjAwMDAwMDoGMDAwMDAwQgYwMDAwMDBKBjAwMDAwMFIGRkZGRkZGWgt0cmFuc3BhcmVudA%3D%3D");
              },
              'open': function(url) {
                window.followersIframe.close();
                followersIframeOpen(url);
              }
            }
          });
        }
      });
    }
    followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d9215924029638889503\x26origin\x3dhttp://www.wahyupratama.com/\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjAwMDAwMCIGMDAwMDAwKgZGRkZGRkYyBjAwMDAwMDoGMDAwMDAwQgYwMDAwMDBKBjAwMDAwMFIGRkZGRkZGWgt0cmFuc3BhcmVudA%3D%3D");
  </script></div>
</div>
</div>

4. Selanjutnya balik lagi ke menu Tata Letak lalu tambahkan widget HTML/Javascript.
5. Letakkan kode yang telah Sobat salin (Nomor 3) ke dalam widget HTML/Javascript tersebut.
6. Simpan Widget
7. Buka menu Template > Edit HTML > Lalu cari kode yang mirip dengan kode di bawah ini.

<b:widget id='HTML1' locked='false' title='Followers' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget> 

8. Setelah ketemu kode tersebut, ganti kode <b:includable id='main'>  sampai</b:includable> dengan kode di bawah ini.

     <b:includable id='main'>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable> 

9. Simpan Template

Silahkan lihat hasilnya dan cek validasi blog Sobat setelah melakukan tutorial ini. Semoga berhasil yaa. Kalau ada kendala silahkan berkomentar.