Membuat Hightlight Code di blogger

Assalamu'alaikum Wr. Wb.

Ketemu lagi nih..
kali ini saya akan memberikan Tutorial kepada pembaca tentang Cara membuat Highlight Code di Blog.
OK langsung simak saja yah :3 ...

Sudahkah kalian mengerti untuk apa Highlight code pada blog itu?
kalau belum mengerti, Highlight code adalah suatu kode html, script ataupun CSS dengan tampilan tulisan kode yang berwarna-warni dan memudahkan kita untuk memberikan tutorial yang bersangkutan dengan html, script ataupun CSS.
OK mari simaklah tutorial berikut ini ..

1. Login ke Blog kalian masing-masing
2. Masuk ke Template kemudian klik Edit HTML
3. Cari kode </b:skin> apabila tidak ada maka carilah kode </style>
4. Copy kode dibawah ini, dan Pastekan ke atas kode [[></b:skin> atau </style> tadi.

code untuk CSS

1. Highlight Code
2. ******************************************/
3. #BDRS pre {
4. font-size: 12px;
5. line-height: 20px;
6. width: 580px;
7. background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_XCTJUkL6NCTrvMq7EVGcrEsLYeGEiOO-2EHN3JCe5PXAGBbtDg_7G0by36C6B3hwhR1G-ByHyenqZcizVUeNykMC-Ym0ccs4jd5w5sLkcy-qWs7UCx3ZlhysCdWQMSMWk0mqEhU1yY/s1600/brown.png);
8. }
9. #BDRS pre code { display: block;overflow: auto; height:auto; }
10. #BDRS ol { list-style: decimal; margin-left: 0px; margin-top:-1px; padding-right:10px; }
11. /*** Blog Design CSS and ***/

Keterangan : Kode tulisan warna merah pada kode CSS merupakan link gambar latar belakang highlight kode ini. Bila 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 Background.

Gambar-gambar background :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnCvNeoN8QBRhtGDJa4vcKG9aK1VV6-3FTUEEYrEj8txAM_11eDL28sDFR1M-GEq1kGVjOeNFNoidYs48DG2D_Gc8N4KdGHEDO-Od1FJ6aUrR8yFPwHvYgSFUaZcOFzl_olfDnMfGcVqg/s1600/bg.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaBexplQ3O2N6UjWEYIojyGLW4MjKcIAXd3BsRwxlu62umDIlXG_S0Xln33afc_7zkjE0v5n7KYK8IJBQaFfwy0Qvc-N8QPTlYg_cdFBHpBdnl6l79mZ1lslK_B6rgHjJeiyi87iSGDY/s1600/black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDUJ32SOCo27ulH7esNUctVaguO3P55zuU0hG3pzPDmp48boHgBMkIViy-qe0GLxTKOrTAHecFDjq0BRHtS2Wnn0n_Aq4FsbK61b-I73yb-3ITANkCzW3HnAG68GmfB2gMHv269z4Vm3Q/s1600/blue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_XCTJUkL6NCTrvMq7EVGcrEsLYeGEiOO-2EHN3JCe5PXAGBbtDg_7G0by36C6B3hwhR1G-ByHyenqZcizVUeNykMC-Ym0ccs4jd5w5sLkcy-qWs7UCx3ZlhysCdWQMSMWk0mqEhU1yY/s1600/brown.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NvVH_5Abtm_I-1g3B_2qiYfiIBOXEYkuwod_hw18omzJKn-2of2yUXyPvm36zRJzX4BDG71KpNB1X1fAOqIhpTD6WTHxHEUaMSOwcQIplzyU-zb2WuBNQQIMnk6eFoWjIIHuNw4jdhw/s1600/green.png

Nah diatas itu adalah gambar-gambar untuk Backgroundnya, sebenarnya kalian bisa membuat gambar backgroundnya sendiri. ^_^
Next.

5. Cari kode </head>
6. Setelah itu, Copy dan Pastekan ke Kode di bawah ini tepat diatas kode </head> tadi.

letakkan diatas </head>

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

7. Save dan SELESAI ..

eeeits belum dulu jangan di tutup sekarang tutorial cara memasangnya pada saat posting.

1. Klik Icon Pensil dengan Background Orange di pojok kiri atas ( Buat Entry/Post )
2. Mula-mula dari "Compose" kemudian klik "HTML" di pojok kanan atas.
3. kemudian Copy kode di bawah ini sesuai dengan apa yang ingin kalian tulis.

Code untuk CSS yang di post

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

Code untuk HTML/Script di Post

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

MASUKKAN KODE CSS ANDA DISINI

</code></pre></div>

Keterangan :
1. Code diatas di pastekan ke "HTML" bukan "Compose"
2. Code warna Biru ganti dengan CSS, HTML, Script yang ingin kalian Post

*NOTIF : Highlight ini banyak digunakan untuk tutorial yang menyangkut tentang kode-kode CSS, HTML, maupun Script. Apabila kalian mengalami masalah dalam pemasangannya silahkan Coret-coret di Kolom Komentar

OK Sekian dari saya apabila ada kalimat/kata-kata yang kurang berkenan saya minta Maaf yang sebesar-besarnya. ^_^

Wassalamu'alaikum Wr. Wb.

Keyword :

Cara memasang Highlight pada blog
memasang highlight code di blog
memasang highlight kode di blog

memodifikasi kode pada postingan blog