JavaScript Popup Copy Code

Tabel Konten
  1. Markup HTML 
  2. Demo: 

Letakkan kode ini di atas </body>:

<script>
//<![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>*{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>var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}

function add_copy_button() {
    var pre = document.getElementsByTagName('pre');
    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 + '\');">Copy</a>';
    }
} add_copy_button();
//]]>
</script>

Lalu tambahkan kode CSS ini di atas ]]></b:skin> atau </style>:

pre {position:relative}
pre .c_b {
  display:block;
  position:absolute;
  top:0;
  right:0;
  padding:2px 5px;
}

Markup HTML 

<pre><code> ... </code></pre>

Demo: 

13 Komentar

  • Unknown

    Terima Kasih mas..
    :-bd

  • Unknown

    Good \o/

  • Unknown

    cooool \o/ :yaya:

  • Beben Koben

    kok kek kayak ini ya
    http://hompimpaalaihumgambreng.blogspot.com/2012/05/view-plain-code.html

  • uki

    ehm...telimikiciw :)

  • Anonim

    Mas, ini kan untuk <pre></pre> , kalo untuk <blockquote></blockquote> gimana solusinya ya mas??? :)

    • Taufik Nurrohman

      Ganti pre dengan blockquote:

      var pre = document.getElementsByTagName('blockquote');

      Format kode harus tetap menggunakan elemen <code> di dalamnya:

      <blockquote>
      <code> ... </code>
      </blockquote>
  • Unknown

    mau nanya nih bang ..
    ane udah buat pre-tag vanilla ,
    nah untuk buat tombol copynya ke dalam pre-tag vanilla gmna ya ??

    • Taufik Nurrohman

      Ikuti saja perintahnya, nanti tombolnya akan muncul sendiri. Atau kalau tidak muncul, mungkin tombolnya terselip di belakang. Jadi nilai z-index tombol harus ditambahkan dan diperbesar:

      pre .c_b {
      display:block;
      position:absolute;
      top:0;
      right:0;
      padding:2px 5px;
      z-index:99;
      }
  • Anonim

    masih bingung mas save dulu mas yah

  • Unknown

    mas buatin donk tutorial biar open source blog kita tidak bisa di baca seperti situsnya mas ini.

Komentar telah ditutup.