Zypo Code || Situs Pemrograman Indonesia

Kode Warna HEX || Kode Warna Paling Populer

noreply@blogger.com (Nipozea) — Thu, 09 Jun 2022 05:00:00 +0000

Kode Warna #5C97BF
Kode Warna #4B77BE
Kode Warna #1F3A93
Kode Warna #2574A9
Kode Warna #67809F
Kode Warna #34495E
Kode Warna #3A539B
Kode Warna #1E8BC3
Kode Warna #6BB9F0
Kode Warna #22313F
Kode Warna #336E7B
Kode Warna #19B5FE
Kode Warna #89C4F4
Kode Warna #2C3E50
Kode Warna #3498DB
Kode Warna #22A7F0
Kode Warna #94E0EE
Kode Warna #52B3D9
Kode Warna #59ABE3
Kode Warna #26A65B
Kode Warna #1E824C
Kode Warna #00B16A
Kode Warna #2ABB9B
Kode Warna #4DAF7C
Kode Warna #03A678
Kode Warna #26C281
Kode Warna #019875
Kode Warna #3FC380
Kode Warna #16A085
Kode Warna #2ECC71
Kode Warna #C5EFF7
Kode Warna #C8F7C5
Kode Warna #049372
Kode Warna #36D7B7
Kode Warna #66CC99
Kode Warna #1BA39C
Kode Warna #1BBC9B
Kode Warna #65C6BB
Kode Warna #BFBFBF
Kode Warna #ABB7B7
Kode Warna #DADFE1
Kode Warna #95A5A6
Kode Warna #C5DCE2
Kode Warna #BDC3C7
Kode Warna #EEEEEE
Kode Warna #D2D7D3
Kode Warna #F0E2C5
Kode Warna #EB9532
Kode Warna #E67E22
Kode Warna #F27935
Kode Warna #F9BF3B
Kode Warna #F7CA18
Kode Warna #F9690E
Kode Warna #F39C12
Kode Warna #D35400
Kode Warna #F4D03F
Kode Warna #F5AB35
Kode Warna #EB974E
Kode Warna #F2784B
Kode Warna #F4B350
Kode Warna #E87E04
Kode Warna #E74C3C
Kode Warna #CF000F
Kode Warna #C0392B
Kode Warna #D64541
Kode Warna #EF4836
Kode Warna #96281B
Kode Warna #D91E18
Kode Warna #E26A6A
Kode Warna #FF0000
Kode Warna #F22613
Kode Warna #E08283
Kode Warna #9B59B6
Kode Warna #8E44AD
Kode Warna #BE90D4
Kode Warna #BF55EC
Kode Warna #9A12B3
Kode Warna #913D88
Kode Warna #722D6A
Kode Warna #740A4E

Cara Pasang JQuery pada Blog

noreply@blogger.com (Nipozea) — Thu, 09 Jun 2022 05:00:00 +0000

Pengertian JQuery

JQuery adalah sebuah library Javascript yang meringkas dan menyederhanakan penulisan fungsi dara berbagai macam kumpulan code yang di Minify sehingga pengembangan website bisa dikerjakan lebih mudah dan cepat

Pemasangan JQuery

Cara memasang JQuery di blog dan website sangat mudah. Kalian cuma perlu cooy script di bawah ini dan tempatkan pada template kalian masing-masing. Untuk tempat yang penyedia library JQuery ada banyak varian yang mungkin belum gw sebutin. PILIH SALAH SATU dari penyedia yang kamu sukai.

JQuery yang dikembangkan Official JQuery

<!-- Official JQuery CDN -->
<script src='https://code.jquery.com/jquery-3.6.0.min.js' integrity='sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=' crossorigin='anonymous'></script>

JQuery yuang dikembangkan GOOGLE

<!-- GOOGLE CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

JQuery yang dikembangkan Microsoft

<!-- Microsoft CDN -->
<script src='https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.js'></script>

JQuery yang dikembangkan CloudFlare

<!-- CloudFlare CDN -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

JQuery yang dikembangkan ASPnet

