Membuat Code Box dengan Double Click to Copy dan Syntax Highlighter pada Postingan Blogger

Menggunakan Code Box dalam menulis suatu kode pemrograman, menjadikan pembaca lebih mudah dalam menyalin kode yang ada pada postingan.

Penting: Karena tindakan selanjutnya akan melibatkan "Edit HTML", sebaiknya "Cadangkan" tema blogger untuk menghindari kerusakan pada tema.

Tutorial membuat code box di Blogger

1. Copy CSS ini

/* Code Box, Double click to copy */ .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:#F6F6F6;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)}
.pre:not(.tb) {position:relative;border-radius:3px; overflow:hidden; margin:1.7em auto; font-family:var(--fontC);}
.pre:not(.tb)::before, .cmC i[rel=pre]::before {content:'code'; display:flex; justify-content:flex-end; position:absolute; right:0; top:0; width:100%; background:inherit; color:var(--synxGray); font-size:10px; padding:0 10px; z-index:2 ;line-height:30px;}
.pre:not(.tb):hover::before{content:'Double click to copy |';display:flex; justify-content:flex-end; position:absolute; right:0; top:0; width:100%; background:inherit; color:var(--synxGray); font-size:10px; padding:0 10px; z-index:2 ;line-height:30px;}

Catatan: Jika tema blogger teman-teman telah mendukung "mode gelap" maka ubah darkMode dengan class mode gelap yang telah ada pada template.

2. Buka blogger dashboard, pastikan nama blog sesuai.

3. Klik "Tema" > Klik "tanda panah ke bawah" > klik "Edit HTML"

4. Tekan CTRL + F, lalu cari ]]></b:skin>

5. Paste CSS di atas ]]></b:skin> atau dapat mem-paste-nya di atas </head> dengan membuat <style></style> tags.

6. Tekan CTRL + F, lalu cari <body> dan paste HTML ini di bawahnya

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

Catatan: Jika template sudah memiliki HTML ini, maka tidak perlu mem-paste HTML ini lagi.

7. Tekan CTRL + F, lalu cari </body> dan paste Javascript ini di atasnya

<b:if cond='data:view.isSingleItem'>
  <script>/*<![CDATA[*/ /* Pre Content Copy Script  */ 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. Tekan CTRL + F, lalu cari </head> dan paste kode ini di atasnya

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
<style>pre.prettyprint{padding:2px;border:0}</style>

9. Klik logo "Simpan"

Tutorial Membuat Code Box dengan Syntax Highlighter pada Postingan Blogger

Jika teman-teman tidak ingin kode ditampilkan dalam syntax highlighter, maka lewati langkah ke 8. Setelah proses menyimpan selesai, berikut penjabaran langkah-langkah untuk menampilkan code box pada postingan.

Cara membuat postingan blogger dengan code box

1. Buka blogger dashboard > "Postingan" > postingan yang ingin menambahkan code box.

2. Klik "Tampilan HTML" > paste HTML ini.

<!--Syntax Highlighter-->
<div class="pre html"><pre style="max-height: none; white-space: pre-wrap;"><pre class="prettyprint"><code class="language-html">&lt;!--- Add Your Parse HTML code Here --&gt;</code></pre></pre></div>

Catatan: HTML di atas digunakan untuk code box dengan tampilan syntax highlighter. Untuk tampilan tanpa syntax highlighter menggunakan HTML di bawah ini.

<!--Basic color-->
<div class="pre html"><pre style="max-height: none; white-space: pre-wrap;">&lt;!--- Add Your Parse HTML code Here --&gt;</pre></div>

3. Gunakan HTML escape tool atau HTML parser atau encoder untuk mengkonversi kode Anda, lalu paste di antara <code class="language-html"> </code> untuk tampilan dalam syntax highlighter ataupun di antara <pre style="max-height: none; white-space: pre-wrap;"> </pre> untuk tampilan tanpa syntax highlighter.

tutorial menambahkan code box di postingan blogger

Penggunaan syntax highlighter pada tema blogger yang mendukung mode gelap, memerlukan modifikasi lebih lanjut. Referensi dari kode: bloggerxpose

Sekian tutorial membuat code box pada blogger. Terima kasih, sampai jumpa :)

Membuat Code Box dengan Double Click to Copy dan Syntax Highlighter pada Postingan Blogger

Tutorial membuat code box di Blogger

Cara membuat postingan blogger dengan code box

Formulir Kontak