Sebelumnya saya mencoba menggunakan syntax highlighter untuk menampilkan kode-kode html di dalam postingan yang di dalamnya mempunyai tombol copy plain text. Namun sayangnya syntax highlighter dari Alex Gorbatchev ini membuat loading blog makin berat.
Maka dari itu saya sampai saat ini menggunakan blockquote yang disediakan blogger untuk menampilkan kode-kode html atau apapun di dalam postingan. Namun sayangnya blockquote ini tidak memiliki tombol copy plain text seperti halnya syntax highlighter dari Alex Gorbatchev.
Maka dari itu saya sampai saat ini menggunakan blockquote yang disediakan blogger untuk menampilkan kode-kode html atau apapun di dalam postingan. Namun sayangnya blockquote ini tidak memiliki tombol copy plain text seperti halnya syntax highlighter dari Alex Gorbatchev.
Untuk itu saya kemudian mencari cara untuk menambahkan fungsi popup copy plain text pada blockquote ini. Dan akhirnya saya berhasil menambahkan fungsi popup copy plain text pada blockquote ini berkat tutorial dari mas Taufik Nurrohman. Dengan adanya tombol copy plain text ini, pembaca tidak perlu memblok teks atau kode yang kita berikan untuk dicopy. Hanya klik tombol copy kemudian akan muncul jendela popup yang memuat kode yang ada di dalam blockquote yang sudah terseleksi, sehingga pengunjung hanya perlu melakukan CTRL + C.
Sebagai demonya bisa Anda coba pada blockquote yang akan saya berikan di bawah sekaligus dengan kode untuk membuat fungsi popup copy plain text pada blockquote. Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.
1. Saya anggap blog Anda sudah mempunyai blockquote.
2. Kemudian tambahkan kode CSS di bawah ini di atas kode ]]></b:skin>
Sebagai demonya bisa Anda coba pada blockquote yang akan saya berikan di bawah sekaligus dengan kode untuk membuat fungsi popup copy plain text pada blockquote. Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.
1. Saya anggap blog Anda sudah mempunyai blockquote.
2. Kemudian tambahkan kode CSS di bawah ini di atas kode ]]></b:skin>
blockquote{position:relative}
blockquote .c_b{display:block;position:absolute;top:0;right:0;z-index:99;padding:2px 5px;}
3. Kemudian simpan kode javascript di bawah ini di atas kode </body>
Setelah itu save template Anda. Sekarang ketika Anda membuat postingan tambahkan kode <code>...</code> di dalam blockquote. Sehingga tampilannya akan tampak seperti di bawah ini.
Demikian saja postingan cara menambahkan fungsi popup copy plain text pada blockquote ini semoga dapat dimengerti dan bermanfaat.
<script type='text/javascript'>
//<![CDATA[
function copy_code(id) {
var ref = document.getElementById(id),
code = ref.getElementsByTagName('code')[0].innerHTML,
w_w = window.innerWidth,
w_h = window.innerHeight,
win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + ((w_h/2)-150) + ',width=500,height=300,scrollbars=0');
win.document.write('<!DOCTYPE html><html><head><title>Source Code</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:270px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}
function add_copy_button() {
var pre = document.getElementsByTagName('blockquote');
for (var i = 0; i < pre.length; i++) {
pre[i].id = 'code-' + i;
pre[i].className += ' quick-copy';
pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code(\'code-' + i + '\');" title="Copy Text Click Here">Copy Text Click Here</a>';
}
} add_copy_button();
//]]>
</script>
Setelah itu save template Anda. Sekarang ketika Anda membuat postingan tambahkan kode <code>...</code> di dalam blockquote. Sehingga tampilannya akan tampak seperti di bawah ini.
<blockquote>
<code>
...
Bla bla bla bla bla bla
...
</code>
</blockquote>
Demikian saja postingan cara menambahkan fungsi popup copy plain text pada blockquote ini semoga dapat dimengerti dan bermanfaat.
Maaf mas, kalo copas, jangan lupa sertakan Sumber dari mas Kompi ajaib.
ReplyDelete