<!-- ASPnet CDN -->
<script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js'></script>

Kelebihan

Kompatibel hampir di semua Browser.
Meringkas penulisan Code.
Menyingkat waktu kerja.
Lebih mudah dalam membuat efek animasi.
Mempermudah modifikasi dan manipulasi elemen HTML.

Kekurangan

Percaya atau tidak percaya ya, banyak sekali blogger yang terobsesi dengan page speed menganggap pemasangan JQuery di blog dapat menurunkan ranking score di GTmetrix dan PageSpeed Insight.

Btw buat gw pribadi sih, itu bukanlah sebuah kendala dan kekurangan yaah. Jangan terlalu terpaku pada score yang diberikan oleh website penyedia layanan speed test. Yang penting blog kamu tetap ringan ketika diakses. Dan memasang JQuery di blog TIDAK menghambat loading blog sama sekali.

Tapi balik lagi yaa untuk masalah Fast Loading pada sebuath Blog, itu tergantung pemilihan Template sebuah Blog, Gambar, dan JQuery yang kalian pasang akan digunakan untuk apa. itu aja sih opini dari gw pribadi.

<!-- INFO -->
Kalian Pasang 1 Aja, Jangan Banyak-Banyak Ntar Tawuran ^_^

Membuat Accordion Untuk Blog Dengan CSS, JavaScript dan HTML

noreply@blogger.com (Nipozea) — Thu, 09 Jun 2022 02:00:00 +0000

Accordion Untuk Blog

Accordion yang dapat memunculkan dan menyembunyikan suatu konten tertentu dapat berupa teks, gambar dan lain sebagainya. yang pasti Kompatible untuk semua Platform

Biasanya widget ini digunakan untuk halaman FAQ atau blog Landing Page yang berguna untuk menjelaskan suatu pertanyaan dasar yang sering tanyakan user dari customer dan saat Pertanyaan diklik akan memunculkan jawabannya.

Untuk menerapkan kedalam Blog yang kalian gunakan, setidaknya kalian sudah tau mana kode CSS dan mana HTML di dalam blog. agar mempermudah melatakan Code tersebut

DEMO ACCORDION

Cara Pasang'Nya

Copy Terlebih dahulu CSS yang ada pada Syntax di bawah lalu lekatkan pada </b:skin>

/* CSS Accordion Zypo-Code */
.collapse {
	display:none
}
#accordion h3 {
	margin:0
}
.showx .collapse {
	display:block
}
.collapse .card-body {
	padding:10px 25px 40px;
	color:#555
}
button.btn.btn-link {
	display:block;
	background:#fff;
	border:none;
	outline:none;
	width:100%;
	margin:10px 0;
	padding:10px 25px;
	cursor:pointer;
	text-transform:none;
	text-align:left
}
button.btn.btn-link:before {
	content:'\f107';
	font-family:'Font Awesome 5 Free';
	font-weight:600;
	font-size:2rem;
	color:#122949;
	position:absolute;
	left:25px;
	top:15px;
	opacity:.7;
	transform:rotate(-90deg);
	transition:all .3s ease-in-out
}
.showx button.btn.btn-link:before {
	transform:rotate(0deg)
}
.card {
	background:#fff;
	box-shadow:0 2px 2px 0 rgba(0,0,0,0.1);
	border:1px solid #eee;
	border-radius:5px;
	position:relative;
	overflow:hidden;
	margin:10px 0;
	padding:0 0 0 40px
}
.card-header button h4 {
	font-weight:400;
	color:#122949;
	font-size:1.1rem;
	margin:0
}
#accordion .card-body img {
	margin:20px auto;
	border-radius: 7px
}

Lanjut Copy Script yang ada pada Syntax di bawah ini, lalu lekatkan pada </body>, kemudian Simpan

