Cara Merubah Blockquote Jadi Kotak Script

Cara Merubah Blockquote Jadi Kotak Script - Situs web yang memuat kontent tutorial tentang web desain maupun bahasa programer seperti javascript, css dan html biasanya dilengkapi dengan kotak script atau code snippets untuk mengemas html, css dan javascript dalam tampilan yang propesional dan menarik di laman tutorial mereka.

Namun beberapa kasus beberapa jenis kotak script (pre code) umumnya menggunakan JavaScript library dan css pihak ketiga (CDN, Highlight.js, Prism.js. maupun Google Prettify) yang dapat menambah sedikit beban pemuatan laman situs.

Dan menggunakan kotak script dengan pre code syntax highlighting harus extra hati-hati agar kode html dan js yang di sematkan dapat ditampilkan dengan sempurna, biasanya diwajibkan untuk memparse kode "html dan js" sebelum disematkan dengan pre code (code snippets).

Ditutorial ini saya akan membagikan cara membuat kotak script yang dapat digunakan dengan tehknik yang lebih sederhana yaitu dengan cara merubah fungsi blockquote menjadi kotak script yang mirip dengan pre code. ikuti langkah-langkahnya sebagai berikut;

Membuat Kotak Script dengan Blockquote

1. Login ke blogger > Template > Edit HTML
2. Cari dan temukan style dasar "css blockquote" template anda kemudian ganti dengan css dibawah ini;

[code type="CSS"]blockquote{quotes:none;}
blockquote:before,blockquote:after{content:'';content:none;}
blockquote{margin:1.5em 0;padding:5px;background-color:#353535;border:1px solid #DADADA;padding-left:1em;font-family:"Monospace",Courier,Courier New;color:inherit;color:#fff;font-size:12px;display:block;}[/code]
Jika sebelumnya template blogger anda tidak memiliki style "blockquote" silahkan tambahkan css tersebut tepat diatas kode ]]></b:skin> kemudian save template.

Cara Penggunaan:

Highligt atau select code (javascript, htm atau kode css) kemudian klik tombol blockquote pada bar atas post editor blogger, lihat contoh gambar dibawah ini;

Cara menggunakan blockquote blogger

Demo Script Box

Demikian saja tutorial cara membuat / merubah fungsi blockquote menjadi kotak script, harap diperhatikan jika laman situs menggunakan iklan tengan artikel, posisikan blockquote diatas atau paruh atas konten dan dibawah atau paruh bawah konten agar tidak berbenturan dengan script iklan.