Menambahkan Fungsi Popup Copy Plain Text Pada Blockquote

Menambahkan Fungsi Popup Copy Plain Text Pada Blockquote

Bola Hero Gawai

Menambahkan Fungsi Popup Copy Plain Text Pada Blockquote

Popup Copy Plain Text
Sebelumnya saya mencoba menggunakan syntax highlighter untuk menampilkan kode-kode html di dalam postingan yang di dalamnya mempunyai tombol copy plain text. Namun sayangnya syntax highlighter dari Alex Gorbatchev ini membuat loading blog makin berat.

Maka dari itu saya sampai saat ini menggunakan blockquote yang disediakan blogger untuk menampilkan kode-kode html atau apapun di dalam postingan. Namun sayangnya blockquote ini tidak memiliki tombol copy plain text seperti halnya syntax highlighter dari Alex Gorbatchev.

Untuk itu saya kemudian mencari cara untuk menambahkan fungsi popup copy plain text pada blockquote ini. Dan akhirnya saya berhasil menambahkan fungsi popup copy plain text pada blockquote ini berkat tutorial dari mas Taufik Nurrohman. Dengan adanya tombol copy plain text ini, pembaca tidak perlu memblok teks atau kode yang kita berikan untuk dicopy. Hanya klik tombol copy kemudian akan muncul jendela popup yang memuat kode yang ada di dalam blockquote yang sudah terseleksi, sehingga pengunjung hanya perlu melakukan CTRL + C.

Sebagai demonya bisa Anda coba pada blockquote yang akan saya berikan di bawah sekaligus dengan kode untuk membuat fungsi popup copy plain text pada blockquote. Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

1. Saya anggap blog Anda sudah mempunyai blockquote.
2. Kemudian tambahkan kode CSS di bawah ini di atas kode ]]></b:skin>

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

3. Kemudian simpan kode javascript di bawah ini di atas kode </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('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>

Setelah itu save template Anda. Sekarang ketika Anda membuat postingan tambahkan kode <code>...</code> di dalam blockquote. Sehingga tampilannya akan tampak seperti di bawah ini.

<blockquote>
<code>
...
Bla bla bla bla bla bla
...
</code>
</blockquote>

Demikian saja postingan cara menambahkan fungsi popup copy plain text pada blockquote ini semoga dapat dimengerti dan bermanfaat.

Sumber: www.dte.web.id

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

35 Comments Add Comment

Pertamax lagi deh , Kompi memang selalu di hati , hehehe .
BTW , Makasih banyak mas , mau saya terapkan nih , tapi mau komentar dulu takut ntar di gondol kucing duluan , hehehe

Balas

Seeppp gannn visit back ..

http://bloggerjava.net

http://anymous.net

Balas

Visit juga nih http://planetajaib.blogspot.com/

Balas

kalau ini baru saya coba mas..wakakakaakak

Balas

di coba gan . .

ntr kalo cocok ane terapin
dimari . . faridsoft22.blogspot.com

Balas

Silahkan mas Panjz... :D

Balas

mas gimana cara memotong atau memisahkan bagian paling atas atau bagian menunya itu sperti punya nya http://www.lost-sector.net/

dan gimana caranya buat postingan satu kolom kayak punya punya mas..tolong dibantu ya mas..terima kasih :)

Balas

Kalau itu agak banyak yang dirubah dan disesuaikan template blog, kadang tiap blog berbeda susunannya.

Balas

ia mas...oia mas..ajarin dong bikin posting satu kolom ..qku udah buat tapi gak bisa - bisa.kyak template punya mas yang itu tu "Kompiimut, Template Blog Yang Imut Dan Amit Amit" hehehe...terima kasih...;)

Balas

Sayang ya mas membuat blog makin berat padahal bagus juga tips ini

Balas

Untuk ini saya rasa tidak terlalu memberatkan seperti halnya syntax highlighter, karena menampilkan kodenya hanya menggunakan blockquote, hanya ditambahkan tombol untuk copy text yang menggunakan javascript. Mungkin javascript ini yang sedikit membebani blog, jika sekiranya tidak perlu memang sebaiknya jangan menambahkan terlalu banyak javascript.

