> Cara Membuat CodeBox Pada Postingan Blog

Cara Membuat CodeBox Pada Postingan Blog

- February 19, 2023 - oleh
Cara Membuat CodeBox Pada Postingan Blog

Lihat lah Hasilnya : Demo Codebox CodeBox Pada Postingan Blog

Hallo Semuanya Selamat Datang di onnews.my.id

Jika Anda pernah berbagi kode dengan pengunjung blog, kamu benar-benar membutuhkan Codebox. Oleh karena itu, pada artikel ini kita akan membuat kotak kode yang elegan. Dengan bantuannya, Anda dapat membagikan kode dengan pengunjung Anda di kotak kode yang elegan. Tombol salin juga telah ditambahkan sehingga mengklik tombol ini dapat menyalin kode.

Codebox for Blog Posts
© onNews.my.id | Codebox untuk postingan blog

Sebeleum kita memulainya marilah kita lihat demonya

Bagaimana Caranya Membuat Stylish Codebox?

Membuat Code Box Pada sebuah postingan blog tidak memerlukan banyak pengetahuan tentang HTML, CSS, atau JS karena disini admin akan membagikannya buat pengunjung blog ini. yang harus kamu lakukan adalah menerapkan kode di tempat yang tepat di XML tema blog kamu.

Arikel Menarik Lainnya

Pentng!Sebelum memualianya sebaiknya kamu mengunduh/atau menyimpan theme blog kamu agar sesuatu yang buruk tidak terjadi pada bog kamu.

Langkah 1: Pertama Lakukan Log in Terlebih Dahulu Blogger.

Langkah 2: Pada Halaman Home, Silahkan klik Theme.

Langkah 3: Kemudian Pilihlah 'customize'

Langkah 4: Lalu Klik Edit HTML, dan silahkan di seeting sesuai step by steps

Langkah 5: pertama carilah code ]]></b:skin>  dan paste kan Code CSS di atas tanda tersebut.

Jika template Blog kamu memiliki fitur dark mode, dan jika kamu menginginkan warna yang berbeda saat dalam dark mode, kamu dapat menyesuaikan kode sesuai kebutuhan Anda. Setiap template dapat memiliki kelas mode gelap yang berbeda, jadi silakan sesuaikan, sesuai dengan selera.

/* Codebox by Fineshop Design */
.cBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px}
.cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease}
.cBox .cBoxB:hover{opacity:.8}
.cBox .cBoxB .icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center}
.cBox .cBoxB.copied{background:#2dcda7}
.cBox .cBoxB.copied .icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")}
.cBox pre{min-height:350px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.cBox pre::before, .cBox pre::after{content:''}
.darkMode .cBox{background:#2d2d30}
.darkMode .cBox pre{background:#252526;color:#fffdfc}

Langkah 6: Tambahkan Kode CSS berikut tepat di bawah ke Kode CSS yang telah kami tambahkan di Langkah no 5.

/* 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)}

Note that we already have used the above CSS Codes in previous posts. If you already have added it in your Theme XML, then skip this step and follow the next steps.

Langkah 7: Paste the following HTML just below to <body> tag. If you don't find it, it is probably already parsed which is &lt;body&gt;.

<!--[ Toast Notification by Fineshop ]-->
<div id='toastNotif' class='tNtf'></div>

Again don't add if you already have added it.

Langkah 8: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is &lt;/body&gt;.

<script>/*<![CDATA[*/ /* Codebox Script by Fineshop Design */ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

Langkah 9: Save the changes by clicking on this icon

That's done! Now use the following HTML Codes in your Blog Posts wherever you want to add Codebox.

<!--[ Code Box 1 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>HTML</span>
    <!--[ Copy Button ]-->
    <button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code1'>
    <pre>Your_codes_here</pre>
  </div>
</div>

<!--[ Code Box 2 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>CSS</span>
    <!--[ Copy Button ]-->
    <button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code2'>
    <pre>Your_codes_here</pre>
  </div>
</div>

<!--[ Code Box 3 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>JS</span>
    <!--[ Copy Button ]-->
    <button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code3'>
    <pre>Your_codes_here</pre>
  </div>
</div>

Selamat mencoba Semoga Berhasil dan tidak ada kendala

komentar yang tampil sepenuhnya tanggung jawab komentator seperti yang diatur UU ITE ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)