cara membuat highlight code di blog

Cara membuat highlight code pada setiap postingan tutorial blog yang bersangkutan dengan kode kode html, script dan css menambah kesan unik pada halaman postingan anda. Mungkin anda sudah pernah melihat suatu halaman tutorial yang menyajikan suatu kode html, script ataupun css dengan tampilan tulisan kode yang berwarna warni ( Highlight Code ) sehingga postingan tersebut terlihat menarik, itulah yang disebut dengan " Highlight Code " yang akan saya jelaskan pemasangannya pada postingan kali ini. Ada juga teman teman bloger yang memakai sistem spioler seperti pada halaman blog ini untuk menyajikan kode kode yang ingin di copy, cara pemasangannya sama saja, Untuk memperjelas pemasangan kode pada postingan kali ini silahkan kunjungi atau klik Cara membuat spoiler di halaman blog . Buat para bloger mania yang mempunyai blog tutorial mengenai berbagai kode hal ini patut anda coba untuk menambahkan kesan halaman postingan yang berisi tutorial tersebut terlihat lebih unik, menarik dan profesional.

Pada postingan saya kali ini saya terinspirasi oleh seorang sahabat yang memiliki suatu web yang berurusan dengan berbagai tutorial.Setelah satu minggu saya pikir pikir bagaimana agar tampilan tutorial web sahabat jauh saya itu lebih menarik dan unik sehingga saya langsung memikirkan membuat highlight code ini, semoga beliau senang atas hasil jerih payah saya yang tidak seberapa ini, dan saya juga akan membagikannya buat teman teman bloger agar kita sama sama maju dalam hal blog ini. Untuk melihat bagaimana pemasangannya silahkan simak tutorial dibawah ini dan lihat demonya melalui tombol demo dibawah ini, langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Highlight Code
By : Rivai Silaban | Blog Design
Update : Minggu, 15 September 2013
******************************************/
#BDRS pre {
font-size: 12px;
line-height: 20px;
width: 580px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNObcQrYvplqNGND0ReQaVl3tIRjIUWasvlctQ5c_gK_1aaI5xQzT8zlzqA9ChhI2tiEB9To23XJDxw1GrAulRG2MEJ9QaCVIKTKCvFQocU_uwqgZ2bzFMfgtbTzWIFYT9bxaoKW3b6Dc/s1600/code_bg.png);
}
#BDRS pre code { display: block;overflow: auto; height:auto; }
#BDRS ol { list-style: decimal; margin-left: 0px; margin-top:-1px; padding-right:10px; }
/*** Blog Design CSS and ***/

Keterangan : Kode tulisan warna merah pada kode CSS merupakan link gambar latar belakang highlight kode ini. Bila anda ingin mengganti gambar latar belakangnya silahkan ganti kode warna merah tersebut dengan kode yang ada dibawah ini sesuai dengan selera anda. Sebelah kanan anda adalah gambar tampilan latar belakang dan sebelah kiri adalah kode dari gambar latar belakang.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3EL-meD5ca2wnKX-syu3TTajdmsP5VH4HqtvKVxQQ-a8xq3kax_VjhxcQdcecOSJODGpKdff2CBcZ7-J6Me-ObNmHDAO_TXbnHHiGjP5chPrByauU8XF8KN-K5jMZZg8B-HEJ9lNw8A/s1600/bg.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUeoEhNS_QeS1i9I_kWS6MVsEAp0PCg_lQQKbahlUD6vajY009OUf7MLQVGQH34K7cOQPJbwAhvLNsHyCPDb9mivxYbXDkFwGNLmLZIUHoUXpcr7gB1DoI7N-scWrRBKlLVji90eaQcMw/s1600/black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNPorznn2QjvLtwRq7piK-VKNpDmixFPMI8XJeRVddqMtPOxqsomUmPWKyAdl3OmCDxoClJb_K0icXGiqsVY2q1QU6FyUwOzlQDFoj5qYHC_i8r7bz3czisQdB7VSTtdNQxgto6sB4Ro/s1600/blue.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCDVLwsx4pR3747pO9N6kPIzSP4fGcI46gw7b2zAvicXcAGBJpf4eVX7h5t8eLoCkk99YCA-xwNUaPjm43_0EishwnDHYHhPARXmsGIDDYX9XdXTWulKCwXxVGwGiG1GodGNxnbwGHYw/s1600/brown.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9N0PYiiXqpMYWwFiHR62z5dxbpeAX5pdAW8jCNXQghSfZyDBU5pM_II1lbnze0-w9g0wwUMsYFAYpWKDrtXjsiZUVYIHa7JY77f796ZTq00RL3OD0bQO4G6YyaSxmiEy047hXFosukho/s1600/green.png

