Sebelumnya aku 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 aku hingga dikala 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 menyerupai halnya syntax highlighter dari Alex Gorbatchev.
Maka dari itu aku hingga dikala 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 menyerupai halnya syntax highlighter dari Alex Gorbatchev.
Untuk itu aku kemudian mencari cara untuk menambahkan fungsi popup copy plain text pada blockquote ini. Dan alhasil aku 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 instruksi yang kita berikan untuk dicopy. Hanya klik tombol copy kemudian akan muncul jendela popup yang memuat instruksi yang ada di dalam blockquote yang sudah terseleksi, sehingga pengunjung hanya perlu melaksanakan CTRL + C.
Sebagai demonya mampu Anda coba pada blockquote yang akan aku berikan di bawah sekaligus dengan instruksi 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 instruksi CSS di bawah ini di atas instruksi ]]></b:skin>
Sebagai demonya mampu Anda coba pada blockquote yang akan aku berikan di bawah sekaligus dengan instruksi 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 instruksi CSS di bawah ini di atas instruksi ]]></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 instruksi javascript di bawah ini di atas instruksi </body>
Setelah itu save template Anda. Sekarang ketika Anda membuat postingan tambahkan instruksi <code>...</code> di dalam blockquote. Sehingga tampilannya akan tampak menyerupai di bawah ini.
Demikian saja postingan cara menambahkan fungsi popup copy plain text pada blockquote ini supaya dapat dimengerti dan bermanfaat.
Sumber: www.dte.web.id
<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 instruksi <code>...</code> di dalam blockquote. Sehingga tampilannya akan tampak menyerupai 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 supaya dapat dimengerti dan bermanfaat.
Sumber: www.dte.web.id
Komentar
Posting Komentar