Membuat Blockquote Keren

Halo semuanya,Apa kabarnya? Sudah lama saya tidak membuat post karna saya ulangan ditambah laptop saya agak rusak.Dipost kali ini saya akan share Tutorial Blogger yaitu Membuat Blockquote Keren.

Nah itu dia Screenshot dari Blockquote keren,Nah bagi kalian yang tidak sabar untuk mencobanya silahkan ikuti cara dibawah ini dengan benar

Tutorial:
1.Pastikan kalian sudah masuk blogger
2.Masuk menu Template-Edit HTML
3.Kalau sudah,tambahkan css berikut tepat dibawah ]]></b:skin>

<style type='text/css'>
blockquote{  background-color:#34495e;   font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;  color:white;  overflow:auto;  margin:0 0 1em;  padding:1em}
blockquote, 
blockquote .line-number{   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:#2c3e50;  color:white;  padding:1em .2em 1em .2em;  border-right:4px solid #2c3e50}
blockquote br{display:none}
blockquote .line-number span{ display:block;  padding:0 .7em 0 1em}
blockquote .cl{ display:block;  clear:both}
</style>

4.Kalau sudah,Click simpan.Dan cari code </body>,Simpan Javascript berikut tepat diatasnya

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

5.Jika sudah,Click simpan.Dan lihat apakah Blockquote kalian sudah berubah

Pastikan Blockqoute Lama Kalian Telah Dihapus

Itu dia tutorial dari saya,Semoga berhasil.Salam Blogger

Share Ke :