Modif Gadget Blogger menjadi HTML/JavaScript

Untuk menghilangkan rasa kangen saya pada kawan-kawan semua, karena hampir semingguan waktu saya tersita dengan kesibukkan di masyarakat yang tak bisa saya tinggalkan, sekarang saya akan berbagi lagi sama kawan tentang sesuatu yang ribet tetapi mengasyikkan hehehe :z
Bagaimana, apa kawan sudah siap !!! :r

Kawan, mungkin sudah banyak yang tahu cara membuat Recent Post dan Recent Comment dengan Gadget Feed RSS, tapi jumlah yang ditampilkan sangat terbatas yaitu 5 post saja. :s  :@
Masalah ini sudah diperbarui lagi [maksud saya kita bisa menentukan jumlah yang mau kita tampilkan] baik itu untuk Recent Post maupun Recent Comment, malahan untuk yang Recent Post ada yang bisa sampai menampilkan image yang juga bisa kita tentukan besar/kecilnya, letaknya di kanan atau dikiri :L
Tapi semuanya itu hanyalah sebuah Gadget kalau ditampilkan akan mengikuti lebar penempatan [default] dengan kata lain semakin banyak yang ingin kita tampilkan maka semakin banyak tempat [ketinggian] yang diperlukan, nah untuk mengatasi hal ini diperlukan scroll :)

Agar kawan nggak bingung, mari bersama-sama kita praktekkan caranya, sebagai contoh kita membuat Recent Comment dengan Gadget Blogger :
Tahap Pertama

• Pada Design Template / Perancang template kawan pilih Tambah Gadget
• Lihat di pinggir kiri - Klik Unggulan
• Scroll ke bawah dan Klik tanda tambah pada Recent Comment 

Selanjutnya sebelum kawan meng-Klik simpan adakan setting / edit seperlunya misalnya seperti :

• Angka 10 yang saya kurung dengan garis warna merah adalah jumlah komentar yang akan tampil
• Angka 200 yang saya kurung dengan garis warna biru adalah jumlah suku kata komentar, artinya kalau komentar orang lain panjang atau melebihi dari 200 suku kata, maka dibawahnya akan muncul kata continue
• Kotak warna putih dibawah Pratayang - Pembaruan adalah komentar - komentar yang akan ditampilkan sesuai dengan jumlah yang kawan buat.
• Terakhir Klik simpan dan lihat hasilnya.

Tahap Kedua :
Perhatikan Recent Commnent pada tampilan Blog kawan [Judul Recent Comment saya hilangkan] Klik kanan pada Komentar paling atas

• Klik tulisan Periksa elemen, perhatikan gambar disamping yang saya kurung dengan garis warna merah, letaknya paling bawah, maka akan kelihatan kode-kode seperti gambar disamping kanan ini 
• Klik kanan pada tulisan atau kode dengan latar belakang warna biru.
• Klik / Pilih tulisan Copy as HTML dan paste-kan pada Notepad atau tambah Gadget pada Design template yang hasilnya kurang lebih sebagai berikut ini :

<div class="widget Gadget" id="Gadget1">

<h2 class="title">Recent Comments</h2>

<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" src="http://www.google.com/friendconnect/script/friendconnect.js"></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.postFeed = "http://www.blogger.com/feeds/3505547188143804352/posts/default";

       

            holder.commentFeed = "http://www.blogger.com/feeds/3505547188143804352/comments/default";

       

          holder.currentBlogUrl = "http://tips-blogbego.blogspot.com/";

          holder.currentBlogId = "3505547188143804352";

     

        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-1iczd8znmg2l1" style="width: 100%; visibility: visible; " class="gadgets-gadget-container"><div id="gfc_iframe_609606437_0_body"><iframe id="gfc_iframe_609606437_0" name="gfc_iframe_609606437_0" style="width: 100%; height: 1325px; " frameborder="0" scrolling="no" allowtransparency="true" height="200"></iframe></div></div>

<script type="text/javascript">

    var skin = {};

    skin['FACE_SIZE'] = '32';

    skin['HEIGHT'] = "200";

    skin['TITLE'] = "Recent Comments";

    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["renderOpenSocialGadget"](

    {id: "div-1iczd8znmg2l1",

     height: 200,

   

       url: "http://gadgetsforblogger.googlecode.com/files/recent-comments-gadget.xml",

   

       "view-params": {"summaryLength":"400","numberOfPosts":"25"},

   

       "prefs": {"summaryLength":"400","numberOfPosts":"25"},

   

     site: "04409119796155361554",

   

     locale: 'in' },

     skin);

  </script>

<div class="clear"></div>

<span class="widget-item-control">

<span class="item-control blog-admin">

<a class="quickedit" href="http://www.blogger.com/rearrange?blogID=3505547188143804352&amp;widgetType=Gadget&amp;widgetId=Gadget1&amp;action=editWidget&amp;sectionId=main" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;Gadget1&quot;));" target="configGadget1" 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>

</div>

Keterangan :

• Jangan Copas kode diatas karena masing-masing blog punya kode ID yang berbeda [itu hanya contoh saja sebagai pembanding kawan]
• Hapus kode yang berwarna merah [paling atas] karena itu Judul Recent Comment atau ganti dengan kode berikut : 

<div style="overflow:auto; width:300px; height:200px; padding:10px;border:1px solid #eee">

• Simpan template kawan dan lihat hasilnya.
• Kalau kawan sudah benar dan sesuai apa yang saya paparkan tadi saya yakin dan percaya hasilnya seperti gambar / image disamping ini 

Semua ini hanyalah tips trik saja, dan kawan bisa melakukan hal sama pada Recent Post menjadi Daftar Isi
Kalau kawan merasa kurang jelas dengan pemaparan saya ini, silahkan sampaikan lewat kotak  komentar saya :d  :O