Menambahkan Fungsi Popup Copy Plain Text Pada Blockquote
Sebelumnya aku mencoba memakai 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 menciptakan loading blog makin berat.
Maka dari itu aku hingga ketika ini memakai blockquote yang disediakan blogger untuk menampilkan kode-kode html atau apapun di dalam postingan. Namun sayangnya blockquote ini tidak mempunyai tombol copy plain text menyerupai halnya syntax highlighter dari Alex Gorbatchev.
Maka dari itu aku hingga ketika ini memakai blockquote yang disediakan blogger untuk menampilkan kode-kode html atau apapun di dalam postingan. Namun sayangnya blockquote ini tidak mempunyai tombol copy plain text menyerupai halnya syntax highlighter dari Alex Gorbatchev.
Untuk itu aku lalu 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 lalu akan muncul jendela popup yang memuat instruksi yang ada di dalam blockquote yang sudah terseleksi, sehingga pengunjung hanya perlu melaksanakan CTRL + C.
Sebagai demonya sanggup Anda coba pada blockquote yang akan aku berikan di bawah sekaligus dengan instruksi untuk menciptakan 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>
Sumber https://www.kompiajaib.com/
Sebagai demonya sanggup Anda coba pada blockquote yang akan aku berikan di bawah sekaligus dengan instruksi untuk menciptakan 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 menciptakan 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 biar sanggup 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="Menambahkan Fungsi Popup Copy Plain Text Pada Blockquote">Copy Text Click Here</a>';
}
} add_copy_button();
//]]>
</script>Setelah itu save template Anda. Sekarang ketika Anda menciptakan 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 biar sanggup dimengerti dan bermanfaat.
Sumber: www.dte.web.id
0 Response to "Menambahkan Fungsi Popup Copy Plain Text Pada Blockquote"
Posting Komentar