May 12, 2013

Copy Kode Dengan Popup Javascript

Halo sobat...

Bagaimana kabarnya di akhir pekan ini??? Kali ini saya ingin berbagi sebuah tutorial lama namun mungkin cukup penting atau dibutuhkan oleh beberapa temen-temen blogger. Tutorial ini sendiri dapat digunakan untuk membantu pembaca blog kita yang bertujuan untuk mengaplikasikan tutorial-tutorial blog yang mana harus melakukan copas kode-kode tertentu ke dalam blog mereka.


Coba lihat halaman demo dibawah ini dan klik "Copy Kode". Lebih mudah bukan???


Hal tersebut saya pelajari dari tutorial Mas Taufik dan dapat dilakukan untuk mempermudah bagi temen-temen yang membutuhkan kode-kode tersebut tanpa perlu lagi memblock kode-kode tersebut, terutama kode-kode yang sedemikian rupa panjangnya  .

Nah, untuk cara nya sangat gampang cukup ikuti langkah-langkah berikut ini :

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Centang Expand Template Widget.



4. Letakkan kode berikut ini diatas </head> atau </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('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>


5. Lalu letakkan kode berikut diatas ]]></b:skin> atau </style> :

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

6. Simpan.

7. Terakhir, letakkan kode-kode yang dimaksud untuk di copy diantara kode berikut :

<pre><code> letakkan kode disini </code></pre>

8. Enjoy.





Bagaimana sob???

Semoga bermanfaat yah...

28 comments

  1. Informasi yang bermanfaat sob... tapi karena saya masih awan soal html jadi agak ribet ya :p

    ReplyDelete
    Replies
    1. :'( saya juga newbie gan, masih belajar di semester I nih...

      Delete
  2. wah kalau soal ginian saya nyimak ajah mbak, susah banget . :(

    ReplyDelete
    Replies
    1. :\ berarti kita nyimak bareng mba indah...

      Delete
  3. infonya berguna mba, cuma akunya yang gbsa gunainnya :'(
    suka pengen nangis klo edit html, apalagy klo ada yang salah jadinya berantakan .
    wkkkw

    ReplyDelete
    Replies
    1. hehehe, di pratinjau atau backup template aja dulu mba, biar aman... :)

      Delete
  4. trims infonya mbak...menarik juga

    ReplyDelete
  5. sayang ya, blog ane bukan blog tutorial...

    ReplyDelete
    Replies
    1. ga papa mas yang penting blog nya bermanfaat untuk pembaca apapun tema nya... :-bd :-bd :-bd

      Delete
  6. keren misss, thank dah berbagi, maaf baru bisa berkunjung

    ReplyDelete
    Replies
    1. sama-sama mas, terima kasih juga atas silaturrahmi paginya... :-bd :-bd :-bd

      Delete
  7. ijin nyoba mbak yu,,,
    makasih infonya,,low ada waktu silahkna berkunjung di blog saya...eee follback nya mbak yu..:D
    http://prastypunya.blogspot.com

    ReplyDelete
    Replies
    1. ok, sudah saya follback....terima kasih...

      Delete
    2. ok sudah saya follback terima kasih...

      Delete
    3. wach mantap mbak imuet ane pakai ilmunya...
      kunjungan pahi saya hehehehe mkasih mbak ilmunya... :-bd

      Delete
  8. Replies
    1. sama-sama agan obat bius... spoiled

      Delete
  9. This comment has been removed by the author.

    ReplyDelete
  10. bagus mbak buat yang suka nulis tutorial bisa di terapkan biar gak ribet

    ReplyDelete