7 September 2018 (Friday, September 7, 2018)

Hai! Berikut ini adalah Cara untuk membuat Kotak Tulisan dengan Fungsi Double Click to Select All pada Blogger :

• Buka Menu Themes, kemudian klik Edit HTML.
• Tambahkan Kode Script ini sebelum Kode </b:skin>
• Untuk memudahkan pencarian tekan Crtl dan F, ketik </b:skin> dan tekan Enter.

pre { position:relative;width:100%;padding:0;padding-top: 35px;margin:.5em auto;background-color:#ff6600;border-radius:3px;white-space:pre;word-break:normal;word-wrap:break-word;overflow:auto;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;-moz-tab-size:2;-o-tab-size:2;tab-size:2;}pre::-webkit-scrollbar,pre::-moz-scrollbar,pre content::-webkit-scrollbar,pre content::-moz-scrollbar,content::-webkit-scrollbar,content::-moz-scrollbar {display:none;}pre:after {width: 100%;background: #4d4d4d;display:inline-block;content:"Double Click to Select All";font-style:normal;font-weight:normal;font-size:12px;color:#fff;text-align: right;top:0;right:0;padding: 7px 10px;position:absolute;}pre content {max-height:500px;display:block;background:none;border:none;color:#fff;padding: 20px 20px 20px 20px;font-size: 14px;white-space:pre;overflow:auto}pre mark,content mark,pre content mark {background-color:#4d4d4d!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}pre[data-content="built2bless"]:before {background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}

• Kemudian Letakkan Kode ini diatas Kode </body> :

<script type="text/javascript">
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

• Dan Gunakan Kode ini Menampilkan Kotak Tulisan dengan Fungsi Double Click to Select All :

<pre data-content="built2bless"><content class="select-all">DOUBLE CLICK HERE TO SELECT ALL THIS TEXT - DOUBLE CLICK HERE TO SELECT ALL THIS TEXT - DOUBLE CLICK HERE TO SELECT ALL THIS TEXT</content></pre>

• Contoh Hasil :

DOUBLE CLICK HERE TO SELECT ALL THIS TEXT - DOUBLE CLICK HERE TO SELECT ALL THIS TEXT - DOUBLE CLICK HERE TO SELECT ALL THIS TEXT

• Ganti Bagian DOUBLE CLICK HERE TO SELECT ALL THIS TEXT dengan Tulisan Anda.

Semoga Bermanfaat, Happy Blogging :)

Tags : Blogger CMS (Content Management System)