Cara Menambahkan Fitur Double Click To Copy Pada Syntax Highlighter

Blog Buttatoa | Double Click To Copy Pada Syntax Highlighter - Admin pernah membahas perihal ini pada postingan sebelumnya. Kalian bisa baca pada artikel "Redesign Template Blogger VioMagz👀" atau pada artikel "Redesign Template Blogger JetTheme👀" pada bagian cara menambahkan syntax higlighter.

Untuk tutorial kali ini, sedikit berbeda dengan yang telah diposting sebelumnya. Untuk lebih jelasnya kalian lihat syntax highlighter dibawah.

Pada syntax highlighter dibawah, ditambahkan beberapa fitur yaitu:

Konten pada syntax hihlighter dapat langsung di copy dengan hanya melakukan double klik.
Konten pada syntax hihlighter dapat diberikan label sesuai jenis konten yang dipasang seperti "css", "js", "html" atau hanya sekedar script biasa, sehingga pengunjung dapat lebih mengetahui jenis script tersebut.
Panjang kolom konten syntax highlighter dibatasi sehingga terlihat lebih rapi dan konten tetap dapat terlihat keseluruhan karena diberi fitur move left-right dan drop up-down.

Untuk memasang fitur double klik pada syntax highlighter diatas, ikuti langkah-langkah berikut ini:

1. Copy script CSS dibawah dan pastekan atau letakkan diatas kode ]]></b:skin>.

/* CSS Syntax Highligter By Blog Buttatoa */
.post-body pre{background-color:rgba(135, 147, 165, 0.09);border:1px solid rgba(69,88,108,0.8);border-top:30px solid rgba(69,88,108,0.8);border-radius:10px 10px 2px 2px;margin:0;padding: 12px;white-space: pre;overflow: auto}
.post-body pre code{color:#c67d48;font-size:13px;max-height:250px;display:block;font-family:'source code pro',menlo,consolas,monaco,monospace}
.CoPiEd 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:#5d5776;color:#ffffff;font-size:14px;font-family:inherit;border-radius:30px;padding:10px 20px; 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:480px){.CoPiEd 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}}
.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'}
.pre:not(.tb){position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto}
.pre:not(.tb)::before {content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;width:100%;font-size:11px;font-weight:bold;padding:0 15px;z-index:2;line-height:30px;color: #ffffff}
.pre:not(.tb).html::before {content:'.html';display:flex;justify-content:flex-end;position:absolute;right:0;width:100%;font-size:11px;font-weight:bold;padding:0 15px;z-index:2;line-height:30px;color: #ffffff}
.pre:not(.tb).css::before {content:'.css';display:flex;justify-content:flex-end;position:absolute;right:0;width:100%;font-size:11px;font-weight:bold;padding:0 15px;z-index:2;line-height:30px;color: #ffffff}
.pre:not(.tb).js::before {content:'.js';display:flex;justify-content:flex-end;position:absolute;right:0;width:100%;font-size:11px;font-weight:bold;padding:0 15px;z-index:2;line-height:30px;color: #ffffff}

2. Untuk Fitur Double Klik, masukkan Java Script dibawah dan pastekan diatas code </body>.

<b:if cond='data:view.isSingleItem'>
  <script>/*<![CDATA[*/ /* Double Click Copy Script by Blog Buttatoa */ 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("#CoPiEdNotif").innerHTML="<span>Copied to clipboard!</span>"},!1); /*]]>*/</script>
</b:if>

3. Untuk Fitur Notif Copied, Masukkan script dibawah ini dan letakkan dibawah kode </body>.

<!--[ Copied Notification By Blog Buttatoa ]-->
<div class='CoPiEd' id='CoPiEdNotif'/>

4. Input kode dibawah di dalam postingan kedalam mode html. Ganti teks berwarna orange dengan script yang ingin dipasang.

<div class='pre css notranslate'><pre><code>(Tulis Kode Disini)</pre></code></div>

Perhatikan kode berwarna biru diatas. Kalian ganti dengan css jika script yang kalian masukkan berupa script Cascading Style Sheets, ganti dengan html jika script Hypertext Markup Language dan ganti dengan js, jika itu script Java Script. Jika tidak termasuk dari ketiganya, kalian bisa hapus, maka tampilan nanti hanya akan muncul kode "<\>".

Nah, sekian tutorial kali ini, semuga bermanfaat, Wassalam.