Kali ini saya akan share bagaimana membuat Pop Up Copy Code pada Blockqoute, Tutorial yang saya dapatkan dari mas Kompi Ajaib.
Blockquote yang memakai Pop Up ini biasanya adalah Blockquote yang dikhusukan untuk Code area seperti Javascript, HTML, CSS dll.
Blog-blog yang memakai ini diantarannya adalah Kompi Ajaib, Dora The Explorer dan Saya.
Keuntungan memakai Blockquote ini adalah, pengunjung menjadi lebih mudah memblok Kode yang panjang dengan hanya sekali Klik, Fungsinya hampir sama dengan Text area.
Berikut Preview dari Pop Up Copy Code Blockquote :
Bagaimana anda tertarik memasangnya di blog anda ?
Jika tertarik memasangnya, silahkan ikuti langkah berikut.
- Pertama Cari dulu kode ]]></b:skin (CTRL+F untuk memudahkan Pencarian)
- Setelah itu, Masukan CSS berikut diatas kode ]]></b:skin
Supaya Pop Up Copy Codenya Berfungsi, sobat harus Tambahkan Kode
Sumber : Mas Kompi
Blockquote yang memakai Pop Up ini biasanya adalah Blockquote yang dikhusukan untuk Code area seperti Javascript, HTML, CSS dll.
Blog-blog yang memakai ini diantarannya adalah Kompi Ajaib, Dora The Explorer dan Saya.
Keuntungan memakai Blockquote ini adalah, pengunjung menjadi lebih mudah memblok Kode yang panjang dengan hanya sekali Klik, Fungsinya hampir sama dengan Text area.
Berikut Preview dari Pop Up Copy Code Blockquote :
Bagaimana anda tertarik memasangnya di blog anda ?
Jika tertarik memasangnya, silahkan ikuti langkah berikut.
- Pertama Cari dulu kode ]]></b:skin (CTRL+F untuk memudahkan Pencarian)
- Setelah itu, Masukan CSS berikut diatas kode ]]></b:skin
/*-- Blockquote by Kompi Ajaib--*/
blockquote{position:relative}
blockquote .c_b{display:block;position:absolute;top:0;right:0;z-index:99;padding:2px 5px;}
- Setelah memasukan CSS Diatas, sobat masukan Kode Dibawah ini diatas Kode </body>
<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, lalu sobat test dulu dengan cara membuat postingan dengan Blockquote.Supaya Pop Up Copy Codenya Berfungsi, sobat harus Tambahkan Kode
<blockquote class="tr_bq">
<code>
Isi Kode
Yang ingin Dimasukan
</code>
</blockquote>
Semoga Bermanfaat bagi sobat Blogger.Sumber : Mas Kompi
