Mengganti Komentar Blogger Jadi Komentar Google+ Responsive

Setelah sekian usang coba utak-atik komentar Google Plus supaya dapat responsive dikala dipasang manual di blog, kesannya kemarin saya berhasil menciptakan komentar Google Plus menjadi responsive dengan tunjangan sebuah javascript sederhana sehingga dapat dipasang manual di template responsive secara mudah. Namun dapat juga dipakai di blog yang memakai template dinamis.

Baca juga: Akhirnya! Google Plus Comments Bisa Responsive

Nah kali ini saya akan sharing cara gampang mengganti komentar Blogger menjadi komentar Google Plus responsive dan memindahkan pesan komentar yang biasanya ada di atas editor komentar Blogger menjadi berada di atas komentar Google Plus menyerupai pada demo di link demo di bawah ini.

DEMO

Sebenarnya ada 2 pilihan yang dapat kita lakukan, diantaranya.

1. Menyembunyikan komentar Blogger dan menampilkan komentar Google Plus. Dengan ini akan memudahkan Anda kalau ingin kembali memakai atau menampilkan komentar Blogger kembali.
2. Menghapus komentar Blogger dan menggantinya dengan komentar Google Plus dan berniat hanya akan memakai komentar Google Plus seterusnya. Di pilihan ini kita menghapus aba-aba CSS dan aba-aba HTML komentar Blogger. Dengan pilihan ini kita harus kembali membubuhkan aba-aba CSS dan HTML komentar Blogger lagi dikala ingin kembali memakai komentar Blogger.

Pilihan 1

Menyembunyikan komentar Blogger dan menampilkan komentar Google Plus.

Langkah 1

Silahkan tambahkan aba-aba display:none pada aba-aba CSS komentar Blogger menyerupai di bawah ini.

 #comments{........;display:none}

Langkah 2

Silahkan cari aba-aba di bawah ini

 <b:includable id='post' var='post'>

lalu geser ke bawah dan cari penutupnya </b:includable> dan simpan aba-aba di bawah ini sempurna di atas aba-aba epilog tadi.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='komentar'>
       <p><data:blogCommentMessage/></p>
       <div id='g_comments' style='width: 100%'>
 <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='620' expr:data-href='data:blog.canonicalUrl'>
 </div></div>
 <script type='text/javascript'>
     document.getElementsByClassName(&#39;g-comments&#39;)[0].setAttribute(&#39;data-width&#39;, document.getElementById(&#39;g_comments&#39;).clientWidth);
     </script>
 </div>
 </b:if>

Perhatikan kode <p><data:blogCommentMessage/></p> itu yaitu aba-aba untuk menampilkan pesan komentarnya.

Langkah 3

Silahkan tambahkan aba-aba CSS di bawah ini

 .komentar{margin:70px auto 20px;padding:5px 20px 0; line-height:1em;border-top:1px solid #ddd;}
 .komentar p{background: #666;padding:10px;margin:20px 3px;color:#eee;font:14px "Open Sans","Trebuchet MS",Helvetica,sans-serif;line-height:20px;display:block;border-radius:3px;position:relative}
 .komentar p:after{content:"";width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent;}

Jika tampilannya kurang sesuai dengan template blog Anda, silahkan sesuaikan pada aba-aba CSS di atas, begitu pun untuk tampilan kotak pesan komentarnya. 

Jika ingin kembali memakai komentar Blogger dan menyembunyikan komentar Google+ silahkan hapus aba-aba display:none pada Langkah 1 di atas, dan tambahkan aba-aba display:none pada aba-aba CSS .komentar di atas. Namun perlu diingat, kalau komentarnya dikembalikan ke komentar Blogger, maka komentar yang sudah ada di komentar Google+ tidak akan tampil di komentar Blogger. Namun sebaliknya kalau Anda menggunkan komentar Google+ maka komentar yang sudah ada di komentar Blogger akan tampil di komentar Google+.

Pilihan 2

Menghapus komentar Blogger dan menggantinya dengan komentar Google Plus.

Langkah 1

Silahkan hapus semua aba-aba CSS komentar Blogger blog Anda, contohnya menyerupai aba-aba di bawah ini.

 #comments{margin:70px auto 0;padding:5px 20px 0; line-height:1em;border-top:1px solid #ddd;display:none}
 #comments h3 {margin-bottom:25px;font:24px Oswald;text-transform:uppercase}
 .comment_avatar { height: 48px; width: 48px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLaokqX2xRD4JRE8Aa1FdpAp18Bn0II7UYYGAp9NU-QSq6ucrZq7akNFe7rcvHZWNvB7f-gRI3RzsR0gWprCaSHCavvj7wVLz5Ud3nI0BJncfB0tK6_w35daeofirNvrA9NLyr_hM8cg/s48/anon48.gif) no-repeat center center; float: left; margin-top: 5px; margin-right: 10px; margin-left:-30px;padding:4px;border:1px solid #ddd; overflow: hidden;transition:all 400ms ease-in-out }
 .comment_name { color: #444;font-size: 18px; font-weight: normal; line-height: 19.5px; max-width: 100%; text-decoration: none; margin-top: 8px;text-transform:uppercase }
 ........
 ........
 ........

Langkah 2

Silahkan cari aba-aba di bawah ini.

 <b:includable id='comments' var='post'>

lalu silahkan hapus aba-aba yang berada di bawahnya hingga aba-aba yang ada di atas penutupnya. Makara sisakan aba-aba di atas tadi dan penutupnya.

Langkah 3

Silahkan lakukan Langkah 2 dan Langkah 3 pada Pilihan 1 di atas.  

Dan bagi blognya yang memakai kode &lt;!--</body>--&gt;&lt;/body&gt; (di paling bawah aba-aba html template blog) maka harus menambahkan aba-aba js Google Plus menyerupai di bawah ini, kalau sudah ada maka lewati langkah ini.

 <script type='text/javascript'>
   (function() {
     var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
     po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
     var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
   })();
 </script>

Sumber https://www.kompiajaib.com/

Share this post