/* JS Accordion Zypo-Code */
<script>
//<![CDATA[
// Accordion FAQ
$("#accordion .btn").click(function() {
	var get_target = $(this).attr("data-target");
	$(get_target).slideToggle("fast");
	$(this).parent().parent().toggleClass("showx")
}), 
$(document).ready(function() {
	var get_target;
	"true" == $("#accordion .btn").attr("aria-expanded") && (get_target = $(this).attr("data-target"), $(get_target).slideToggle("fast"))
});
//]]>
</script>

Uji Coba Accordion

Buat Halaman/Postingan dalam bentuk Draft
Dibagian sudut kiri atas Kalian rubah Tampilan Menulis menjadi Tampilan HTML
Kemudian tempelkan kode dibawah ini untuk kalian kreasikan
Setelah kalian tempelkan lalu Publikasikan/Draft terserah kalian.

<!--HTML Accordion Zypo-Code-->
<div id='accordion'>
	<!-- CARD START -->
	<div class='card showx'>
		<div class='card-header' id='heading1'>
			<button aria-controls='collapse1' aria-expanded='true' class='btn btn-link' data-target='#collapse1' data-toggle='collapse'>
			<h4>What is Blogger?</h4>
			</button>
		</div>
		<div aria-labelledby='heading1' class='collapse' data-parent='#accordion' id='collapse1'>
			<div class='card-body'>
				Blogger is an American blog-publishing service that allows multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. The blogs are hosted by Google and generally accessed from a subdomain of blogspot.com. Blogs can also be served from a custom domain owned by the user (like www.example.com) by using DNS facilities to direct a domain to Google's servers.
			</div>
		</div>
	</div>
	<!-- CARD END -->
	<!-- CARD START -->
	<div class='card'>
		<div class='card-header' id='heading2'>
			<button aria-controls='collapse2' aria-expanded='true' class='btn btn-link' data-target='#collapse2' data-toggle='collapse'>
			<h4>This product have a guarantee?</h4>
			</button>
		</div>
		<div aria-labelledby='heading2' class='collapse' data-parent='#accordion' id='collapse2'>
			<div class='card-body'>
				In hac habitasse platea dictumst. Vivamus eget elementum nibh. Mauris ultrices, arcu et sollicitudin volutpat, massa nisl aliquet leo, non ornare nulla libero in metus. Integer et enim a lacus convallis dapibus.<center><img alt="Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNGtT6zr5ojwBOX8g4pQc7DmpVdWj-ISNP9BZ5GH9H50Gjr7KwtS1k0oZKvybIdMYqiEyPvjsevL7jvZQdN-_f_40DkZKK1U4_NWTR_gYLKXW0_y5G7nE7lsIw_C4vzETjMRfFfSliH3A/s400/material+design+ui.png"/></center>
			</div>
		</div>
	</div>
	<!-- CARD END -->
	<!-- CARD START -->
	<div class='card'>
		<div class='card-header' id='heading3'>
			<button aria-controls='collapse3' aria-expanded='true' class='btn btn-link' data-target='#collapse3' data-toggle='collapse'>
			<h4>How about the Documentation?</h4>
			</button>
		</div>
		<div aria-labelledby='heading3' class='collapse' data-parent='#accordion' id='collapse3'>
			<div class='card-body'>
				Maecenas pulvinar tincidunt ex. Sed ullamcorper suscipit nisi a semper. Ut sed egestas leo. Quisque at ex magna. Sed mollis faucibus mollis. Nunc sed aliquet lectus. Aenean massa neque, iaculis a augue nec, pretium mattis massa.
			</div>
		</div>
	</div>
	<!-- CARD END --></div>

Kok Gambar Panah'nya kaga ada ?

Ya iyaa lah kalo blom di pasang Font Awasome (untuk ICON) ya kga bisa, mending kalian Pasang dulu Script'nya. Dengan cara daftar GRATIS di situs'nya langsung

Membuat Syntax Highlighter Dengan JS dan HTML

noreply@blogger.com (Nipozea) — Wed, 08 Jun 2022 19:12:00 +0000

Syntax Highlighter

Syntax Highlighter adalah fitur teks editor yang sering digunakan untuk menampilkan source code (bahasa pemerograman), Syntax Highlighter biasanya memiliki huruf yang berwarna sesuai dengan tag atau class'nya,

