Pasang Widget Recent Comment Keren di Blogger Terbaru 2023

Recent Comment Keren Terbaru 2023

Assalamualaikum warahmatullahi wabarakatuh. Selamat malam sobat semua semoga dalam keadaan sehat dan tetap semangat.

Komentar merupakan salah satu elemen penting dalam sebuah blog ataupun website yang berfungsi sebagai wadah interaktif sebuah media. Namun terkadang admin agak kesulitan memoderasi setiap komentar yang ada.

Recent Comment (komentar terbaru) merupakan sebuah widget yang sangat membantu admin blog dalam memantau setiap komentar pada postingan blog.

Pada postingan ini kami akan membagikan tutorial memasang widget recent comment pada blogger yang dapat dilakukan dengan mudah dan cepat.

Tutorial Pasang Widget Recent Comment Blogger Terbaru

1. Login ke akun blogger kemudian pilih menu Tata Letak, kemudian klik Add Gadget lalu pilih HTML/JavaScript.
2. Kemudian copy kode di bawah ini dan pastekan ke HTML/JavaScript tadi.

   
   <style type="text/css"> 
   ul.dzul_komentar{list-style:none;margin:0;padding:0;} 
   .dzul_komentar li{background:#ffff;margin:0 0 5px !important;padding:10px  
   !important;display:block;clear:both;overflow:hidden;list-style:none; max-height: 100px;font-size:95%;border-radius:4px;flex: 1;} 
   .dzul_komentar a {text-decoration:none;}
   .dzul_komentar li .avatarImage{float:left;background:#fefefe;margin:0 6px 0 0;position:relative;overflow:hidden;} 
   .avatarRound{border-radius:50%;width:38px;height:38px} 
   .komen::before{content:'';position:absolute;left:-9px;top:12px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #DBF0F7;transform:translatey(-50%) rotate(-90deg)}
   .dzul_komentar li .komen{z-index:1;font-size:14px;z-index:1;float:left;padding:5px 10px; margin-left:5px;background:#DBF0F7;position:relative;border-radius:10px}
   .dzul_komentar li span{margin-top:2px;display: block;font-size:90%;color:#333} 
   .dzul_komentar li span:hover{color:#006600} 
   </style>
   
   <script type="text/javascript">
   //<![CDATA[    
   var 
   numComments  = 4, 
   showAvatar  = true, 
   avatarSize  = 38, 
   roundAvatar = true, 
   characters  = 45, 
   defaultAvatar  = "https://id.gravatar.com/userimage/20253351/b9a276dcb29153661b7a3521f2882989.png", 
   hideCredits = true; 
   maxfeeds=45, 
   adminBlog='Pak DZ';
   //]]>
   </script>
   <script type="text/javascript"  src="https://cdn.jsdelivr.net/gh/dzulcyber/js@main/recent_comment.js"></script>
   <script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=dzul_komentar&amp;&amp;max-results=50">
   </script>
       

   Atur CSS sesuai kebutuhan dan atur juga settingan variabel seperti:
• numComments = 5 (Jumlah komentar yang akan ditampilkan)
• showAvatar = false (Munculkan avatar, jika iya ketik true jika tidak ketik false)
• avatarSize = 38 (ukuran avatar)
• roundAvatar = true (ketik true/false)
• character = 40 (Jumlah karakter yang ditampilkan)
• adminBlog ='Pak DZ' (nama admin yang ditulis tidak akan ditampilkan)
3. Selanjutnya klik Simpan.

Nah, sekarang silahkan akses blog sobat dan lihat hasilnya. Jika berhasil maka tampilan komentarnya akan seperti yang ada pada blog ini. Semoga bermanfaat!