Cara Memasang Dua Kotak Komentar (Facebook & Blogger) Dengan Tombol Pilihan Di Blog

Sesuai dengan judul, saya akan berbagi tips cara pasangnya, cara yang saya posting ini murni hasil karya saya meskipun saya masih belajar (autodidak) dan awam dalam soal skrip-skripan, hehe...
Meskipun begitu saya selalu terus ingin berkreasi dan berbagi.

Oke tanpa panjang lebar, kita langsung saja..
Jangan lupa untuk mengawalinya agan diwajibkan senyum dulu, hehehe..titik dua de..

Penampakannya seperti gambar dibawah ini

Jika diklik tombol komentar facebook, maka akan terbuka kotak komentar facebook seperti gambar dibawah ini

Dan jika diklik tombol komentar blogger, maka akan terbuka kotak komentar blogger seperti gambar dibawah ini

Atau agan bisa lihat di blog saya ini.

Langkah-langkahnya sebagai berikut:

• Masuk ke akun blog agan
• Pilih template dan klik Edit HTML
• Centang "Expand Template Widget"
• Cari code </head> kemudian masukan code di bawah ini di atas code </head>
  
  <link href='http://rajawally-intermezo.webs.com/css/iconcomment.css' type='text/css' rel='stylesheet'></link>
  <script src='http://rajawally-intermezo.webs.com/JS/iconcomment.js' type='text/javascript'></script>
  

  <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
  Catatan: jika agan pernah menambahkan script dari facebook sperti yg dibawah ini di template blog agan:
  
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "http://onnect.facebook.net/id_ID/all.js#xfbml=1&appId=NO_AppId_FB_ANDA";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  Maka code yang berwarna pink gak perlu dipasang, tapi kalau belum pernah code yang berwarna pink harus dipasang
  
• Langkah berikutnya cari code ini:  <div class='comments' id='comments'>  Umumnya ada dua code, masukan code dibawah ini dibawah kedua code tersebut:
  
  <div class='tmb-komentar' id='fb-comments' onclick='epbekmt()' title='Comments with Facebook'><div class='icontba' id='iconidfb'><img class='tmb-komentar-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url' id='shania'></fb:comments-count> komentar</div><div class='iconntba' id='iconnidfb'><img class='tmb-komentar-iconn' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/> Tutup komentar</div></div>
  <div class='tmb-komentar' id='blogger-comments' onclick='blgkmn()' title='Comments from Blogger'><div class='icontba' id='iconidbg'><img class='tmb-komentar-icon' src='http://www.blogger.com/img/icon_logo32.gif'/><span id='shaniar'><data:post.numComments></data:post.numComments></span> komentar</div>
  <div class='iconntba' id='iconnidbg'><img class='tmb-komentar-iconn' src='http://www.blogger.com/img/icon_logo32.gif'/> Tutup komentar</div></div>
  <div class='clear'/>
  </div>
  <div class='comments-page' id='rajawally-me' style='background-color:#edf3ff; height:300px; border:solid 1px #0076a3; border-radius:2px; padding:3px; display:none; overflow:auto'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='fb-root'></div>
  <fb:comments expr:href='data:post.url' num_posts='2' width='570px'></fb:comments>
  </b:if>
  </div>
  <div class='comments comments-page' id='intermezo-me' style='background-color:#eae7e7; height:300px; border:solid 1px #0076a3; border-radius:2px; padding:3px; display:none; overflow:auto'>
  Catatan: Sesuaikan ukuran lebarnya sesuai keinginan agan dengan merubah nilai yang berwarna biru, atau jika agan menginginkan tanpa kotak scroll, dalam style yang berwarna merah cukup isi dengan display:none (yang berwarna ungu) saja, maka isi style jadi seperti ini: style='display:none;'
  
Tapi kalau agan ingin dengan kotak scroll, cukup merubah nilai lebarnya saja.
• Kemudaian klik Save/Simpan Template
  
  Selesai..

Semoga bermanfaat...