Membuat Blockquote dengan Fungsi Popup Copy Plain

Bookmark and Share
Ketemu lagi bersama saya di blog ini dan Alhamdulillah nya saya masih diberi kesempatan oleh Allah SWT untuk membagikan postingan kepada anda semua. Postingan kali ini yaitu berjudul Membuat Blockquote Dengan Fungsi Popup Copy Plain yang merupakan artikel kedua saya pada hari ini. Setelah sebelumnya saya juga pernah membagikan suatu template yaitu 3 Template Blog SEO Terkeren 2013 yang merupakan template seo yang saya kumpulkan dan saya bagikan  kepada anda semua , dan tidak ada salahnya anda juga mencoba template tersebut.

Apa fungsi Blockquote dengan Fungsi Popup Copy Plain ini ?? Blockquote dengan Fungsi Popup Copy Plain ini berguna agar pengunjung yang akan mengcopy kode tidak perlu memblok teks atau kode yang admin berikan. Hanya klik tombol copy text click here kemudian akan muncul jendela popup yang memuat kode yang ada di dalam blockquote yang sudah terseleksi, sehingga pengunjung hanya perlu melakukan ctrl + c di blog kita.

Berikut ini contoh Blockquote dengan Fungsi Popup Copy Plain yang saya gunakan sendiri di blog saya :

Membuat Blockquote dengan Fungsi Popup Copy Plain

Jika anda tertarik Membuat Blockquote dengan Fungsi Popup Copy Plain silahkan ikuti cara-caranya yang akan saya bahas di bawah ini :

1. Loggin ke Blogger Anda
2. Klik Template > Edit HTML
3. Jika anda takut salah , silahkan anda download templatenya dulu
4. Letakkan kode CSS berikut 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;} 4. Selanjutnya Letakkan kode 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>
5, Simpan template anda
6. Untuk menambahkan Fungsi Popup Copy Plain ini , saat anda membuat postingananda harus tambahkan kode <code>...</code> di dalam blockquote. Sehingga tampilannya  persis (sama) seperti di bawah ini
<blockquote>
<code>
...
Isi kode  Blockquote
...
</code>
</blockquote>

Saya rasa cukup demikanlah artikel  Membuat Blockquote dengan Fungsi Popup Copy Plain penutup artikel saya hari ini , Semoga anda memahaminya.

Demikianlah artikel saya tentang Membuat Blockquote dengan Fungsi Popup Copy Plain. Semoga bisa bermanfaat dan berguna bagi kita semua , apabila ada kata yang kurang berkenan saya mohon maaf sebesar-besarnya , Wassalamuaikum

{ 0 komentar... Views All / Send Comment! }

Posting Komentar