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 multi kolom widget di footer
    Membuat kolom dibawah footer dengan menambahkan css agar terlihat lebih menarik dan membuat ruang untuk widget yang di butuhkan. Dengan lebih banyak kolom di footer Blogger Anda, Anda akan memiliki ruang ekstra untuk mengakomodasi widget lainnya seperti Flickr foto dan update Twitter. Juga Anda dapat menempatkan widget yang lebih sering …
  • Meningkatkan kecepatan load dengan optimasi css
    Sekarang ini kecepatan website/blog menjadi faktor peringkat mesin pencarian, dan CSS optimasi mampu memainkan peran utama dalam meningkatkan kecepatan situs/blog tertentu. Di sini saya membagi beberapa langkah bagaimana mengoptimalkan CSS untuk kecepatan muat situs. 01Menghindari CSS eksternal/impor style sheet Mengimpor CSS lain ke CSS ak…
  • Recover Tulisan? Cara mengembalikan Posting
    Memulihkan posting Anda yang dihapus atau halaman dari Blogger mungkin tampak menjadi tugas yang menantang. Karena, semua data berada di bawah kepemilikan Google. Oleh karena itu, sulit untuk memulihkan database Anda melalui Hosting atau layanan lainnya. Selanjutnya, Blogger tidak memiliki fungsi pulih hanya memungkinkan untuk cadangan Posting…
  • Mengatasi blog pagger/navigasi link yang tidak muncul
    Umumnya, setiap blog blogger memiliki sebuah link navigasi untuk mengarahkan setiap laman, posting dan arsip saat di buka kecuali si admin/author menghilangkannya untuk tujuan tertentu. namun apa yang terjadi jika link navigasi ini tidak muncul, tentunya akan membuat pengunjung kesulitan menelusuri laman, posting dan juga arsip seperti yang di…
  • Cara mudah memasang forum di blog
    Instalasi Forum di blog BlogSpot tampaknya menjadi tugas terbilang sulit. Karena, semuanya di bawah kontrol Google. Oleh karena itu, akan sangat sulit untuk menjadi admin di forum pihak ketiga. Namun, ketika kita mengalami masalah kita juga akan menemukan solusinya. Cara ideal untuk menginstal sebuah forum di blogger adalah dengan menggunakan…
  • Trik memasang random banner di blogger
    Memasang banner di blog memang bukan sesuatu hal/topik pembahasan yang baru melainkan hal yang sudah lama di bahas, banyak para blogger memasang banner dengan tujuan tertentu, seperti periklanan, perujuk link tertentu ataupun sebagai penghasilan sampingan. umumnya banner ini memiliki dimensi yang bervariatif tergantung dari kebutuhan/tujuan te…

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