Mengubah Icon Author pada Komentar Blogger serta Nonaktifkan Showhide Comment - fajarriskiharap

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.

Related Posts