Mengubah Icon Author pada Komentar Blogger serta Nonaktifkan Showhide Comment

Panduan lengkap mengubah icon admin serta menghilangkan fitur showhide pada komentar blogger
Mengubah Icon Author pada Komentar Blogger serta Nonaktifkan Showhide Comment

Cara Nonaktifkan Showhide Blogger Comment

Silahkan cari kode seperti dibawah ini pada menu Edit HTML dan tambahkan kode : <!-- --> pada bagian awal dan akhirnya.


<b:include cond='data:view.isPost and !data:view.isPreview and data:post.allowComments and data:post.numberOfComments > 0' data='post' name='commentShowhide'/>

// Ubah menjadi seperti di bawah ini

<!-- <b:include cond='data:view.isPost and !data:view.isPreview and data:post.allowComments and data:post.numberOfComments > 0' data='post' name='commentShowhide'/> -->


Diatas merupakan tag comment yang berarti kode tersebut hanya terbaca sebagai komentar dalam html dan tidak akan ditampilkan. Hal ini bertujuan untuk menonaktifkan sementara fungsi showhide komentar agar nanti ketika Anda ingin mengaktifkannya kembali cukup hapus kode <!-- --> dibagian awal dan akhir.

Mengubah Icon Author pada Komentar Blogger

Tutorial ini bersifat opsional artinya terserah Anda mau terapkan atau tidak. Inspirasi utama dari tutorial ini adalah lencana Grup Facebook yang terlihat keren pada komentar usernya. Maka kami berfikir untuk menambahkan ini pada template kami juga.

Defaultnya icon author pada komentar blog ini hanya ditampilkan menggunakan icon centang dengan blok lingkaran. Jika Anda rasa terlalu standar, maka Anda bisa menggantinya dengan salah satu icon dibawah ini:

        

Carilah kode CSS yang tampilan keseluruhannya seperti dibawah ini:

