Cara membuat penomoran otomatis pada tag pre

Cara membuat penomoran otomatis pada tag pre

HTML sitemap Trik

 Setelah sebelumnya saya share cara membuat header judul pada tag pre kali ini saya mau berbagi tentang cara bagaiman memberi urutan nomor pada tag pre yang bisa langsung hanya dengan menambahkan css saja dan sedikit penambahan kode html pada elemen tag pre. untuk bagaimana hasilnya silahkan di lihat di blog ini.

langsung ke topik pembahasan tentang trik yang akan kita lakuakan, sedikit manfat dari nomor tag pre ini adalah berguna untuk lebih mudah jika pengunjung ingin hanya mengutip sebagain kode saja pada baris nomor tententu.

silahkan anda buka editor template bloggernya seperti biasa dan cari kode </style> atau kode tag pembungkus css template blog sobat
jika sudah letakkan css di bawah ini di atas kode </style>

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-27pre.line-number {background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSJ58aeuLS9VRvgWHxPZU-HludDgPgoW23201MXSKuyfzUlsUuXa-Mkomn5jC_MmVg0CyuB0ytTwJGLT4VYiMq53yq8rMN_FRRUJtmSmyNOXGgpfJypuCodtgKzAOV0K9j2WQf1XH2xdQ/s1600/new-line-number.png)no-repeat top left;
padding-left:54px;
border-left:none;
}
pre.line-number:after{content:"";
width:35px;
height:8px;
background-color:#39424e;
bottom:0;
left:0;
position:absolute;
}

pre.line-number[data-codetype]:before {
content:attr(data-codetype);
display:block;margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Oswald,Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}

untuk memasukkannya di dalam posting silahkan gunakan tag pre anda sebelumnya dengan menambahkan sedikit kode ini

1code-line:2-1class="line-number"

sehingga jadi seperti di bawah ini:

1code-line:3-12code-line:3-23code-line:3-34code-line:3-4<pre class="line-number" data-codetype="CSS"><code>.....tulis kode css......</code></pre>
<pre class="line-number" data-codetype="HTML"><code>....tulis kode html.......</code></pre>
<pre class="line-number" data-codetype="JavaScript"><code>....tulis kode javascript.......</code></pre>
<pre class="line-number" data-codetype="JQuery"><code>....tulis kode jquery.......</code></pre>

buat sobat yang belum memiliki tag pre silahkan buat terlebih dahulu.

demikian saja semoga berguna dan berhasil...

Artikel Terkait

  • Cara Membuat Tabel HTML
    Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial belajar HTML cara membuat tabel HTML ini kita akan membahas cara penggunaannya. Cara Membuat Tabel HTML dengan tag <table&…
  • Cara Membuat Daftar/List
    Langkah berikutnya yang akan kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>. Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered l…
  • Menambahkan Gambar di HTML
    Atribut src dalam tag <img> Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan alamat absolute telah kita bahas pada Belajar HTML: Cara Membuat link di HTML). Untuk contoh kode HTML tentang image i…
  • Memilih Aplikasi Editor HTML
    Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi editor HTML digunakan untuk mempermudah kita membuat kode HTML. HTML sendiri pada dasarnya hanya text biasa yang ditulis dalam kode-kode khusus. Web Browser-lah yang akan menerjemahkan kode HTML ini menjadi sebuah tampilan halaman web. Untuk membuat kode HTML maupun halaman …
  • Cara Membuat Judul (heading) di HTML
    HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih di kenal dengan istilah: heading. Heading dirancang terpisah dari paragraf. Tag Heading biasanya digunakan untuk judul dari paragraf, atau bagian dari text yang merupakan judul. Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>,…
  • Pengertian DTD atau DOCTYPE
    Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML. DTD memiliki banyak versi tergantung kepada versi HTML yang kita gunakan. Pada contoh diatas, kita menggunakan DTD versi HTML 5…

5 komentar

  1. Kang Mousir27 Maret 2014 pukul 17.56

    lebih simple, tapi sayangnya ada batasnya cuma sampai 85 soalnya line numbernya pake gambar. Mungkin bisa dicoba dengan bumbu javascript :D

    BalasHapus
    Balasan
    1. Dafin defandaky27 Maret 2014 pukul 23.05

      ribet gan javascriptnya, nanti coba pkek css backgraund-color tapi masih belum tau hasilnya :)

      Hapus
    2. Dafin defandaky29 Maret 2014 pukul 03.20

      mungkin bisa di coba seperti ini gan javascripnya &lt;script type='text/javascript'&gt;
      (function() {
      var pre = document.getElementsByTagName('pre'),
      pl = pre.length;
      for (var i = 0; i &lt; pl; i++) {
      pre[i].innerHTML = '&lt;span class="line-number"&gt;&lt;/span&gt;' + pre[i].innerHTML + '&lt;span class="cl"&gt;&lt;/span&gt;';
      var num = pre[i].innerHTML.split(/\n/).length;
      for (var j = 0; j &lt; num; j++) {
      var line_num = pre[i].getElementsByTagName('span')[0];
      line_num.innerHTML += '&lt;span&gt;' + (j+1) + '&lt;/span&gt;';
      }
      }
      })();
      &lt;/script&gt;

      Hapus
  2. Almamater Jakarta28 Maret 2014 pukul 07.52

    masih awam banget sama bahasa ginian :(

    BalasHapus


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...