Cara memasang tombol Show hide pada komentar Blog Versi 2

Nah kali ini admin batas catatan akan memberikan tips membuat/memasang tombol show hide pada kolom komentar di blog versi yang kedua, setelah beberapa hari yang lalu saya sudah memposting versi yang pertama, untuk melihat versi yang pertama buka link di bawah ini,

Untuk versi yang ke dua ini sahabat bisa melihat demonya secara langsung pada kolom komentar yang ada di bawah, bagaimana berminatkah sahabat untuk mencoba menerapkannya ???

Oh iya, scrip ini saya dapatkan dari blognya mastamvan, beberapa ada yang saya ubah, terima kasih.

Baiklah langsung saja ke langkah yang pertama cara memasang tombol "Show hide" pada komentar Blog Versi 2

1. Klik Template dan klik pilih Edit HTML

2. Copy kode di bawah ini tepat di atas kode </body>

//<![CDATA[

function Comments_tampil(){document.getElementById("comment_block").style.display="block",document.getElementById("tampil_Comments").style.display="none",document.getElementById("hide_Comments").style.display="block"}function Comments_hide(){document.getElementById("comment_block").style.display="none",document.getElementById("tampil_Comments").style.display="block",document.getElementById("hide_Comments").style.display="none"}

//]]>

</script>

//<![CDATA[

//Script Pop Up Button

$('.sumber,#tampil_Comments, #hide_Comments').bind('contextmenu', function(e) {

history.go(0);

return false;

});

$('.post-body a').attr('target','_blank');$('a.target').attr('target','_self');

{'use strict';var $html;let jPopup = function(content = '') {this.content = content.contentHtml;$html = document.querySelector('html');this.init();};function removeClass(element, cssClass) {var reg = new RegExp('(^| )' + cssClass + '($| )','g');element.className = element.className.replace(reg,' ');}jPopup.prototype = {init() {$html.className += ' jPopupOpen';this.buildPopup();},buildPopup() {document.body.insertAdjacentHTML('beforeend','<div class="jPopup">\<button type="button" class="jCloseBtn">\<svg height="32px" viewBox="0 0 32 32" width="32px" xml:space="preserve"><path d="M17.459,16.014l8.239-8.194c0.395-0.391,0.395-1.024,0-1.414c-0.394-0.391-1.034-0.391-1.428,0 l-8.232,8.187L7.73,6.284c-0.394-0.395-1.034-0.395-1.428,0c-0.394,0.396-0.394,1.037,0,1.432l8.302,8.303l-8.332,8.286 c-0.394,0.391-0.394,1.024,0,1.414c0.394,0.391,1.034,0.391,1.428,0l8.325-8.279l8.275,8.276c0.394,0.395,1.034,0.395,1.428,0 c0.394-0.396,0.394-1.037,0-1.432L17.459,16.014z"/></svg>\</button>\<div class="content">' + this.content + '</div>\</div>');this.setupEvents();},setupEvents() {document.getElementsByClassName('jCloseBtn')[0].addEventListener('click', this.close.bind(this));},close() {$html.className += ' jPopupClosed';document.getElementsByClassName('jPopup')[0].addEventListener('animationend', function(e) {e.target.parentNode.removeChild(this);removeClass($html, 'jPopupOpen jPopupClosed');});}};window.jPopup = jPopup;window.jPopup.close = jPopup.prototype.close;}

//]]>

</script>

3. Copy kode di bawah ini dan pastekan di atas kode </head> atau head/

/*<![CDATA[*/

div#comment_block{display:none;overflow:hidden;position:relative;background:#DEE1E3;margin-bottom:10px;margin-left:10px;padding:12px;border-radius:3px}#tampil_Comments,#hide_Comments{background:#fff;position:relative;overflow:hidden;display:block;padding:12px 20px 12px 70px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border:1px solid #ddd}#tampil_Comments:before,#hide_Comments:before{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:400;font-size:18px;color:#3498db;border-right:1px solid #ddd;top:0;left:0;padding:12px 20px;position:absolute}#tampil_Comments:after,#hide_Comments:after{content:'\f204';font-family:fontAwesome,Roboto,sans-serif;font-style:normal;font-weight:700;font-size:15px;top:0;right:0;padding:12px 20px;position:absolute}#tampil_Comments:after{content:'\f204'}#hide_Comments:after{content:'\f205'}#comments h3,#hide_Comments{margin:20px 0 10px;font-size:15px!important;color:#666;padding-bottom:10px}.comment_wrap{position:relative}.comment_wrap .comment_area{padding-left:80px}.comment_child{position:relative}.comment-box{position:relative;box-shadow:0 1px 1px rgba(0,0,0,0.15);margin-left:70px;background:white;border-radius:4px;margin-bottom:5px;padding-bottom:5px}.comment-box:before{border-width:11px 13px 11px 0;border-color:transparent rgba(0,0,0,0.05);left:-12px}.comment-box:before,.comment-box:after{content:'';height:0;width:0;position:absolute;display:block;border-width:10px 12px 10px 0;border-style:solid;border-color:transparent #FCFCFC;top:8px;left:-11px}.blsnhapus{position:relative;float:right;margin:4px 0 0 10px}.isi-comment-box{padding:10px 12px;border-bottom:1px solid #E5E5E5;overflow:hidden}#tampil_Comments,#hide_Comments,.comment_form{margin-left:12px!important}@media screen and (max-width:350px){#tampil_Comments,#hide_Comments,.comment_form{margin-left:0!important}#comments,#main{padding:0!important}div#comment_block{margin:10px}.comment_wrap .comment_area{padding-left:0}.comment_wrap::before{background:transparent}}

/*]]>*/

</style>

4. Cari kode di bawah ini

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

biasanya ada lebih dari satu kode seperti ini, pilih yang pertama, kemudian copas kode di bawah ini tepat berada di bawahnya kode yang sudah anda cari tadi,

<h3 id='tampil_Comments' onclick='Comments_tampil();'>Show comments</h3>

<h3 id='hide_Comments' onclick='Comments_hide();' style='display:none'>Hide comments</h3>

5. langkah terakhir save tamplate blog anda,

Mudah bukan, selamat mencoba dan jangan lupa untuk membackup template anda sebelum mencobannya.

Terima kasih atas kunjungannya.