×

Owner / Author / Admin / etc

    Muhamad Arsad    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Blogger, Template, Widget, Internet, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Syantax Highligter Keren 2020

Cara Membuat Syantax Highligter Keren - Hai sabat blogger kesempatan kali ini saya akan membagikan tutorial cara membuat syantax highligter, memang sudah banyak yang membuat tutorial nya dan tampilan nya pun beragam dan kesempatan kali ini saya membagikan model seperti thumbnail postingan ini jika penasan simak penjelasan berikut ini.

Fungsi Syantax Highligter ini bertujuan utuk menaruh tempat kode html, javascript, css, dan lain sebagainya untuk menggunakan nya terlebih dahulu memparse kode tersebutb, baiklah langsung saja kita ke tutorial nya berikut ini

Cara Membuat Syantax Highligter Keren 

1. Silahkan login ke Blogger 
2. Klik Tema dan Edit HTML
3. Kemudian cari Kode ]]</b:skin> 
4. Silahkan masukan kode dibawah ini di atas kode tersebut
/* Sintak*/
.post-body code{color:#666;font-family:monospace,monospace;font-size:95%;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;background-color:rgba(255, 51, 0,.1);padding:2px 5px;border-radius:5px}
.post-body pre,.post-body pre code{font-family:monospace,monospace; font-size:90%;white-space:pre;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
.post-body pre{display:block;background-color:#223344;color:#60b2d2;padding:0px;margin:10px auto;white-space:pre; word-wrap:break-word;overflow:auto;position:relative; width:100%;-moz-tab-size:1;-o-tab-size:1;tab-size:1;border-radius:8px}
.post-body pre code::-webkit-scrollbar{width:5px;height:7px}
.post-body pre code::-webkit-scrollbar-track{background:#ddd}
.post-body pre code::-webkit-scrollbar-thumb{background:#888}
.post-body pre code::-webkit-scrollbar-thumb:hover{background:#52aace}
.post-body pre code{display:block;padding:10px 20px;background-color:#192633;color:#60b2d2;max-height:300px;line-height:20px;display:block;margin:27px 0px 0px 0px}
.post-body pre::after{content:'CODE';font-family:Poppins;sans-serif;position:absolute;top:0px;right:20px;color:#60b2d2;font-size:70%}
.post-body pre::before{background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z' fill='%2360b2d2'></path></svg>") center no-repeat;content:'';width:16px;height:16px;display:inline-block;position:absolute;top:5px;left:20px}

5. Kemudian simpan template
Untuk mengganti icon SVG nya silahkan ganti kode SVG dibawah ini
<path d='M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z' fill='%2360b2d2'></path>

Cara Menggunakan Syantax Highligter

1. Masuk kedalam postingan kemudian klik Entri Baru kemudian klik HTML, Bukan Comprose masukan kode dibawah ini kedalam Halaman tersebut

<pre><code>
Masukan Kode Anda Disini
</pre></code>

2. Simpan Postingan

Penutup

Nah demikian lah yang dapat saya bagikan kemudian bila ada pertanyaan saya akan membatu jika saya tau, trimakasih sudah berkunjung 
Admin Ganteng Tapi Jomlo :v
  • Facebook
  • Twitter
  • Instagram
  • 0 Response to "Cara Membuat Syantax Highligter Keren 2020"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel