Beranda
Blogger
JavaScript

Cara Menambahkan Double Click to Copy Konten Pre ke Blogger

Menambahkan Double Klik untuk Menyalin Konten Pre akan membantu pengunjung menyalin kode sintaksis dengan mudah.
Admin

Jika Anda memposting artikel terkait pengkodean di blog Anda, Anda mungkin telah menggunakan Penyorot Sintaks untuk memberikan kode kepada pengunjung Anda. Jika Anda ingin memudahkan pengunjung Anda menyalin kontennya ke clipboard, Anda wajib membaca artikel ini.

Copy Pre Tag Content Blogger
Copy Syntax Codes | Fineshop Design

Dalam artikel ini, kita akan menambahkan Klik Dua Kali untuk Menyalin Konten Awal ke Situs Web Blogger mana pun. Ini akan membantu pengunjung Anda menyalin konten tag <pre>. Mereka cukup mengklik dua kali pada Penyorot Sintaks untuk menyalin isinya ke papan klip, mereka tidak perlu lagi memilih kode dan menyalinnya.

Bagaimana cara menambahkan Double Click to Copy Pre Content?

Menambahkan Double Click to Copy Pre Content ke Situs Web Blogger tidak memerlukan banyak pengetahuan tentang HTML, CSS, atau JS karena saya sudah merancangnya untuk Anda. Yang perlu Anda lakukan adalah menerapkan kode di tempat yang tepat dalam XML Tema Blogger Anda.

Penting!
Sebelum kita mulai menambahkan kode dalam XML, saya sarankan Anda untuk mencadangkan tema Anda saat ini. Jika terjadi masalah, Anda dapat memulihkannya nanti.

  1. Pertama-tama Masuk ke Dashboard Blogger Anda.
  2. Pada Dasbor Blogger, klik Tema.
  3. Klik ikon panah bawah di samping tombol 'sesuaikan'.
  4. Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
  5. Sekarang cari kode ]]></b:skin> dan tempel Kode CSS berikut tepat di atasnya.

    Jika templat Anda memiliki fitur mode gelap, dan Anda menginginkan warna yang berbeda saat mode gelap, Anda dapat menyesuaikan kode sesuai kebutuhan. Setiap templat dapat memiliki kelas mode gelap yang berbeda, jadi silakan sesuaikan. Anda dapat mengganti kelas yang ditandai dengan kelas mode gelap templat Anda.

    /* Toast Notification by Fineshop */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

    Anda dapat menambahkan CSS berikut tepat di bawah CSS di atas jika Anda menggunakan Median UI, Fletro Pro, atau Template iMagz Versi Terbaru.

    .pre:not(.tb):hover::before{content:'Double click to copy | </>'}
.pre:not(.tb).html:hover::before{content:'Double click to copy | .html'}
.pre:not(.tb).css:hover::before{content:'Double click to copy | .css'}
.pre:not(.tb).js:hover::before{content:'Double click to copy | .js'}
  6. Tempel HTML berikut tepat di bawah ini ke tag <body>. Jika Anda tidak menemukannya, kemungkinan kode tersebut sudah diurai, yaitu &lt;body&gt;. 
    <!--[ Toast Notification by Fineshop ]-->
<div id='toastNotif' class='tNtf'></div>
  7. Sekarang tambahkan Kode JavaScript berikut tepat di atas tag </body>. Jika Anda tidak menemukannya, kemungkinan kode tersebut sudah diurai, yaitu &lt;/body&gt;. 
    <b:if cond='data:view.isSingleItem'>
  <script>/*<![CDATA[*/ /* Pre Content Copy Script by Fineshop */ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#toastNotif").innerHTML="<span>Copied to clipboard!</span>"},!1); /*]]>*/</script>
</b:if>
  8. Terakhir, Simpan perubahan dengan mengklik ikon

Format Penulisan Syntax:

<pre><code>Your_Code_Here</code></pre>

Format Penulisan Syntax untuk Versi Terbaru Median UI, Fletro Pro dan Template iMage:

<div class='pre html notranslate'>
  <pre>Your_Code_Here</pre>
</div>

Nama class yang Ditandai dapat diganti dengan html, css atau js sesuai kode Anda.

Selesai! Sekarang pengunjung Anda dapat mengklik dua kali untuk menyalin isi tag <pre>.

Penggunaan Alternatif

Anda dapat menggunakan Notifikasi Toast untuk memberi tahu pengunjung Anda dengan JavaScript. Contoh notifikasi diberikan di bawah ini.

<button onclick='myFunction()'>Click me</button>

<div id='toastNotif' class='tNtf'></div>

<script>
  function myFunction() {
    document.getElementById('toastNotif').innerHTML = '<span>Notification Here</span>';
  }
</script>

Jangan menambahkan <div id='toastNotif' class='tNtf'></div> karena kami telah menambahkannya di bawah tag <body>.

Demo

Ingin melihatnya bekerja?
Mari kita lihat!

Kesimpulan

Ini semua tentang menambahkan Copy Pre Content ke Situs Web Blogger. Semoga Anda menikmati artikel ini. Silakan bagikan artikel ini. Dan jika Anda mengalami masalah di bagian mana pun atau memiliki pertanyaan, silakan tanyakan kepada kami di kolom komentar. Terima kasih!

Copyright (c):
fineshopdesign.com

Posting Komentar