Blockquote cita estilo Numero por linea Blogger

por PCSencilla , en viernes, agosto 22, 2014
blockquote numero linea blogger

Blockquote cita estilo Numero por linea Blogger

Pasos:

Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>




Instalar plantilla blogger
Instalar plantilla blogger
Instalar plantilla blogger
Instalar plantilla blogger



Paso 2: Buscamos la siguiente linea (Ctrol + F) dentro de la plantilla
]]></b:skin>


Paso 3: Justo por encima de ]]></b:skin> pegamos la siguiente linea CSS

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


 Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F)

</body>


Paso 5: Justo por encima </body> de pegamos el siguiente código JavaScript

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


Paso 6: Guardamos los cambios realizados en nuestra plantilla

Recuerda la sintaxis para la cita(blockquote):

<blockquote>Aqui va el texto a citar en el blockquote</blockquote>
Blockquote cita estilo Numero por linea Blogger
Sobre el articulo
Blockquote cita estilo Numero por linea Blogger - escrito por PCSencilla , publicado el viernes, agosto 22, 2014, categorizado en blogger , tutoriales

2 Comments