Minggu, 15 Desember 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.



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( extarea)
[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...

0 komentar:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

 

Copyright © Informasi terbaru Design by O Pregador | Blogger Theme by Blogger Template de luxo | Powered by Blogger