Install Script

1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
2. Pada Edit HTML template anda silahkan cari kode </head>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>

<!-- Rivai Silaban | BLOG DESIGN script start -->
<script type="text/javascript" src="http://yourjavascript.com/19341306142/jquery-1-3-2.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/12233901440/jquery-code.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/29153132040/code.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script End -->

Perlu anda perhatikan bila anda ingin memasang kode html ataupun script dengan sistem highlight ini anda harus terlebih dahulu mengkonvers kode tag pembuka dan penutup ( " < " dan " > " ) ataupun bentuk kode yang lain yang sejenis sebab kode tag tersebut tidak akan diterjemahkan pada halaman template anda sebagai tulisan melainkan sebuah kode, jadi tidak akan muncul bila kode tersebut tidak anda konvres terlebih dahulu.

Jadi setiap anda ingin memasukkan kode HTML atau SCRIPT pada sistem highlight anda harus mengkonvers kode tersebut.

Bila anda belum memiliki aplikasi untuk mengkonvers kode silahkan kunjungi tutorial Cara membuat aplikasi kode parse

Install dihalaman postingan

• Untuk pemasangan code tag Highlight ini tergantung dengan kebutuhan halaman blog anda,
• Untuk memasang dihalaman postingan artikel , anda hanya memasukkan highlight code CSS dan tag html dibawah ini pada artikel yang anda posting.
• Masuk ke " Post "
• Kemudian buat " Entri baru "
• Untuk menyematkan code dibawah ini pada postingan anda harus klik " HTML " ( bukan "compose " ) Setelah anda klik " HTML " masukkan code html dibawah ini ditempat yang anda inginkan, kemudian ganti tulisan warna BIRU pada kode yang ada didalam spoiler dibawah dengan tulisan kode html , script atau CSS anda,Untuk HTML atau Scriptnya silahkan konvers dulu.
• Setelah selesai lihat dulu " Pratinjau " sebelum anda save untuk melihat kesempurnaan pemasangan spoiler tersebut.
• Setelah benar benar sudah sempurna silahkan klik " publikasikan "

Code Highlight untuk CSS

<!-- BDRS code - start -->
<div id="BDRS" >
<h2>Highlight code untuk CSS</h2>
<div style="height:290px; overflow:auto">
<pre class="ln-"><code class="css">

MASUKKAN KODE CSS ANDA DISINI

</code></pre></div><!-- BDRS code - end -->

Code Highlight untuk HTML/Script

<!-- BDRS code - start -->
<div id="BDRS" >
<h2>Highlight code untuk html dan script</h2>
<div style="height:300px; overflow:auto">
<pre class="ln-1" ><code class="html" >

MASUKKAN KODE HTML DAN SCRIPT DISINI

</code></pre></div></div><!-- BDRS code - end -->

Keterangan Code

• Tulisan kode warna MERAH pada spoiler " CODE 1 dan CODE 2 " sematkan pada halaman postingan anda setiap anda ingin membuat kode highlight pada halaman postingan anda. Kode tersebut harus tetap terpasang, yang anda rubah hanyalah kode tulisan warna biru.
• Tulisan warna BIRU pada spoiler " CODE 1 " ganti dengan kode tulisan CSS anda bila anda ingin menampilkan tutorial highlight yang bersangkutan dengan CSS.
• Tulisan warna BIRU pada spoiler " CODE 2 " ganti dengan kode tulisan html ataupun script anda bila anda ingin menampilkan tutorial highlight yang bersangkutan dengan html dan Script..
• Bila anda paham dengan kode kode html dan script silahkan edit kembali semua kodenya sesuai kebutuhan anda, tapi bila anda belum memahaminya saya sarankan agar anda lebih baik tidak merubah apapun dari semua kode diatas agar tidak terjadi hal hal yang dapat menyebabkan kesalahan kode.

Kesimpulan

Highlight Kode ini kebanyakan digunakan hanya untuk keperluan tutorial yang bersangkutan dengan kode kode html maupun script.

Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.

Cara Membuat Highlight Code
Minggu, 15 September 2013
By : Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 11:56 AM