Blogspot View Code HTML / Menampilkan Kode HTML pada postingan di Blogspot

Pada jaman dahulu ketika Saya masih baru memulai Bloging, Pernah suatu saat ingin menampilkan kode HTML atau semacamnya, Seperti biasa tulis title kemudian isi postingan pada mode Compose isi artikel, sesuaikan Bold italic underline dan lain sebagainya. Setelah yakin apa yang sudah Saya tulis, kemudian sebelum di Publish Saya pratinjau (preview) dan WAW alangkah kagetnya Saya melihat pratinjau itu karena kode HTML yang ingin Saya tampilkan hilang dari artikel entah kemana, Saya masuk lagi ke mode Compose cek Kode HTML nya masih ada dan jelas terlihat, coba di preview lagi, tapi tetep tidak muncul, ada apakah gerangan kenapa kode HTML yang Saya tulis tidak muncul di postingan, padahal Saya sudah pernah melihat Bloger lain yang menggunakan blogspot bisa menampilkan kode HTML.

Setelah saya googling akhirnya ketemu juga, kenapa script kode HTML yang saya tulis tidak bisa tampil di postingan.
Yaitu dikarenakan Script tersebut dianggap bagian dari kode Halaman itu sendiri, sehingga supaya bisa tampil kode Script HTML tersebut perlu di encode dan nanti ketika sudah di Publish otomatis Web akan men decode lagi script HTML tadi.

Yups itu adalah pengalaman indah pada waktu itu, dan jika ada yang belum tahu juga berikut cara untuk menampilkan kode / Script HTML pada postingan di Blogspot, ini juga berlaku di tempat lain.

• Siapkan alat dan bahan

Tentu saja Kode / Script HTML yang akan di tampilkan.

• Encode

Untuk encode bisa menggunkan aplikasi offline dan juga bisa lewat web, banyak penyedia jasa encode dan decode secara online / melalui web.
Disini saya coba jelaskan yang secara online, web nya bisa kalian gooling dengan kata sandi Free HTML Encoder silakan pilih salah satu sesuai selera. Misal saya pakai  dari Code Beatify.

• Copy Paste

Setelah masuk tinggal di kopi paste saja kodenya pada tempat yang telah disediakan.

• Hasil

sehingga hasilnya seperti ini

    <!--HTML-->
<div id="syntax"></div>

    <!--Javascript-->
<script type='text/javascript'></script>

    <!--CSS-->
.post-body img {
box-shadow: 0 0 10px #EEE;
height: auto;
Color:#0080ff;
Font:12px bold italic;
border-top:1px solid #333;
border-bottom:1px solid #666;
}
 

OK mudah bukan, selamat mencoba,.,
Akan tetapi tulisan masih biasa saja dan masih menyatu dengan tulisan artikel.

• Tambahan

Jika Anda ingin menambahkan variasi tampilan, anda bisa membuat dan atau mengedit suatu class, sehingga nantinya tinggal dipanggil saja. Pada umumnya template blogspot memiliki suatu class untuk menampilkan script HTML supaya terlihat mencolok dan berbeda dengan tulisan artikel.

Karena ini akan mengedit template jangan lupa untuk backup terlebih dahulu untuk mengantisipasi hal2 yang tidak diinginkan.

Masuk ke Template ==> Edit HTML

Cari dan temukan kode ini :
]]></b:skin>

Setelah ketemu letakkan kode berikut di atas tag kode tadi :

code {
   display: block;
   background: transparent;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-dgazCXRtYTF-uqQRwo6mJiFzEzBnMQDRfGwpIMtC0qDRUjAMjMzx9PdZUabmSy5L3a3P6Z9FH7vYuuTIyV20Y3tDdhy9elYMrzMu56tPOcDuU_ZKdADNUkr6e7_Gg0yczMZmQ6Tuz71/s320/codebg.gif);
   color: #335;
   border: 1px solid #E8E8D5;
   padding: 5px 10px;
   overflow: auto;
   margin: 1em 0;
   font-size: 0.9em;
   line-height: 1.5em;

untuk memastikan tidak ada duplikasi class letakkan kursor pada bagian paling atas dan search / cari (CTRL + F) kata code, apakah ada script yang mirip seperti itu, jika sudah ada berarti anda tidak perlu menambahkan lagi script kode diatas, Anda hanya perlu menyesuaikan saja misal mengganti Jenis Font, warna, atau background
atau jika anda takut masih tetap duplikasi anda bisa memberi nama class sendiri sesuai selera sehingga tidak mungkin duplikasi misal diganti dengan nama code123, atau code321.
Setelah itu Save Template.


Cara penggunaannya sama dengan cara diatas tadi hanya perlu sedikit penambahan / pemanggilan class code sedangkan untuk pre digunakan supaya script tetap tertata rapi, jika script yang kita tulis terlalu panjang.
perhatikan baris berwarna merah.

 <pre><code>

    <!--HTML-->
<div id="syntax"></div>

    <!--Javascript-->
<script type='text/javascript'></script>

    <!--CSS-->
.post-body img {
box-shadow: 0 0 10px #EEE;
height: auto;
Color:#0080ff;
Font:12px bold italic;
border-top:1px solid #333;
border-bottom:1px solid #666;
}  



</code></pre>

 Lihat Perbedaannya dengan yang pertama.
 Jika hasilnya belum sesuai coba chek melalui menu HTML pada saat menulis scipt.
dan yang terakhir adalah selamat berexperiment.
Terimakasih .