.comments li .comment-header .user .blog-author:before{content:'';width:16px;height:16px;display:block;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z' fill='%23519bd6'></path></svg>") center left / 15px no-repeat;}

Ubahlah menjadi beberapa pilihan code dibawah ini :

.comments li .comment-header .user .blog-author:before{content:'';width:16px;height:16px;display:block;background:url("data:image/svg+xml,<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><path d='M140.975,31.949c-20.079,0-36.342,16.264-36.342,36.34v90.945  c0,12.724,5.271,24.267,13.717,32.525l39.524,39.52c-27.075,24.903-44.154,60.697-44.154,100.492  c0,75.229,61.056,136.279,136.282,136.279c75.222,0,136.284-61.05,136.284-136.279c0-39.795-17.08-75.589-44.15-100.492  l39.515-39.52c8.448-8.258,13.718-19.801,13.718-32.525V68.29c0-20.077-16.263-36.34-36.341-36.34H140.975z M250.001,259.086  c3.181,0,5.815,2.007,6.725,4.818l16.541,40.608h42.428c3.813,0,6.991,4.093,6.991,7.818c0,2.269-1.093,4.267-2.824,5.448  l-35.702,24.254c0,0,11.448,43.157,11.819,44.427c0.266,0.638,0.354,1.368,0.354,2.093c0,3.818-3.088,6.813-6.992,6.813  c-1.72,0-3.363-0.627-4.544-1.632l-34.796-27.166l-34.799,27.166c-1.179,1.005-2.816,1.632-4.541,1.632  c-3.905,0-6.996-2.995-6.996-6.813c0-0.725,0.087-1.455,0.363-2.093c0.363-1.27,11.992-44.238,11.992-44.238l-35.886-24.442  c-1.725-1.182-2.816-3.18-2.816-5.448c0-3.726,3.182-7.818,6.995-7.818h42.429l16.535-40.608  C244.185,261.093,246.82,259.086,250.001,259.086z M186.402,95.548v63.596c0,9.992-8.174,18.172-18.17,18.172  c-9.996,0-18.17-8.181-18.17-18.172V95.548c0-9.992,8.174-18.173,18.17-18.173C178.228,77.375,186.402,85.557,186.402,95.548z   M268.173,95.548v81.769c0,9.99-8.181,18.17-18.172,18.17c-9.996,0-18.17-8.18-18.17-18.17V95.548  c0-9.992,8.175-18.173,18.17-18.173C259.992,77.375,268.173,85.557,268.173,95.548z M349.939,95.548v63.596  c0,9.992-8.181,18.172-18.167,18.172c-9.992,0-18.173-8.181-18.173-18.172V95.548c0-9.992,8.181-18.173,18.173-18.173  C341.759,77.375,349.939,85.557,349.939,95.548z' fill='%23519bd6'/></svg>") center left / 15px no-repeat;}
.comments li .comment-header .user .blog-author:before{content:'';width:16px;height:16px;display:block;background:url("data:image/svg+xml,<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><path d='M131.889,150.061v63.597h-27.256  c-20.079,0-36.343,16.263-36.343,36.342v181.711c0,20.078,16.264,36.34,36.343,36.34h290.734c20.078,0,36.345-16.262,36.345-36.34  V250c0-20.079-16.267-36.342-36.345-36.342h-27.254v-63.597c0-65.232-52.882-118.111-118.112-118.111  S131.889,84.828,131.889,150.061z M177.317,213.658v-63.597c0-40.157,32.525-72.685,72.683-72.685  c40.158,0,72.685,32.528,72.685,72.685v63.597H177.317z M213.658,313.599c0-20.078,16.263-36.341,36.342-36.341  s36.341,16.263,36.341,36.341c0,12.812-6.634,24.079-16.625,30.529c0,0,3.55,21.446,7.542,46.699  c0,7.538-6.087,13.625-13.629,13.625h-27.258c-7.541,0-13.627-6.087-13.627-13.625l7.542-46.699  C220.294,337.678,213.658,326.41,213.658,313.599z' fill='%23519bd6'/></svg>") center left / 15px no-repeat;}
.comments li .comment-header .user .blog-author:before{content:'';width:16px;height:16px;display:block;background:url("data:image/svg+xml,<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><path d='M113.806,139.702v1.272c2.91,79.95,17.807,151.452,24.622,158.445  c15.812,21.084,64.777,55.792,92.399,73.235c6.814,4.362,12.625,5.181,19.173,5.356c6.537-0.176,12.349-1.269,19.166-5.356  c28.171-16.63,77.773-52.151,93.497-73.235c6.904-6.993,20.709-78.495,23.621-158.445l0.087-1.272  c0-7.361-4.722-13.719-11.268-16.083c-34.251-11.898-84.396-15.079-125.016-15.079c-40.707,0-90.854,3.181-125.014,15.079  C118.526,125.983,113.806,132.341,113.806,139.702z M31.949,87.277l0.087,2c4.631,127.925,25.163,240.399,36.253,251.575  c25.438,33.808,106.756,86.315,150.727,115.024c10.453,6.817,20.444,11.906,30.984,12.174c10.542-0.268,20.529-5.356,30.983-12.174  c43.972-28.709,125.288-81.217,150.728-115.024c11.08-11.176,31.621-123.649,36.252-251.575l0.088-2  c0-11.808-7.631-22.075-18.172-25.8C394.729,42.396,315.594,31.949,250,31.949c-65.603,0-144.738,10.446-199.881,29.528  C39.579,65.203,31.949,75.469,31.949,87.277z M76.01,116.987c0-9.445,6.086-17.532,14.445-20.529  C134.072,81.373,198.122,77.375,250,77.375c51.876,0,115.93,3.997,159.545,19.082c8.361,2.997,14.448,11.084,14.448,20.529  l-0.101,1.549c-3.718,101.302-21.259,193.244-30.07,202.15c-20.175,26.716-84.499,69.59-119.288,92.301  c-8.272,5.369-16.179,9.458-24.534,9.637c-8.358-0.179-16.264-4.268-24.532-9.637c-34.799-22.711-99.124-65.585-119.292-92.301  c-8.809-8.906-26.351-100.849-30.077-202.15L76.01,116.987z' fill='%23519bd6'/></svg>") center left / 15px no-repeat;}
.comments li .comment-header .user .blog-author:before{content:'';width:16px;height:16px;display:block;background:url("data:image/svg+xml,<svg viewBox='0 0 500 500' width='500px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><path d='M36.992,326.039c0,20.079,16.262,36.34,36.34,36.34h54.513v56.062  c0,10.087,8.181,18.168,18.172,18.168c5.092,0,9.714-2.095,12.989-5.448l68.78-68.781h199.881c20.078,0,36.34-16.261,36.34-36.34  V98.902c0-20.079-16.262-36.341-36.34-36.341H73.333c-20.079,0-36.34,16.262-36.34,36.341V326.039z M146.018,221.557  c0-12.536,10.177-22.713,22.713-22.713c12.536,0,22.713,10.177,22.713,22.713c0,12.537-10.177,22.713-22.713,22.713  C156.194,244.27,146.018,234.093,146.018,221.557z M227.787,221.557c0-12.536,10.177-22.713,22.713-22.713  c12.537,0,22.715,10.177,22.715,22.713c0,12.537-10.178,22.713-22.715,22.713C237.964,244.27,227.787,234.093,227.787,221.557z   M309.556,221.557c0-12.536,10.176-22.713,22.715-22.713c12.537,0,22.711,10.177,22.711,22.713  c0,12.537-10.174,22.713-22.711,22.713C319.731,244.27,309.556,234.093,309.556,221.557z' fill='%23519bd6'/></svg>") center left / 15px no-repeat;}
.comments li .comment-header .user .blog-author:before{content:'';width:16px;height:16px;display:block;background:url("data:image/svg+xml,<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><path d='M31.949,334.446c0,50.971,41.249,92.222,92.221,92.222H275.89  c50.971,0,92.223-41.251,92.223-92.222v-18.439c37.521-28.523,99.938-49.331,99.938-107.393c0-40.155-32.527-72.683-72.685-72.683  c-9.633,0-18.807,1.819-27.254,5.271v-32.527c0-20.079-16.267-36.343-36.341-36.343H68.29c-20.077,0-36.34,16.264-36.34,36.343  V334.446z M368.112,264.035v-55.421c0-15.083,12.172-27.256,27.254-27.256c15.085,0,27.258,12.174,27.258,27.256  C422.624,236.688,394.276,247.592,368.112,264.035z M113.718,135.932v181.71c0,9.987-8.181,18.168-18.17,18.168  c-9.992,0-18.173-8.181-18.173-18.168v-181.71c0-9.992,8.181-18.17,18.173-18.17C105.537,117.761,113.718,125.94,113.718,135.932z' fill='%23519bd6'/></svg>") center left / 15px no-repeat;}

Live Preview

Silahkan lihat pada bagian komentar blog ini untuk melihat penerapannya langsung.


You may like these posts

Comments

  1. Muhammad Maki
    Tampilan Icon Author Style 1
    • Muhamad Arsyad
      Tes
  2. Muhammad Maki
    Tampilan Icon Author Style 2
  3. Muhammad Maki
    Tampilan Icon Author Style 3
  4. Muhammad Maki
    Tampilan Icon Author Style 4
  5. Muhammad Maki
    Tampilan Icon Author Style 5
  6. Muhammad Maki
    Tampilan Icon Author Style 6
  7. Abdul Majid
    Untuk artikel dari penulis yg berbeda tanpa gambar dan kolom komentar. Apakah ada widgetnya iya. Atau ada settingan manualnya? Sekiranya bisa tetap menggunakan gambar dan kolom komentar cuman yg membedakan adalah widget author aja Mas.

    Insyaallah dlm beberapa hari sy berniat ingin membeli template ini. Makasih
    • Muhammad Maki
      Bisa mas tinggal tambahin gambar di dalam postingan gambar thumbnail nya otomatis muncul di homepage.

      Kalau komentar nya tinggal diaktifkan di pengaturan postingannya
  8. Sourav Raj Biswas
    hi
  9. Ashwathnarayana
    I need this template
  10. A. Abdul Mustahab ツ
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum tristique mi. Ut varius sem id cursus ornare. Quisque in ex purus. Mauris id mattis urna. Donec mattis quam a ex eleifend, at elementum libero porttitor. Etiam nisl mauris, convallis at tincidunt id, efficitur eu augue. Mauris volutpat lorem sapien, scelerisque accumsan nisi ultricies a.

    Nullam sit amet justo massa. In mattis est sed orci convallis, eget viverra libero pellentesque. Donec scelerisque auctor magna et tincidunt. Nulla facilisi. Etiam vitae sollicitudin odio, non fermentum nulla. Nunc in libero vitae odio suscipit sollicitudin. Quisque nec mollis ex. Ut euismod semper lorem auctor fermentum. Vestibulum tempus, lorem vitae molestie volutpat, libero urna posuere nibh, vel auctor lorem felis non felis. Vestibulum dolor nunc, luctus ac felis non, semper elementum nisl. Cras ipsum nunc, semper vitae hendrerit vitae, dapibus ut sapien. Pellentesque pretium varius tortor at elementum. In vulputate leo ferme…