Posted by Aak
Aak-share.com Updated at: 8:51:00 AM

Cara Membuat Penomoran Otomatis Tag Blockquote

No comments:
Cara Membuat Penomoran Otomatis Tag Blockquote ~ Berikut ini adalah cara pembuatan penomoran pada tag blockquote, penomoran ini terdapat disamping sebelah kiri. jika anda suka dengan tag penomoran pada blockquote berikut ini langkah-langkahnya :


Cara Membuat Penomoran Otomatis Tag Blockquote

Pertama anda buka editor template, selanjutnya anda cari kode ]]></b:skin>, terapkan kode berikut sebelum ]]></b:skin>

blockquote {
  background-color:#eee;
  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#CACACA;
  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;

Jika sudah selanjutnya anda cari kode </body>, terapkan kode berikut sebelum kode </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>


Langkah terakhir anda simpan template

Demikian Cara Membuat Penomoran Otomatis Tag Blockquote, semoga bermanfaat!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments