Macam-Macam Style Tag Blockquote

Advertisement

          Macam-Macam Style Tag Blockquote - Pada postingan kali ini saya akan share beberapa Style Tag Blockquote dan mungkin salah satu diantara style anda sudah gunakan untuk blog sobat, langsung saja untuk penerapanya.

A. Simple Tag Blocquote

    1. Login ke blog sobat
    2. Pilih Template - Edit HTML lalu Simpan kode yang ada di bawah
        di atas ]]></b:skin> atau </style> 

blockquote {
margin: 1em 3em;
padding: .5em 1em;
color: white;
border-left: 7px solid #ff0000;
background-color: #000000;
box-shadow: 1px 1px 6px 1px #ff0000;
}
blockquote p { margin: 0; }blockquote {
margin: 1em 3em;
padding: .5em 1em;
color: white;
border-left: 7px solid #ff0000;
background-color: #000000;
box-shadow: 1px 1px 6px 1px #ff0000;
}
blockquote p { margin: 0; }

  3. Simpan template
    4. Untuk penggunaanya lihat gambar di bawah ini : Block Teks yang anda taruh
        di tag blockquote lalu pilih icon quote

     Demo 1

See the Pen Simple Blockquote by Wahab ID (@Wahab_Saputra) on CodePen.

B. Tag Blocquote With Line Number ( 1 )

      1. Login ke blog sobat

      2. Pilih Template - Edit HTML lalu Simpan kode yang ada di bawah

    di atas ]]></b:skin> atau </style> 

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;
  border-top:10px solid #000000;
  border-right:10px solid #000000;
}
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:#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;
}

   3. Simpan kode di bawah ini di atas </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>

  
    4. Simpan template

    5. Untuk penggunaanya sama dengan langkah di atas

Demo 2

See the Pen Tag Blockquote With Line Number 1 by Wahab ID (@Wahab_Saputra) on CodePen.

B. Tag Blocquote With Line Number ( 2 )

      1. Login ke blog sobat

      2. Pilih Template - Edit HTML lalu Simpan kode yang ada di bawah

    di atas ]]></b:skin> atau </style> 

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}

   3. Simpan kode di bawah ini di atas </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>

  
    4. Simpan template

    5. Untuk penggunaanya sama dengan langkah di atas

Demo 3

See the Pen Tag Blockquote With Line Number 2 by Wahab ID (@Wahab_Saputra) on CodePen.

           Demikian post kali ini tentang Tag Blockquote semoga bermanfaat, salam hangat landblogging dan terima kasih.

Advertisement