Kali ini kita akan membuat Syntax Highlighter tanpa menggunakan CSS. Format ini digunakan untuk menuliskan baris kode HTML dalam postingan, biasa dipakai pada blog dengan tema koding atau tutorial blogging.


INFO : Ini Salah Satu Cara Yang Pernah Saya Gunakan Untuk Merubah Tampilan Warna Font di dalam Syntax Highlighter Agar Lebih Terlihat Estetik ^_^

Cara Membuat Syntax Highlighter

Login pada akun Blogger kalian masing-masing
Masuk ke dalam TEMA > Klik Arrow/Panah pada bagian kanan > Lalu pilih Edit HTML
Cari Kode <BODY> atau </BODY> lalu pastekan kode HTML dan JavaScript di bawah Ini

Btw kalian masukin'nya jangan double ya, cukup pilih salah satu'nya saja yaah.. yang penting di dalam <BODY>

Setelah kalian letakan lalu Simpan

<!-- Syntax Highlighter Zypo-Code -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Biasain Kasih Catatan Biar Kaga Lupa -->

Uji Coba Syntax Highlighter

Buat Halaman/Postingan dalam bentuk Draft
Dibagian sudut kiri atas (di bawah judul) Kalian rubah Tampilan Menulis menjadi Tampilan HTML
Kemudian tempelkan kode dibawah ini untuk kalian kreasikan
Setelah kalian tempelkan lalu Publikasikan/Draft terserah kalian.

<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>

Warna Font tidak Sesuai Harapan ?

Masih ada lagi Script yang akan saya bagikan, Cukup ganti Script <link rel="stylesheet" pada bagian atas'nya saja.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/>

Atau Kalian Boleh Coba Medel Yang Satu'nya Lagi.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>

Semoga Membuat Syntax Highlighter Dengan JS dan HTML di Blogger bermanfaat bagi kalian semua. Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.


INFO : Jika anda ingin memasukkan kode HTML, anda wajib mem-parse kode HTML terlebih dahulu, agar bisa terbaca oleh sistem Syntax Hightlighter

Membuat Running Text Menggunakan HTML

noreply@blogger.com (Nipozea) — Wed, 08 Jun 2022 17:05:00 +0000

1. Marquee Dasar

Elemen marquee digunakan untuk membuat teks atau media lain (seperti gambar atau video) bergerak baik secara horizontal maupun vertikal. Saat ini beberapa browser sudah tidak lagi mendukung elemen marquee sehingga elemen ini jarang digunakan.

<!DOCTYPE html>
<html>
  <head>
    <title>Atribut Tag Marquee</title>
  </head>
  <body>
    <marquee>Teks ini berjalan (Default)</marquee>
  </body>
</html>

Teks ini berjalan (Default)

2. Marquee Tag Direction

Atribu Direction digunakan untuk menentukan arah gerak dari konten yang berada di dalam <marquee>. Terdapa 4 nilai dalam atribut ini yaitu Right, Left, Up dan Down

<!DOCTYPE html>
<html>
  <head>
    <title>Atribut Direction di Tag Marquee</title>
  </head>
  <body>
    <marquee direction="right">Teks ini ke Kanan</marquee>
    <marquee direction="left">Teks ini ke Kiri</marquee>
    <marquee direction="up" height="100">Teks ini ke Atas</marquee><!-- Saya Tambah dengan Atribut Height agar Terlihat -->
    <marquee direction="down" height="100">Teks ini ke Bawah</marquee><!-- Saya Tambah dengan Atribut Height agar Terlihat -->
  </body>
</html>

Teks ini ke Kanan Teks ini ke Kiri Teks ini ke Atas Teks ini ke Bawah

3. Marquee Tag Behavior

