Menggunakan Javascript select and copy (pada textarea) memungkinkan setiap pengunjung cukup sekali melakukan KLIK pada button yang disediakan, kemudian secara otomatis semua yang tertulis dalam area tersebut akan tercopy hingga pembaca atau pengunjung tinggal pastekan hasilnya. Sangat sederhana bentuknya dan dapat berfungsi dengan baik di Mozilla Firefox serta Internet Explorer. Anda dapat menyimpan javascript dan kode CSS-nya melalui Add a Gadget (di Page Elements) atau jika mau sedikit telaten hingga semua kode CSS terkumpul di satu tempat, silahkan simpan kode CSS-nya di atas ]]></b:skin>. Javascript bisa diletakkan di bawah kode ]]></b:skin> atau di bawah <head>. O, ya ..., jika anda ingin menyimpan kode CSS di atas kode ]]></b:skin>, jangan lupa untuk membuang tag pembuka <style type="text/css"> dan tag penutupnya </style>
Kode CSS Select and Copy
<style type="text/css">
a.copytubruk{
padding:4px 8px;
border:2px solid #555;
border-radius:6px;
color:#0099FF;
cursor:pointer;
font-weight:bold;
text-decoration:none;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/blueOrangeListV36H1.gif) top right repeat-x;
}
a.copytubruk:hover{
color:red;
background-position:bottom left;
}
textarea#txt1{
background:#eee;
color:#000033;
font-family:Arial;
font-size:12px;
border:2px solid #444;
border-radius:6px;
padding:15px 8px;
}
</style>
Javascript Select and Copy
<script type="text/javascript">
//<![CDATA[
function copyText(theId) {
var obj = document.getElementById(theId);
obj.focus();
obj.select();
copyToClipb(obj.value);
}
function copyToClipb(txt) {
if (window.clipboardData) {
window.clipboardData.setData("Text", txt);
}
else if (window.netscape) {
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.data = copytext;
trans.setTransferData("text/unicode", str, copytext.length * 2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip) return false;
clip.setData(trans, null, clipid.kGlobalClipboard);
}
return false;
}
//]>
</script>
xHTML Select and Copy
Gunakan xHTML di halaman posting atau widget. Masukkan teks di antara tag pembuka <textarea> dan tag penutup </textarea>l;
<form style="text-align:center;">
<a href="#" onClick="copyText('txt1'); return false;" class="copytubruk">Copy text</a><br/>
<textarea id="txt1" cols="40" rows="8">
Memasang sebuah blog counter kini menjadi hal mendasar sangat teramat penting bagi sebuah blog atau web. Melalui widget semacam ini, terlebih seperti Histats Counter, akan memberi banyak keuntungan dalam aktifitas monitoring pergerakan kemajuan blog yang kita kelola dengan susah payah dan banyak pengorbanan. Detik demi detik perkembangan dan seluruh aktifitas pengunjung, jumlah pengunjung, domisili pengunjung hingga posting terfaforit bisa terlihat hanya dengan klik pada widget yang terpampang.
</textarea>
</form>
Rubah nilai row dan cols untuk merubah ukuran box textarea.
Tutorial Menarik Lain
Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:
boleh juga nih mbah tutorialnya...mau belajar...mohon bimbingannya ya...makasih
BalasHapusAjarin donkkkkkk
BalasHapusSalut,,, liat blog ini bagus banget, rapi susunannya dan pas warnanya . pengen berinovasi seperti ini . tapi boleh gak ya mbak, minta ilmu nya . Soalnya newbie banget nie....makasih...
BalasHapusBlog Anda bagus sekali, Saya senang melihat dan akan sering saya kunjungi.
BalasHapusSaya sudah pernah melihat cara ini sebelumnya. ^_^
BalasHapusaku tak numpang belajar ngeblog yooo..,
BalasHapusok mau di coba dulu nich...
BalasHapusmaklum lg cob2 bikin blog
trims atas konten ini, sukses buat Juragan... blognya siiiip sekali kunjungi aku balik ya... di http://s-surya62.blogspot.com/ ... makasih
BalasHapusthanks atas infonya yang bermanfaat, salam kenal ya (follow me)
BalasHapushttp://caramembuatyangakumau.blogspot.com
Gaan ... Mau nanya tuuh itu di Copy Ke HTML apa yg lain ??
BalasHapuslok bikin template pake gambar sendiri gmana kak.... bls ea
BalasHapusmas...seblumnya salam kenal...
BalasHapusmaaf klau slah kmar...may tnyak gmna cara hilangkan beground gambar template..terima kasih...kyak blognya skr kan rata warna hitam....
Tulisan komentarnya kok gak kelihatn, jadi gak enak dilihat neeh?
BalasHapus