Cara Mengoptimalkan Komentar Blogger

Image: 1001tricks

Penasaran kan? cuuss simak tutorial cara mengoptimalkan komentar blogger dibawah ini

Menyortir Komentar Baru Blogger

Secara default, komentar blogger adalah dari terlama ke baru, aurealisa sendiri menerapkan dengan cara menyortir ke baru maupun lama.

Masukan kode dibawah tepat diatas <div id='comment-holder'>

    <div class='sort-comment'>
        <span class='sort-title'>Sort by</span>
        <div class='sortComment'>
           <select class='sort-option'>
              <option selected='selected' value='newest'>Newest</option>
              <option value='oldest'>Oldest</option>
           </select>
        </div>
    </div>

Tambahkan juga css berikut

.sort-comment{text-align:right}
.sort-comment .sort-title{font-size:14px;display:inline-block;margin-right:3px}
.sort-comment .sortComment{display:inline-block;position:relative}
.sort-comment .sortComment::after,.sort-comment .sortComment::before{position:absolute;right:7px;border-style:solid;border-width:4px;width:0;height:0}
.sort-comment .sortComment::after{top:2px;border-color:transparent transparent #333}
.sort-comment .sortComment::before{bottom:2px;border-color:#333 transparent transparent}
.sort-comment .sortComment.sort-option{cursor:pointer;background:#fff;border:1px solid #aaa;padding:2px 20px 2px 7px;color:#656565;font-size:14px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-appearance:window;-webkit-appearance:none;outline:0}

Terakhir adalah memasukan javascript

// Short Comments Blogger
$.fn.reverseChildren=function(){return this.each(function(){var n=$(this);n.children().each(function(){n.prepend(this)})})},$(".comments-content ol").reverseChildren(),$(".sort-option").on("change",function(){$(".comments-content ol").reverseChildren()});

Simpan dan lihat perubahan.

Menambahkan Gambar dan Youtube di Komentar Blogger

Cara ini sangat saya rekomendasikan untuk meningkatkan blogger pada pencarian google

// Image Youtube Comments Blogger
const img=/\b(http(?:s)?:\/\/\S+(?:png|jpe?g|gif|bmp|svg|tif)\S*)\b/gi,ytb=/(http:|https:)?\/\/(www\.)?(youtube.com|youtu.be)\/(watch)?(\?v=)?(\S+)?/gi;for(var cmts=document.getElementsByClassName("comment-content"),i=0;i<cmts.length;i++){var a=cmts[i].innerHTML;if(img.test(a))for(var c=a.match(img),j=0;j<c.length;j++)a=a.replace(c[j],"<img src='"+c[j]+"'/>");if(ytb.test(a))for(var d=a.match(ytb),k=0;k<d.length;k++)a=a.replace(d[k],"<div class='embed'><iframe src='https://www.youtube.com/embed/"+d[k].split("=")[1]+"' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen=''></iframe></div>");cmts[i].innerHTML=a}

Menghapus Profil Komentar Blogger

Cara ketiga dari cara mengoptimalkan komentar blogger adalah dengan menghapus profil yang orang, cara ini terbukti ampuh untuk mencegah terjadinya broken link pada postingan

// Remove Profile Link in Blogger Comments
!function(){if(document.querySelector("#comments .comments-content"))for(var e=document.querySelectorAll(".comment-block .user a"),n=0;n<e.length;n++){var t=e[n].text,o=e[n].parentNode,c=document.createElement("span");c.innerHTML=t,e[n].remove(),o.appendChild(c)}}();

Memperbaiki Tombol Reply Blogger

Yang terakhir mungkin kamu punya cara sendiri, dari mengubah js dan css bawaan blogger, ataupun mengaktifkan, namun tenang, aurealisa mempunyai script yang mungkin bisa membantu kamu dalam mengatasi tombol balas komentar blogger. Catatan : Script dibawah kadang berhasil kadang ngga, kamu bisa mencoba nya sendiri nanti

// Blogger Comments Fix
$(window).on("load",function(){function t(t,o){$(t).each(function(){var t=$(this);t.on("click",function(e){$(".comment-actions,.cancel-comment").show(),e.preventDefault();let c=t.parents(o).attr("id").substr(1),m=n.split("?");$("#comment-editor")[0].src=m[0]+"?parentID="+c+"&"+m[1],t.parent().hide(),t.parents("li").append($(".comment-form")[0])})})}$(".comment-form").append('<a class="cancel-comment" style="font-family:Roboto,sans-serif;font-weight:700;font-size:12px;color:#ff0000;cursor:pointer;">CANCEL</a>'),$(".cancel-comment").hide();const n=$("#comment-editor-src").attr("href");$(".comment-block[id]").length?t("a[o='r']",".comment-block"):t(".comment-reply","li"),$(".cancel-comment").on("click",function(){$(".comment-actions").show(),$("#comment-editor")[0].src=n,$(".comment-form").append($("#comment-editor")),$(".comments-content").after($(".comment-form")[0]),$(this).hide()})});

Membuat Lazy Load Pada Komentar Blogger

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

hapus expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' sehingga tidak dapat membuat iframe, berikan class agar dapat ditransmisikan kembali dan contoh id yang saya atur adalah class='comment-editor-src'. Setelah menghapus dan menambahkan class untuk tag a akan sebagai berikut

<a class='comment-editor-src'/>

Kemudian hapus

<data:post.cmtfpIframe/>
<script type='text/javascript'>
  BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>

Dan menggantinya dg kode berikut

<script type="text/javascript">
// Lazy load Komentar blog by Aurealisa
$(window).on(&quot;load&quot;,function(){
var df_if = &quot;<data:post.commentFormIframeSrc/>&quot;;
//<![CDATA[
$(".comment-editor-src").attr("href", df_if).attr("id","comment-editor-src");

// Tempel semua kode dari https://www.blogger.com/static/v1/jsbin/xxx-comment_from_post_iframe.js samkpai di sini

//]]>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
});
</script>

Kesimpulan

Itulah tutorial cara meningkatkan komentar blogger agar lebih optimal di mata google, Note: Javascript sepenuhnya telah diminify. Cara di atas adalah pengalaman yang saya pelajari dalam proses meningkatkan kinerja halaman blog Aurealisa ini..

Catatan: Kamu ingin copas? cantumkan sumber nya GOBLOG

Alternatif lain adalah membuat CommetForm.js meload setelah di scroll menggunakan script dibawah ini dan menambahkan kelas nya.

(function(b,f){function k(a){var c=b.createElement("style");c.type="text/css";a=b.createTextNode(a);c.appendChild(a);a=b.getElementsByTagName("script")[0];a.parentNode.insertBefore(c,a)}function d(){if(!1===g){g=!0;k("#floatingCirclesG{position:relative;width:128px;height:128px;transform:scale(.6);margin:0 auto}.f_circleG{position:absolute;background:#fff;height:23px;width:23px;border-radius:12px;animation-name:f_fadeG;animation-duration:1.04s;animation-iteration-count:infinite;animation-direction:linear}#frotateG_01{left:0;top:52px;animation-delay:.39s}#frotateG_02{left:15px;top:15px;animation-delay:.52s}#frotateG_03{left:52px;top:0;animation-delay:.65s}#frotateG_04{right:15px;top:15px;animation-delay:.78s}#frotateG_05{right:0;top:52px;animation-delay:.91s}#frotateG_06{right:15px;bottom:15px;animation-delay:1.04s}#frotateG_07{left:52px;bottom:0;animation-delay:1.17s}#frotateG_08{left:15px;bottom:15px;animation-delay:1.3s}@keyframes f_fadeG{0%{background:#000}100%{background:#fff}}");
var a=JSON.parse(b.getElementById("comment-form-json").textContent),c=b.getElementById("comment-form-btn"),h=b.getElementById("floatingCirclesG"),e=b.getElementById("comment-editor");c.style.display="none";c.removeEventListener("click",d);h.style.display="block";e.addEventListener("load",function(){h.style.display="none";e.style.display="block"});e.src=a.src}}var g=!1;f.addEventListener("load",function(){var a=b.getElementById("comment-form-btn");a&&(a.addEventListener("click",d),"IntersectionObserver"in
f&&(new IntersectionObserver(function(a,b){0!=a[0].intersectionRatio&&(d(),b.disconnect())})).observe(a))})})(document,window);

Tambahan: Untuk memuat hasil yang lebih optimal pada komentar bertingkat, silahkan gunakan LD-JSON Script Schema.org untuk Blogger.

   <script type='application/ld+json'>
    { 
    &quot;@context&quot;: &quot;https://schema.org&quot;, 
    &quot;@type&quot;: &quot;Comment&quot;,
    &quot;@id&quot;: &quot;<data:blog.homepageUrl/>#comment&quot;,
    &quot;comment&quot;: {
    &quot;@type&quot;: &quot;Comment&quot;,    
    &quot;url&quot;: &quot;<data:post.url.canonical/><b:eval expr='&quot;#c&quot; + data:cb.level.id'/>&quot;,
    &quot;dateCreated&quot;: &quot;<data:cb.level.timestamp/>&quot;,
    &quot;text&quot;: &quot;<b:eval expr='data:cb.level.body snippet { links: false }'/>&quot;,
    &quot;creator&quot;: {
    &quot;@type&quot;: &quot;Person&quot;,
    &quot;name&quot;: &quot;<data:cb.level.author/>&quot;
    }
    }
    }
  </script>

Cari Blog Ini

BBS