Cara Membuat Tag Pre Dengan Nomor Otomatis
Modjopahit - Cara Membuat Tag Pre Dengan Nomor Otomatis adalah sebuah cara yang mungkin akan banyak dipakai oleh penulis blog yang sering menyampaikan informasi mengenai tulisan kode program (karena hal ini sangat cocok dipakai).
Jika masih ada yang bingung dengan maksud judul tersebut diatas mungkin penjelasan gambar berikut bisa membantu.
Seperti kita ketahui bahwa setiap baris kode yang ditulis di dalam tag <pre> akan ditampilan dengan diberi nomor urut secara otomatis. Hal inilah yang dimaksud oleh judul tersebut diatas yaitu membuat tag pre dengan nomor otomatis.
Daripada kebanyakan basa-basi lebih baik kita langsung bahas mengenai langkah-langkah yang harus dilakukan untuk membuat tag pre seperti gambar tersebut diatas.
2. Pilih menu Template
3. Klik Edit HTML
4. Masukkan kode JavaScript berikut di dalam tag <head></head> atau CoPas kode dan letakkan diatas tag </head>
5. Masukkan kode CSS berikut kedalam kode HTML
6. Simpan template
7. Mulai posting >> Coba CoPas kode berikut pada saat menulis posting blog (dalam HTML mode)
8. Simpan >> Selesai
Untuk mengetahui apakah cara tersebut bisa berhasil atau tidak silahkan untuk dicoba secara langsung. Sekian posting blog mengenai cara membuat tag pre dengan nomor otomatis yang dapat kami sampaikan pada kesempatan kali ini. Jika masih ada pertanyaan silahkan disampaikan melalui form komentar.
Akhir kata kami ucapkan HAPPY BLOGGING dan Terimakasih atas dukungan dan kunjungannya.
Jika masih ada yang bingung dengan maksud judul tersebut diatas mungkin penjelasan gambar berikut bisa membantu.
Daripada kebanyakan basa-basi lebih baik kita langsung bahas mengenai langkah-langkah yang harus dilakukan untuk membuat tag pre seperti gambar tersebut diatas.
Cara Membuat Tag Pre Dengan Nomor Otomatis
1. Login kedalam akun blog2. Pilih menu Template
4. Masukkan kode JavaScript berikut di dalam tag <head></head> atau CoPas kode dan letakkan diatas tag </head>
<script type='text/javascript'>(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();</script>5. Masukkan kode CSS berikut kedalam kode HTML
body {background-color:white;padding:50px 50px}
pre {
background-color:#eee;
overflow:auto;
margin:0 0 1em;
padding:.5em 1em;
}
pre code,
pre .line-number {
font:normal normal 12px/14px "Courier New",Courier,Monospace;
color:black;
display:block;
}
pre .line-number {
float:left;
margin:0 1em 0 -1em;
border-right:1px solid;
text-align:right;
}
pre .line-number span {
display:block;
padding:0 .5em 0 1em;
}
pre .cl {
display:block;
clear:both;
}6. Simpan template
7. Mulai posting >> Coba CoPas kode berikut pada saat menulis posting blog (dalam HTML mode)
Untuk mengetahui apakah cara tersebut bisa berhasil atau tidak silahkan untuk dicoba secara langsung. Sekian posting blog mengenai cara membuat tag pre dengan nomor otomatis yang dapat kami sampaikan pada kesempatan kali ini. Jika masih ada pertanyaan silahkan disampaikan melalui form komentar.
Akhir kata kami ucapkan HAPPY BLOGGING dan Terimakasih atas dukungan dan kunjungannya.
Cara Membuat Tag Pre Dengan Nomor Otomatis
Reviewed by Admin BelajarCuan.Com
on
11.45
Rating:
Reviewed by Admin BelajarCuan.Com
on
11.45
Rating:
Tidak ada komentar:
Silahkan berkomentar tanpa mengandung SARA dan MENGHINA. Jika komentar terlihat tidak berhubungan dengan tema artikel maka secara langsung akan dianggap SPAM dan langsung dihapus. Mari kita budayakan berkomentar yang baik dan membangun....