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

  • Menerapakan jquery lightbox evolution
    Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox. untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik…
  • Membuat ucapan terimakasih di bawah komentar
    Pagi sobat blogger lagi liburan buat posting hiasan untuk blogger, kali ini saya mau share cara dan trik untuk membuat pesan ucapan terimakasih di bawah kotak komentar.   Triknya cukup mudah tinggal menambahkan css dan sedikit kode html di template sobat, langsung aja berikut ini caranya Buka editor template blogger anda sperti bias…
  • Memperbaiki ukuran thumbnail homepage
    buat sobat blogger yang mengalami masalah pada thumbnail/gambar Post.snippet dan post.thumbnail yang kurang jelas dan tidak sesuai ukuran pada tampilan posting static page/homepage, bisa menggunakan trik ini agar tampilan gambarnya bisa terlihat jelas dan sesuai. caranya cukup mudah dan gak ribet ikuti saja trik berikut perhatikan kode scrip…
  • Memasang meta tag agar blog lebih SEO Friendly
    Salam sobat blogger, share lagi ni buat lebih mengoptimalkan seo pada blog agar bisa tampil di halaman pertama halaman mesin pencari. tapi jangan lantas ini di jadikan trik utama karena masih ada trik trik lain yang perlu sobat lakukan untuk membuat blognya lebih seo, ini hanya sebagaian trik sja yang memang cukup efektif di hasilnya. sudah b…
  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…
  • widget amoung tanpa javascript
    Memasang widget amoung memang bukan hal yang rahasia bagi blogger, widget among berguna sebagai counter banyak user yang sedang mengunjungi laman di blog kita tapi mungkin penggunaan javascript dari widget ini menambah beratnya dan waktu memuat laman kita dalam blog apalagi blog sobat yang sdah memasang banyak javascript. untuk itu kali ini s…

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

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

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