Ditulis oleh: Ditulis pada: 6/10/2016
Seperti biasa, postingan ini dibuat untuk menjawab pertanyaan sahabat Kompi untuk show hide pesan komentar Disqus yang digunakan di blog ini.Sebenarnya cara membuat pesan komentar ini sudah pernah saya posting, namun belum menggunakan efek show hide.
Nah bagi yang ingin mencoba menggunakan pesan komentar seperti Kompi Ajaib atau seperti pada gambar animasi di atas, silahkan ikuti caranya di bawah ini.
1. Langkah Pertama
Silahkan cari kode berikut:
<b:includable id='comments' var='post'>...</b:includable>Kemudian silahkan copy kode HTML di bawah ini dan simpan di bawah kode di atas (di bawah kode
</b:includable>)
<b:includable id='pesan-komentar' var='post'>
<div class='pesan-komentar' id='pesan-komentar'>
<div class='tombol-pesan'>How to style text in Disqus comments:<span class='mata' id='tombol-pesan' onclick='toggleNavPanel('isi-pesan')'><i aria-hidden='true' class='fa fa-plus-square-o'></i></span></div>
<div id='isi-pesan'>
<ul>
<li>To write a <b>bold</b> letter please use <code>&lt;strong&gt;&lt;/strong&gt;</code> or <code>&lt;b&gt;&lt;/b&gt;</code>.</li>
<li>To write a <i>italic</i> letter please use <code>&lt;em&gt;&lt;/em&gt;</code> or <code>&lt;i&gt;&lt;/i&gt;</code>.</li>
<li>To write a <u>underline</u> letter please use <code>&lt;u&gt;&lt;/u&gt;</code>.</li>
<li>To write a <span class='strike'>strikethrought</span> letter please use <code>&lt;strike&gt;&lt;/strike&gt;</code>.</li>
<li>To write HTML code, please use <code>&lt;code&gt;&lt;/code&gt;</code> or <code>&lt;pre&gt;&lt;/pre&gt;</code> or <code>&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code>, and please
<b>parse</b> the code in the parser box below.</li>
</ul>
<div class='parser' onclick='toggleNavPanel2('parser')'><i aria-hidden='true' class='fa fa-code'></i> <span id='parser-button'>Show Parser Box</span></div>
<div class='clear' />
<div id='parser'>
<table>
<tbody>
<tr>
<td>
<textarea id='somewhere' onClick='document.execCommand("selectAll",false,null)'></textarea>
<br/>
<input class='button-parse' contenteditable='true' onclick='convert();' type='button' value='Parse Script' />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</b:includable>2. Langkah Kedua
Silahkan simpan kode CSS di bawah ini di atas kode
</head>
<b:if cond='data:blog.pageType == "item"'>
<style>
/*<![CDATA[*/
.pesan-komentar {
position: relative;
background: #fff;
padding: 8px;
width: auto;
margin: 0 auto;
line-height: 1.3em;
font-weight: 300;
font-size: 100%;
color: #444;
}
.parser {
background: #888;
padding: 3px 6px;
margin: 5px 0 5px 2px;
display: inline-block;
float: left;
color: #fff;
font-size: 100%;
cursor: pointer;
}
#isi-pesan li,
#isi-pesan ul {
list-style-type: disc!important
}
#isi-pesan ul {
padding-left: 20px;
margin-bottom: 5px;
}
#parser {
padding: 0;
margin: 5px 0;
display: none
}
#parser table {
margin: 0 auto;
width: 100%
}
#parser textarea#somewhere {
background: #f8f8f8;
border: 1px solid #ccc;
height: 100px;
width: 100%;
padding: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
#parser textarea#somewhere:active,
#parser textarea#somewhere:focus {
border: 2px solid #e8554e;
outline: 0
}
input.button-parse {
padding: 5px;
}
.pesan-komentar .strike {
text-decoration: line-through
}
.tombol-pesan {
display: block;
font-weight: 500;
vertical-align: middle
}
.mata {
float: right;
padding-top: 1px;
cursor: pointer;
}
#isi-pesan {
display: none
}
.clear {
clear: both;
display: block;
}
.pesan-komentar code {
font-family: Consolas, Monaco, 'Andale Mono', monospace;
white-space: initial;
word-spacing: normal;
word-break: normal;
hyphens: none;
color: #BC587E;
font-size: 80%;
padding: 0;
vertical-align: 1px;
font-style: normal!important;
}
/*]]>*/
</style>
</b:if>3. Langkah Ketiga
Silahkan simpan kode javascript di bawah ini di atas kode
</body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function convert() {
var ele1 = document.getElementById("somewhere");
var replaced;
replaced = ele1.value;
replaced = replaced.replace(/&/ig, "&");
replaced = replaced.replace(/</ig, "<");
replaced = replaced.replace(/>/ig, ">");
replaced = replaced.replace(/"/ig, """);
replaced = replaced.replace(/±/ig, "±");
replaced = replaced.replace(/©/ig, "©");
replaced = replaced.replace(/®/ig, "®");
replaced = replaced.replace(/ya'll/ig, "ya'll");
ele1.value = replaced;
};
function toggleNavPanel(e) {
var n = document.getElementById(e),
l = document.getElementById("tombol-pesan"),
t = "block";
n.style.display == t ? (n.style.display = "none", l.innerHTML = "<i class='fa fa-plus-square-o'></i>") : (n.style.display = "block", l.innerHTML = "<i class='fa fa-minus-square-o'></i>")
};
function toggleNavPanel2(e) {
var n = document.getElementById(e),
l = document.getElementById("parser-button"),
t = "block";
n.style.display == t ? (n.style.display = "none", l.innerHTML = "Show Parser Box") : (n.style.display = "block", l.innerHTML = "Hide Parse Box")
};
//]]>
</script>
</b:if>4. Langkah Keempat
Silahkan simpan kode di bawah ini di atas kode komentar Disqus untuk menampilkan pesan komentarnya.
<b:include data='post' name='pesan-komentar'/>Dan pastikan blog Anda sudah menggunakan Font Awesome.
Selesai....