Penomoran Pada Blockquote Blog

Sebuah blockquote pada blogger biasanya dipakai untuk menyematkan sebuah catatan penting oleh penulis untuk mengutarakan bahwa inilah yang mesti diingat oleh pembaca tapi kali ini saya akan bahas cara memodifikasi blockquote dengan ditambahkan penomoran pada setiap barisnya dengan penomoran otomatis.

Nah caranya bagaimana membuatnya. Simak artikel kali ini

Pertama anda masuk ke dashboard blogger

Lalu ke Tema-Edit HTML

Kemudian masukan kode dibawah tepat diatas ]]></b:skin>

blockquote {
  background-color:#eee;
  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#444;
  overflow:auto;
  margin:0 0 1em;
  padding:1em;
}
blockquote,
blockquote .line-number {
  /* Ukuran line-height antara teks di dalam tag <blockquote> dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  display:block;
  white-space:pre;
}

blockquote .line-number {
  float:left;
  margin:-1em 1em -1em -1em;
  text-align:right;
  background-color:#f1f1f1;
  color:#acacac;
  padding:1em .2em 1em .2em;
  border-right:1px solid #e0e0e0;
}
blockquote br {
display:none;
}

blockquote .line-number span {
  display:block;
  padding:0 .7em 0 1em;
}

blockquote .cl {
  display:block;
  clear:both;
}

Kemudian jika sudah. Masukan kembali kode dibawah tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName('blockquote'),
    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>

Jika sudah lalu anda Simpan dan coba buat artikel dengan pakai blockquote. Maka akan dengan otomatis setiap baris baru akan ada nomornya disampingnya.
Dan cara ini saya dapat dari Kang Ismet.
Untuk demo anda bisa lihat disini

DEMO

Terima kasih anda telah membaca artikel Penomoran Pada Blockquote Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: