×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Syntax Highlighter Menggunakan CSS keren di Blogger

Jagoanredesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Syntax Highlighter Menggunakan CSS keren di Blogger , Syntax Highlighter dengan menggunakan CSS agar blog anda tidak berat saat di kunjungi.
Cara Membuat Syntax Highlighter Menggunakan CSS keren di Blogger

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code, syntax biasanya ini memiliki huruf yang berwarna sesuai dengan tagnya, tapi pada kali ini berbeda kita hanya akan membuat satu warna saja dikarenakan ini hanya menggunakan CSS saja, karena apabila menggunakan huruf bewarna pastinya membuat blog anda akan menjadi lambat dan menambahkan javascript didalam template tersebut.

Cara Membuat Syntax Highlighter Menggunakan CSS keren di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.
/*   Syntax Highlighter by Jagoan Redesign  */
.post-body pre{background-color:#292e34;padding:0;margin:.5em auto;white-space:pre;position:relative;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding-top:50px;border-radius:6px}.post-body pre::before{content:'';background-color:#2962ff;height:40px;position:absolute;width:100%;top:0;color:#242831;font-weight:500;border-radius:6px 6px 0 0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:24px 24px;padding-top:10px}.post-body pre::after{content:'';background-color:#28cb41;position:absolute;width:20px;height:20px;top:15px;right:10px;border-radius:50%}.post-body pre code{color:#bfbf90;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre-wrap;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 code::after{content:'';background-color:#ffbd2d;position:absolute;width:20px;height:20px;top:15px;right:35px;border-radius:50%}.post-body pre code::before{content:'';background-color:#ff5f57;position:absolute;width:20px;height:20px;top:15px;right:60px;border-radius:50%}
.post-body pre{background-color:#292e34;padding:0;margin:.5em auto;white-space:pre;position:relative;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding-top:50px;border-radius:6px}.post-body pre.css:before{content:'';background-color:#2962ff;height:40px;position:absolute;width:100%;top:0;color:#242831;font-weight:500;border-radius:6px 6px 0 0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:24px 24px;padding-top:10px}.post-body pre.css:after{content:'';background-color:#28cb41;position:absolute;width:20px;height:20px;top:15px;right:10px;border-radius:50%}.post-body pre code{color:#bfbf90;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre-wrap;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 code.css:after{content:'';background-color:#ffbd2d;position:absolute;width:20px;height:20px;top:15px;right:35px;border-radius:50%}.post-body pre code.css:before{content:'';background-color:#ff5f57;position:absolute;width:20px;height:20px;top:15px;right:60px;border-radius:50%}
.post-body pre{background-color:#292e34;padding:0;margin:.5em auto;white-space:pre;position:relative;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding-top:50px;border-radius:6px}.post-body pre.javascript:before{content:'';background-color:#2962ff;height:40px;position:absolute;width:100%;top:0;color:#242831;font-weight:500;border-radius:6px 6px 0 0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:24px 24px;padding-top:10px}.post-body pre.javascript:after{content:'';background-color:#28cb41;position:absolute;width:20px;height:20px;top:15px;right:10px;border-radius:50%}.post-body pre code{color:#bfbf90;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre-wrap;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 code.javascript:after{content:'';background-color:#ffbd2d;position:absolute;width:20px;height:20px;top:15px;right:35px;border-radius:50%}.post-body pre code.javascript:before{content:'';background-color:#ff5f57;position:absolute;width:20px;height:20px;top:15px;right:60px;border-radius:50%}
.post-body pre{background-color:#292e34;padding:0;margin:.5em auto;white-space:pre;position:relative;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding-top:50px;border-radius:6px}.post-body pre.html:before{content:'';background-color:#2962ff;height:40px;position:absolute;width:100%;top:0;color:#242831;font-weight:500;border-radius:6px 6px 0 0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:24px 24px;padding-top:10px}.post-body pre.html:after{content:'';background-color:#28cb41;position:absolute;width:20px;height:20px;top:15px;right:10px;border-radius:50%}.post-body pre code{color:#bfbf90;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre-wrap;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 code.html:after{content:'';background-color:#ffbd2d;position:absolute;width:20px;height:20px;top:15px;right:35px;border-radius:50%}.post-body pre code.html:before{content:'';background-color:#ff5f57;position:absolute;width:20px;height:20px;top:15px;right:60px;border-radius:50%}
.post-body pre{background-color:#292e34;padding:0;margin:.5em auto;white-space:pre;position:relative;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding-top:50px;border-radius:6px}.post-body pre.jquery:before{content:'';background-color:#2962ff;height:40px;position:absolute;width:100%;top:0;color:#242831;font-weight:500;border-radius:6px 6px 0 0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:24px 24px;padding-top:10px}.post-body pre.jquery:after{content:'';background-color:#28cb41;position:absolute;width:20px;height:20px;top:15px;right:10px;border-radius:50%}.post-body pre code{color:#bfbf90;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre-wrap;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 code.jquery:after{content:'';background-color:#ffbd2d;position:absolute;width:20px;height:20px;top:15px;right:35px;border-radius:50%}.post-body pre code.jquery:before{content:'';background-color:#ff5f57;position:absolute;width:20px;height:20px;top:15px;right:60px;border-radius:50%}
.post-body pre{background-color:#292e34;padding:0;margin:.5em auto;white-space:pre;position:relative;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding-top:50px;border-radius:6px}.post-body pre.info:before{content:'';background-color:#2962ff;height:40px;position:absolute;width:100%;top:0;color:#242831;font-weight:500;border-radius:6px 6px 0 0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:24px 24px;padding-top:10px}.post-body pre.info:after{content:'';background-color:#28cb41;position:absolute;width:20px;height:20px;top:15px;right:10px;border-radius:50%}.post-body pre code{color:#bfbf90;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre-wrap;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 code.info:after{content:'';background-color:#ffbd2d;position:absolute;width:20px;height:20px;top:15px;right:35px;border-radius:50%}.post-body pre code.info:before{content:'';background-color:#ff5f57;position:absolute;width:20px;height:20px;top:15px;right:60px;border-radius:50%}
4. Selanjutnya anda SIMPAN dan Selesai.

5.  Cara menggunakan syntax  di Postingan, silahkan anda masuk ke menu HTML bukan COMPOSE, Pastekan kode dibawah ini di Postingan HTML.
<pre class="html"><code>
<!-- Masukkan semua kode HTML anda disini -->
</code></pre>
<pre class="css"><code>
<!-- Masukkan semua kode CSS anda disini -->
</code></pre>
<pre class="html"><code>
<!-- Masukkan semua kode HTML anda disini -->
</code></pre>
<pre class="css"><code>
<!-- Masukkan semua kode CSS anda disini -->
</code></pre>
<pre class="info"><code>
<!-- Masukkan semua kode info anda disini -->
</code></pre>
<pre class="javascript"><code>
<!-- Masukkan semua kode Javascript anda disini -->
</code></pre>
<pre class="jquery"><code>
<!-- Masukkan semua kode JQuery anda disini -->
</code></pre>
Jika anda ingin memasukkan kode HTML, anda wajib mem-parse kode HTML terlebih dahulu, agar bisa terbaca oleh sistem syntax hightlighter
Nah, itu adalah tutorial Cara Membuat Syntax Highlighter Menggunakan CSS keren di Blogger semoga totorial bermanfaat bagi anda semua. jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

1 Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel