Simple Javascript to Select all and Copy DIV (Code, Text and everything)

Ini adalah sebuah solusi bagi siapapun yang ingin mempermudah pengunjung blog agar dapat secara cepat mengcopy semua yang sudah terpostingkan. Hanya dengan KLIK pada button "Select All and Copy", maka semua langsung dapat terpindahkan ke pengunjung. Memang untuk memberikan layanan ini kita tak mungkin melakukannya tanpa script. Hal yang teramat berbeda yang terjadi apabila kita menggunakan textarea. Dengan textarea maka kita sama sekali tak memerlukan tambahan script atau kode html satupun. Namun karena menggunakan textarea membuat kita mengalami banyak keterbatasan, maka bisa dikatakan lebih banyak blogger yang lebih suka menggunakan tag yang lain. Yah ... karena dengan leluasa banyak hal yang bisa divariasikan atau dikreasikan sehingga lebih mampu memberikan lebih banyak gaya hingga blog menjadi lebih hidup. Apapun dapat dicopy melalui fungsi ini. Mungkin selama ini sampeyan lebih banyak menggunakan tag DIV, p, pre, b, em, h2, h3 atau apaupun lainya, maka silahkan gunakan script ini dan selesaikan semua permasalahan tentang copy paste yang biasanya harus dilakukan dengan menarik-narik mouse hingga molor-molor nggak karuan. O ..., yah, sebelum sampai ke inti tutorialnya, silahkan lihat DEMO Select All and Copy DIV dengan KLIK link demo di bawah ini.

D E M O

Javascrip dan Kode CSS "Select All and Copy DIV"

Selain javascript, dalam tutorial ini juga telah aku sediakan kode CSS pembentuk button yang sangat cantik dan bisa mentul-mentul seperti yang terlihat di DEMO.

Javascript

<script type="text/javascript">
function slekAll(objId){selek();
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();}
else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);}}
function selek() {if (document.selection)
document.selection.empty();else if (window.getSelection)
window.getSelection().removeAllRanges();} 
</script>

Kode CSS

.GRslek {
      width: 160px;
      height: 33px;
      background: #666 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/th_gradBlueH2V53.gif) bottom left;
      padding: 5px 10px;
      margin-bottom: 5px;
      text-align: center;
      color: #FF9900;
      border: 2px solid #666;
      text-shadow: 1px 1px 1px #000;
      font: 16px Helvetica;
      border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      box-shadow: 1px 1px 8px #000;
      -moz-box-shadow: 1px 1px 8px #000;
      -webkit-box-shadow: 1px 1px 8px #000;
      clear: both;  
      }
.GRslek:hover {
      color: red;
      box-shadow: 1px 1px 15px #000;
      -moz-box-shadow: 1px 1px 15px #000;
      -webkit-box-shadow: 1px 1px 15px #000;
      border: 2px inset #333;
      background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/th_gradKlawuV56H2.gif) bottom left;
      }
.GRslek:active {
      height: 37px;
      border: 2px outset #000; 
      font-size: 14px; 
      box-shadow: -2px -2px 8px #000;
      -moz-box-shadow: -2px -2px 8px #000;
      -webkit-box-shadow: -2px -2px 8px #000;
      background-position:center left;background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/th_gradKlawuV56H2.gif);
      }

Cara menyimpan javascript dan kode CSS

  1. Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
  2. Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
  3. Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
  4. Di sinilah javascript dan kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan, baru lakukan pencarian kode.
    5. Letakkan seluruh kode CSS tepat di atas kode ]]></b:skin>. Lanjutkan dengan meletakkan javascript di bawah ]]></b:skin>.
  5. KLIK SAVE Template (Simpan Template).

Cara menggunakan kode HTML

  1. Silahkan gunakan kode HTML Select All and Copy DIV diruang posting.
  2. Gunakan kode HTML berikut untuk mewadahi teks atau kode yang akan diberikan fasilitas Select All and Copy.
    3. DIV : Text-Image

    <input class="GRslek" type="button" value="Select All and Copy" onClick="slekAll('anumu2')" />
    <div id="anumu2">
    <div class="box">

    Masukkan semua Teks atau gambar/image di sini !

    </div>
    </div>


    PRE : untuk Kode HTML dan Javascript

    <input class="GRslek" type="button" value="Select All and Copy" onClick="slekAll('anumu3')" />
    <div id="anumu3">
    <pre class="kode">

    Tuliskan script dan kode HTML di sini

    </pre>
    </div>

    Sebagai contoh gunakan kode HTML di bawah ini

    <input class="GRslek" type="button" value="Select All and Copy" onClick="slekAll('anumu7')">
    <div id="anumu7">
    <div class="box" style="height: 600px;width: 400px; padding: 20px 10px; border: 2px solid blue; background: black; color: #999;"><h2>Javascript "Select all and Copy"</h2>
    <img src="http://img.theomegaproject.org/thumbs/2010/05/457.jpg" style="float:left;margin: 0 10px 5px 0;" />Javascript yang digunakan untuk copy and select DIV ini, akan sangat bermanfaat bagi siapapun yang tak biasa menggunakan textarea. Semua bisa kita isikan di dalam DIV special dengan pelengkap "Select and Copy" ini. Anda bisa menuliskan sembarang teks atau kode html, baik yang terwadahi tag DIV, p, h1 , h2 ..., b, em, span ataupun yang lain. Masukkan saja apa yang anda perlukan untuk bisa dengan mudah dicopy oleh pengunjung blog. Mau berita terbaru tentang gosip artis? Menu masakan, ... atau mungkin obat kutil, panu kurap dan kudis serta exim? He .... ... he ... silahkan ... silahkan ! Semua saya serahkan ke sampeyan semua! Silahkan coba dengan "KLIK" di button yang bisa mentul-mentul yang sudah saya sediakan!</div></div>
  3. Perhatikan pada kode anumu2 dan anumu3. Kode ini harus selalu berbeda disetiap sampeyan menggunakan fungsi Select All and Copy. Ini hanya berlaku di setiap posting saja (pada halaman yang sama). Rubahlah menjadi anumu1, anumu4, anumu5 atau mungkin bentuk lain seperti anumukecil. He .... he .... Nggak apa-apa, kok. bila pakai lima bisa dalam bentuk anumukecil, anumungantuk, anumuanuku, anumuhitam dan anumubelang. He ... he ... Boleh-boleh saja! Nggak ada yang ngelarang, yang penting selalu berbeda. Setelah posting baru sampeyan dapat menggunakan kode yang sama seperti yang seperti di atas.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

Comments

Post a Comment