Membuat Penomoran Angka Pada BlockQuote

Selamat datang sobat blogger,apakah anda mencari cara agar bisa membuat penomoran angka pada blockquote,nah anda sekarang tidak salah kalo masuk ke blog ini hehehe,sekarang kita akan membahas tentang pembuatan penomoran pada blockquote,mungkin anda juga sering melihat hal seperti ini,waktu anda lihat Blockquote di suatu blog mungkin anda juga tertarik dengan penampilan seperti itu,dan mungkin anda juga berpikir pengen bisa menempatkan kode tersebut di blog anda,nah sekarang mari kita membahas cara pembuatan BlockQuote tersebut agar bisa anda terapkan di blog anda,untuk pembuatan BlockQuote tersebut mempunyai langkah-langkah sebagai berikut

• Masuk ke blogger anda
• Lalu Pilih template anda
• Kemudian mauk ke Edit Html
• Kemudian carai kode </body> dan letakakn kode berikut sebelum kode tersebut

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

• Setelah utu silahkan anda cari kode ]]></b:skin> dan letakan kode berikut sebelum kode ]]></b:skin> tersebut

 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 Save TEmplate dan Lihat hasilnya

 Nah itulah cara pembuatan blockquote dengan menggunakan Nomor di samping kirinya,semoga artikel ini bermanfaat untuk anda semua.selamat mencoba dan semoga berhasil.

iklan 5

iklan 6