Cara Menambahkan Pop Up Copy Code Pada Blockquote ~ AH-SHARED

ebelumnya, saya ingin memberitahu kepada kalian, khususnya sobat AHS,kalian tidak perlu capek-capek harus memblok karakter code html yang sangat banyak itu
Kini ada yang namanya PopUp Copy Code pada blockquote.
ya sobat,Pop Up itu kinerjanya seperti syntax highlighter dari Alex Gorbatchev,tetapi sayangnya syntax highlighter itu membuat kinerja blog semakin berat.

maka dari itu sampai hari ini,saya tidak memakai syntax highlighter itu,saya hanya memakai blockquote modifikasi yang menggunakan hover dan border radius juga di sampingnya menggunakan nama blog.
sayangnya, blockquote yang standar seperti yang dipakai oleh sobat itu tidak memilik fungsi copy text, sehingga kalian harus copy kodenya satu-satu.

tetapi,jangan kuatir sobat,saat ini copy code satu-satu tidak musim lagi,karena itu tutorial ini saya buat.
bagaimana? tertarik untuk mencobanya??
yuk mari kita simak tutorial berikut..

Tutorial Pop Up Copy Code Blockquote

Saya anggap kalian sudah mempunyai/memasang blockquote,yang belum bisa segera memasangnya
Copy kode dibawah ini,letakkan diatas kode ]]></b:skin>

blockquote{position:relative}
blockquote .c_b{display:block;position:absolute;top:0;right:0;z-index:99;padding:2px 5px;}
blockquote .c_b:hover{background:#b0130d;color:#fff;transition:all .3s ease-in-out;}

Setelah itu copy kode dibawah ini, letakkan diatas </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-by AHS</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>

Ok,setelah itu save template.
Jika anda memakai blockquote gunakan tag sebagai berikut

<blockquote>
<code>
............
.............
............
blaaaaaa...blaaaaa...
.........
.......
</code>
</blockquote>

jadi sobat, anda tinggal menambah kode <code> dan </code> ditengah-tengah kode <blockquote> dan </blockquote>

Untuk merubah warna cari kode background:#xxxxx,nah warna itu bisa di sesuaikan. untuk merubah title popup,cari kode Source Code-By AHS,untuk merubah tulisan Copy Text..., cari kode itu kemudian rubahlah.
ingat,gunakan dengan bijak

maka, demikianlah artikel Cara menambahkan Pop Up Copy Code pada blockquote,semoga dapat membantu.

Sumber : Kompiajaib.com dan dte.web.id