Atribut behavior digunakan untuk menentukan tipe pergerakan marquee. Nilai yang dapat diisi di atribut behavior yaitu slide, scroll ataupun alternate. Jika Anda tidak membuat atribut behavior di tag <marquee> maka secara default nilainya adalah “scroll”.

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Behavior di Tag Marquee</title>
 </head>
 <body>
  <marquee behavior="scroll">Welcome</marquee>
  <marquee behavior="slide">Welcome</marquee><!-- Jika Menggunakan Slide Teks Akan Tertinggal -->
  <marquee behavior="alternate">Welcome</marquee>
 </body>
</html>

Welcome Welcome Welcome

4. Marquee Tag Scrolldelay

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Scrolldelay di Tag Marquee</title>
 </head>
 <body>
  <marquee scrolldelay="100">Teks ini di beri Delay 100</marquee>
  <marquee scrolldelay="400">Teks ini di beri Delay 400</marquee>
 </body>
</html>

Teks ini di beri Delay 100 Teks ini di beri Delay 400

5. Marquee Tag Scrollamount

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Scrollamount di Tag Marquee</title>
 </head>
 <body>
  <marquee scrollamount="15">Teks ini Menambah Kecepatan 15</marquee>
  <marquee scrollamount="25">Teks ini Menambah Kecepatan 25</marquee>
 </body>
</html>

Teks ini Menambah Kecepatan 15 Teks ini Menambah Kecepatan 25

6. Marquee Tag Loop

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Loop di Tag Marquee</title>
 </head>
 <body>
  <marquee loop="2">Teks ini diberi LOOP</marquee><br><!-- Setelah Loop 2x Teks Akan Menghilang-->
  <marquee loop="2" behavior="slide">Teks ini diberi LOOP + SLODE</marquee><!-- Jika Menggunakan Slide Teks Akan Tertinggal -->
 </body>
</html>

Welcome
Welcome

7. Gambar di Balut Marquee

<!DOCTYPE html>
<html>
  <head>
    <title>Gambar di Tag Marquee</title>
  </head>
  <body>
    <marquee bgcolor="black" scrollamount="25" direction="right" bgcolor="black">
      <img src="url-gambar-kalian-1.jpg"/>
  </body>
</html>

Membuat Syntax Highlighter Dengan CSS dan HTML

noreply@blogger.com (Nipozea) — Tue, 07 Jun 2022 19:12:00 +0000

Syntax Highlighter

untuk kali ini kita hanya akan membuat Syntax Highlighter 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.

Format ini digunakan untuk menuliskan baris kode HTML dalam postingan, biasa dipakai pada blog dengan tema koding atau tutorial blogging.


INFO : Ini adalah CSS Yang Saya Gunakan Untuk Menampilkan Syntax Highlighter Untuk Beberapa Website ^_^

Cara Membuat Syntax Highlighter

Login pada akun Blogger kalian masing-masing
Masuk ke dalam TEMA > Klik Arrow/Panah pada bagian kanan > Lalu pilih Edit HTML
Cari Kode </b:skin> atau </style> lalu pastekan kode CSS di bawah Ini

Btw kalian masukin'nya jangan double ya, cukup pilih salah satu'nya saja yaah antara </b:skin> maupun </style>

Setelah kalian letakan lalu Simpan

/* Syntax Highlighter Zypo-Code
================================ */
.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%
}
/* End Syntax Highlighter Zypo-Code */

Uji Coba Syntax Highlighter

Buat Halaman/Postingan dalam bentuk Draft
Dibagian sudut kiri atas Kalian rubah Tampilan Menulis menjadi Tampilan HTML
Kemudian tempelkan kode dibawah ini untuk kalian kreasikan
Setelah kalian tempelkan lalu Publikasikan/Draft terserah kalian.

<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>
<!-- Masukkan semua kode Javascript anda disini -->
</code></pre>
<pre class="jquery"><code>
<!-- Masukkan semua kode JQuery anda disini -->
</code></pre>

Semoga Cara Membuat Syntax Highlighter Menggunakan CSS dan HTML di Blogger bermanfaat bagi kalian semua. Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.


INFO : Jika anda ingin memasukkan kode HTML, anda wajib mem-parse kode HTML terlebih dahulu, agar bisa terbaca oleh sistem syntax hightlighter