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

  • Menambahkan kode CSS Threaded Comments
    Untuk langkah - langkahnya, silahkan sobat ikuti cara di bawah ini   Menambahkan Kode CSS Threaded Comments 1. Masuk ke Dashboard 2. Edit HTML 3. Centang Expand Template Widget 4. Temukan kode ini (Gunakan Ctrl dan F untuk mempermudah pencarian): <b:includable id='feedLinksBody' var='links'> 5. Tambahkan kode dibawah ini tepat sebe…
  • Javascript random banner
    Memasang banner atau iklan dengan gambar bukan hal baru yang sudah banyak di ketahui oleh semua sobat blogger, namun bagaimana cara agar sekumpulan banner atau banner yang lebih dari satu bisa di tampilkan secara berbeda - beda hanya di satu halaman bagi sobat yang belum tahu inilah triknya. sehingga banner sobat tidak bertumpuk dan berderet d…
  • Trik Sederhana Cara Proteksi Gambar
    Nah disini sebenarnya ada Trik Proteksi sederhana yang bisa anda lakukan untuk menghindari gambar anda di simpan dari tangan-tanagn jahil, dimana hasil dari gambar yang dicoba disimpan nantinya hanya berupa gambar kosong. Kode standar dari gambar biasanya seperti ini: <img width="500" height="375" src="http://defandaky.blogspot/contohgam…
  • Memasang Auto Read Mode Thumbnail No Image di Blogger
     Auto read more ini adalah sebuah trik dan cara untuk meringkas tampilan posting, seiring perkembangannya kini berkembang menjadi gaya keren tersendidi. bagaimana trik membuatnya? ikuti langkah di bawah ini.... Auto Readmore dengan Default Thumbnail   Untuk membuat Auto readmore dengan default thumbnail, anda perlu melakukan 2 langk…
  • Show hide searchbox blogger
    Membuat tampilan blog menjadi unik memang tidak ada habisnya dan kali ini saya coba untuk berbagi cara membuat kotak pencarian yang bisa di munculkan dan di sembunyikan pada blogger. lihat contoh berikut selain untuk menambah unik tampilan, trik kotak pencarian seperti ini juga bisa di gunakan untuk menghemat ruang dan kolom. bagaimana ca…
  • Trik untuk menghilangkan atribut default blogger
    Jika sobat ingin menghilangkan atribut atau element bawaan default dari blogger berikut ini adalah caranya. 1. Login ke Blogger.Com. 2. Kemudian menuju Design, lalu Edit HTML. 3. Dan cari kode berikut ini. ]]></b:skin> 4. Tepat diatas kode itu, ]]></b:skin> klik pada kode diatas, kemudian copy kode di bawah ini tepat di at…

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