Copy Kode Dengan Popup Javascript

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???

DEMO

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.

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

AnthonieMay 12, 2013 at 5:39 PM
Informasi yang bermanfaat sob... tapi karena saya masih awan soal html jadi agak ribet ya :p
ReplyDelete
Replies
UnknownMay 12, 2013 at 6:14 PM
wah kalau soal ginian saya nyimak ajah mbak, susah banget . :(
ReplyDelete
Replies
UnknownMay 12, 2013 at 9:07 PM
infonya berguna mba, cuma akunya yang gbsa gunainnya :'(
suka pengen nangis klo edit html, apalagy klo ada yang salah jadinya berantakan .
wkkkw
ReplyDelete
Replies
UnknownMay 12, 2013 at 9:08 PM
trims infonya mbak...menarik juga
ReplyDelete
Replies
Firman ArdyansyahMay 12, 2013 at 10:50 PM
Dicoba :-bd
ReplyDelete
Replies
AnonymousMay 13, 2013 at 6:03 AM
sayang ya, blog ane bukan blog tutorial...
ReplyDelete
Replies
AdminMay 13, 2013 at 8:43 AM
maksi zob atas infonya!
ReplyDelete
Replies
M. Alex JoenaediMay 14, 2013 at 8:59 AM
keren misss, thank dah berbagi, maaf baru bisa berkunjung
ReplyDelete
Replies
UnknownMay 17, 2013 at 10:55 PM
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
obat biusMay 21, 2013 at 10:55 AM
makasih, pelajarannya
ReplyDelete
Replies
Imron FhatoniMay 27, 2013 at 2:00 PM
This comment has been removed by the author.
ReplyDelete
Replies
UnknownMay 31, 2013 at 9:05 AM
bagus mbak buat yang suka nulis tutorial bisa di terapkan biar gak ribet
ReplyDelete
Replies
obat biusJune 1, 2013 at 9:52 AM
mantep dah gan
ReplyDelete
Replies

Add comment