Balas

ajarin dong gan..cara membuat postingan satu kolom seperti ini http://3.bp.blogspot.com/-TiIF4LNTz0Q/UZxQQNPIi5I/AAAAAAAAA2k/Z3ogE_7_Cg4/s1600/pertanyaan.jpg..mohon pencerahannya..terima kasih :)

Balas

Kok templatenya Mas Ahmad Manarul sama ya seperti templatenya Mas Kompiajaib ini? Struktur Header, Sidebar, Footer serta warna nggak jauh beda

Balas

Hehehe , namanya juga terinspirasi dari kompi ajaib..

Balas

Nggak takut mas dibilang kloning blog?

Balas

Kan saya hanya terinspirasi mas , bukan menjiplak.

Balas

mas adhy...
kenapa tata letak saya seperti

http://3.bp.blogspot.com/-IR1zEq7hZKg/UZxt-nDWyZI/AAAAAAAAC0E/uFNYEOBlWbQ/s320/ngga+rapi.png

Balas

Sekedar nambahin aja menurut saya setidaknya warna background berbeda sebab yang saya lihat semua kode css nya 95% sama buat mas kompi kayak nya No Problem dalam waktu 30 menit aja sudah bisa berubah warna thema ,tapi mungkin dia jadi kepikiran jangan jangan gara gara (bahasa)terinspirasi entar ada lagi warna yang template yang sama ,karena bagaimanapun juga untuk jenis kaya ginian itu namanya kloning....dan gak baik juga buat yang ngekloning ,pasti akan di bilang gak kreatif............Maaf hanya sekedar menjadi penengah........

Balas

Siap !! nanti saya benahi semua sehingga tidak mirip dengan blog KOMPI AJAIB ini , makasih sob sarannya , nanti saya ganti warna backround , post , header ,dll , tanks sob :)

Balas

tolong balasan nya mas adhy.... ini gara gara apanya y....?

Balas

itu hal biasa sob ,hal itu bisa terjadi akibat disembunyikan nya Css bundle.css
<b:skin><![CDATA[ dan ]]></b:skin>

Balas

lalu bagaimana cara menanggulanginya ?

Balas

buat apa sob dengan begitu template akan lebih valid sebab jika di kembalikan seperti semula (maksudnya mengembalikan kode <b:skin><![CDATA[ dan penutup kode css ]]></b:skin> ) sama saja dengan mengembalikan 50 an error code yang terdeteksi saat di cek Css3 Validasi

Balas

untuk ngedit blockquote yang sudah ada berarti harus dilakukan satu satu ya om,ga bisa secara masal

Balas

Iya mas harus nambahin <code>....</code> satu2 pada blockquote yang sudah ada agar tombol copynya berfungsi.

Balas

Ini baru bermanfaat..keren..
tp kloq kode" apa gk pilih di taruh di text area mas..

Balas

Itu tergantung kesukaan masing2, jika ingin mencoba menggunakan textarea, coba saja pada javascriptnya ganti kode blockquote dengan texrarea.

Balas

kalau pada tag pre tinggal ganti gini ya sob?
var pre = document.getElementsByTagName('pre');

Balas

Ya seperti itu kang, ini juga asalnya dari tag pre hehehe...

Balas

gan,,kalau membuat hover pada kotak blockquote gimana gan?? kayak punya agan diatas??

Balas

keren gan saya mo coba praktekin dulu

Balas

Silahkan mas...semoga bermanfaat :D

Balas

Nyari Sana Sini .. Eh Ketemunya Disini..

Thanks.. :D

Balas

Saya coba dulu mas kompi :)

Balas

Mas, nih orang copas lagi nih konten mas kompi, tanpa menyertakan sumber lagi.

http://ko2.blogspot.com/2013/05/menambahkan-fungsi-popup-copy-plain.html

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×