Cara terbaru membuat widget follower blog valid HTML5

Setelah hari kamis kemarin saya sudah membagikan tutorial agar widget follow by email menjadi valid HTML5 sekarang kita masih akan membahas tutorial yang masih ada kaitannya lagi dengan valid HTML5 yaitu cara terbaru membuat widget follower blog valid HTML5. mungkin jika kalian mencari di pencarian google sudah banyak yang membuat artikel tentang cara membuat widget follower blog menjadi valid HTML5 dan kodenya bisa dibilang sedikit pula. tetapi, sedangkan yang akan saya bagikan kali ini adalah widget blog follower bawaan blogger yang sudah saya bikin valid HTML5. sebenarnya empat error html5 yang ada di widget blog follower bawaan blogger ini berasal dari kode di bawah ini :

<b:include data='post' name='postQuickEdit'/>

  Pasti kalian sudah tidak asing lagi dengan kode di atas. untuk menghilangkan errornya sebenarnya sangatlah mudah yaitu kita hanya perlu menghapus kode tersebut, tetapi setelah kita hapus dan kita klik simpan template terus kita keluar dari edit html dan masuk lagi ke edit html ternyata kode tersebut tetap ada lagi dan berkali-kali dicoba untuk di hapus tetap muncul lagi. mungkin kode tersebut mempunyai banyak nyawa he he. . maka dari itu saya akan bagikan widget blog follower yang valid HTML5 silahkan dibaca dan disimak baik-baik ya sobat.

Berikut ini tutorialnya :
1. Login ke blogger
2, Pilih template
3. Menuju tata letak
4. Tambahkan widget follower melalui tata letak dan simpan widget
5. Buka blog kalian di tab baru
6. Setelah itu kalian tekan Ctrl + U lalu cari dan salin kode yang mirip dengan kode di bawah ini ke dalam notepad :

<h2 class='title'>Followers</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<script type="text/javascript">
        if (!window.google || !google.friendconnect) {
          document.write('<script type="text/javascript"' +
              'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
              '</scr' + 'ipt>');
        }
      </script>
<script type="text/javascript">
      if (!window.registeredBloggerCallbacks) {
        window.registeredBloggerCallbacks = true;

       

       
        gadgets.rpc.register('requestReload', function() {
          document.location.reload();
        });

       
        gadgets.rpc.register('requestSignOut', function(siteId) {
         
          google.friendconnect.container.openSocialSiteId = siteId;
          google.friendconnect.requestSignOut();
        });
      }
    </script>
<script type="text/javascript">
   
    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};
       
         
           
           
              holder.currentPost = "http://www.blogger.com/feeds/2338053908648469715/posts/default/823738954893876629";
           
           
           
              holder.currentComments = "http://www.blogger.com/feeds/2338053908648469715/823738954893876629/comments/default";
           
            holder.currentPostUrl = "";
            holder.currentPostId = 823738954893876629
         
         
         
            holder.postFeed = "http://www.blogger.com/feeds/2338053908648469715/posts/default";
         
         
         
            holder.commentFeed = "http://www.blogger.com/feeds/2338053908648469715/comments/default";
         
          holder.currentBlogUrl = "http://shizenku.blogspot.com/";
          holder.currentBlogId = "2338053908648469715";
       
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height + 'px';
      }
    });

   
    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();
  }
  </script>
<div id="div-nwjqexx67y5h" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#000000";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "Arial";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-nwjqexx67y5h",
     height: 260,
    
    
    
     site: "05114586728307394973",
    
     locale: 'en' },
     skin);
  </script>
</div>
</div>
<div class='clear'></div>
</div>

7. Menuju tata letak lalu tambahkan widget HTML/Javascript baru
8. Buka notepad tadi atau yang ada di tutorial no.6 , Lalu salin kodenya dan taruh di widget baru ini.
9. Masih di dalam widget baru tadi, silahkan cari dan hapus kode yang hampir mirip di bawah ini yang letaknya di bagian paling bawah :

<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=2338053908648469715&widgetType=Followers&widgetId=Followers1&action=editWidget&sectionId=aside' onclick='return _WidgetManager._PopupConfig(document.getElementById("Followers1"));' target='configFollowers1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>

10. Simpan widget.
11. Setelah itu kalian hapus widget follower yang kita buat tadi pada langkah ke-empat.
12. Masuk lagi ke dalam edit html template
13. Cari kode yang hampir mirip di bawah ini :

<b:widget id='HTML1' locked='false' mobile='yes' title='Followers' type='HTML'>
mulai dari sini
sampai dengan
</b:widget>

14. Setelah kode di atas ketemu silahkan kalian ganti dengan kode di bawah ini :

  <b:widget id='HTML1' locked='false' mobile='yes' title='Followers' type='HTML'>
    <b:includable id='main'>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
  </b:widget>

15. Yang terakhir klik simpan template.

Selamat mencoba sahabat blogger semuanya. semoga artikel berjudul Cara terbaru membuat widget follower blog valid HTML5 ini bermanfaat buat kalian semua. happy blogging.