Codigo HTML y JavaScript en blogger

En respuesta a una de las preguntas que me llegan cada día sobre blogger, a continuación para insertar código HTML y JavaScript en nuestra página seguiremos el mismo criterio que expliqué para insertar código fuente sobre otro lenguaje de programación.

Blogger no permite copiar literalmente código HTML ya que lo interpretaría como tal y crearía incompatibilidades, es por eso que para copiar código HTML o Javascript hemos de seguir unos pasos especiales.

Los pasos que haremos serán los siguientes:
1. Escribiremos nuestro mensaje y pondremos palabras clave que sustituiremos posteriormente por nuestro código HTML o java script.

2. A continuación, vamos a la web de simplecode como siempre digo hay otras muchas pero esta es un ejemplo, y ponemos el código que queremos convertir para subir a nuestro post de blogger.

3. Una vez convertido lo llevamos a nuestro post, cambiamos a la pestaña “Edición de HTML” y pegamos el código.

4. Acto eliminamos los saltos de línea (en la pestaña redactar) con la finalidad de eliminar algunos saltos de línea que pueden aparecer. El resultado final será algo similar a esto:

<br/><script language="javascript">
var numcomments = 10;
var numchars = 60;
</script>

16 pensamientos en “Codigo HTML y JavaScript en blogger”

  2. Flavia

    Hola que tal! Mi nombre es Flavia y creé un blog con un código html que bajé de una página….

    el código es este

    <![CDATA[/*

    ====================================================
    Blogger Template Style

    Sand Dollar
    by Jason Sutter
    Updated by Blogger Team

    Modified to 3 column by rohman
    Date : 27 jan 2008
    Url : http://rohman-freeblogtemplate.blogspot.com
    Visit to my blog for more free template

    ====================================================
    */

    /* Variable definitions
    ====================

    */

    body {
    margin:0px;
    padding:0px;
    background:$bgcolor;
    color:$textcolor;
    font-size: small;
    }

    #outer-wrapper {
    font:$bodyfont;
    }

    a {
    color:$linkcolor;
    }

    a:hover {
    color:$titlecolor;
    }

    a img {
    border-width: 0;
    }

    #content-wrapper {
    padding: 0 1em 0 1em;
    }

    @media all {
    div#main {
    float:left;
    width:48%;
    margin:0 1%;
    padding:30px 0 10px 1em;
    border-left:dotted 1px $bordercolor;
    border-right:dotted 1px $bordercolor;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    div.sidebar {
    margin:20px 0px 0px 0;
    padding:0px;
    text-align:left;
    float: left;
    width: 25%;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    }

    @media handheld {
    div#main {
    float:none;
    width:90%;
    }

    div#sidebar {
    padding:30px 7% 10px 3%;
    }
    }

    /* Header
    ============================== */

    #header {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    border-bottom:dotted 1px $bordercolor;
    background:$descbgcolor;
    }

    h1 a:link {
    text-decoration:none;
    color:$pagetitlecolor
    }

    h1 a:visited {
    text-decoration:none;
    color:$pagetitlecolor
    }

    h1,h2,h3 {
    margin: 0;
    }

    h1 {
    padding:25px 0px 10px 5%;
    color:$pagetitlecolor;
    background:$pagetitlebgcolor;
    font:$pagetitlefont;
    letter-spacing:-2px;
    }

    h3.post-title {
    color:$titlecolor;
    font:$titlefont;
    letter-spacing:-1px;
    }

    h3.post-title a,
    h3.post-title a:visited {
    color: $titlecolor;
    }

    h2.date-header {
    margin:10px 0px 0px 0px;
    color:$datecolor;
    font: $dateHeaderFont;
    }

    h4 {
    color:#aa0033;
    }

    /* sidebar
    ========================== */

    #sidebar h2 {
    color:$sidebarcolor;
    margin:0px;
    padding:0px;
    font:$headerfont;
    }

    #sidebar .widget {
    margin:0px 0px 33px 0px;
    padding:0px 0px 0px 0px;
    font-size:95%;
    }

    #sidebar ul {
    list-style-type:none;
    padding-left: 0;
    margin-top: 0;
    }

    #sidebar li {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    list-style-type:none;
    font-size:95%;
    }

    .description {
    padding:0px;
    margin:7px 12% 7px 5%;
    color:$descriptionColor;
    background:transparent;
    font:bold 100% Verdana,Sans-Serif;
    }

    .post {
    margin:0px 0px 30px 0px;
    }

    .post strong {
    color:$textcolor;
    font-weight:bold;
    }

    pre,code {
    color:$sidebarlinkcolor;
    }

    strike {
    color:$sidebarlinkcolor;
    }

    .post-footer {
    padding:0px;
    margin:0px;
    color:$footercolor;
    font-size:80%;
    }
    .post-footer a {
    border:none;
    color:$footerlinkcolor;
    text-decoration:none;
    }

    .post-footer a:hover {
    text-decoration:underline;
    }

    #comments {
    padding:0px;
    font-size:110%;
    font-weight:bold;
    }

    .comment-author {
    margin-top: 10px;
    }

    .comment-body {
    font-size:100%;
    font-weight:normal;
    color:black;
    }

    .comment-footer {
    padding-bottom:20px;
    color:$footercolor;
    font-size:80%;
    font-weight:normal;
    display:inline;
    margin-right:10px
    }

    .deleted-comment {
    font-style:italic;
    color:gray;
    }

    .comment-link {
    margin-left:.6em;
    }

    .profile-textblock {
    clear: both;
    margin-left: 0;
    }

    .profile-img {
    float: left;
    margin: 0 5px 5px 0;
    border: 2px solid $pagetitlebgcolor;
    }

    #sidebar a:link {
    color:$sidebarlinkcolor;
    text-decoration:none;
    }

    #sidebar a:active {
    color:#ff0000;
    text-decoration:none;
    }

    #sidebar a:visited {
    color:sidebarlinkcolor;
    text-decoration:none;
    }

    #sidebar a:hover {
    color:$sidebarcolor;
    text-decoration:none;
    }

    .feed-links {
    clear: both;
    line-height: 2.5em;
    }

    #blog-pager-newer-link {
    float: left;
    }

    #blog-pager-older-link {
    float: right;
    }

    #blog-pager {
    text-align: center;
    }

    .clear {
    clear: both;
    }

    .widget-content {
    margin-top: 0.5em;
    }

    /** Tweaks for layout editor preview */

    body#layout #outer-wrapper {
    margin-top: 0;
    }

    body#layout #main,
    body#layout #sidebar {
    margin-top: 10px;
    padding-top: 0;
    }

    #credit{
    text-align:center;
    padding:5px;
    margin:30px 0 5px 0;
    }

    ]]>

    skip to main |
    skip to sidebar





















     

    © free template

    Mi problema es que yo modifiqué el ancho de la columna izquierda para que no me quedara tan angosta y la central de manera que se agrandara la columna derecha. Hasta ahi vamos bien. Ahora, cuando quiero añadir un gadget en la columna derecha me lo permite… pero cuando voy a la vista previa, o al blog en si me lo agrega como si lo hubiera ubicado en la columna central, al final.

    Si pueden ayudarme se los agradecería

  5. Angel Zeledon

    como puedo hacer para que en mi blog
    la manera de publicar comentarios
    me aparesca de esta forma
    pero sin lo del anti spam
    espero tu ayuda
    gracias de antemano

  9. murvoc

    hola ke tal tengo un blog identico al tuyo pero trato diferentes temas y keria ver si me podrias decir como hiciste para poner la fecha en el recuadro azul del lado de cada titulo por ke a mi me salu undefined y la verda no se mucho de html quisiera que me apoyaras, mi blog es el siguiente http://www.latierraafull.blogspot.com, apenas lo inicie y me gustaria que me apoyaras con eso ke te estoy pidiendo claro si no es mucha la molestia , tienes un buen blog 😀 en hora buena

  10. el7eraldo

    Hola; primero es lo primero: felicitaciones por tu blog de ayuda me parece fundamental tu labor, mis agradecimientos.
    EL problemita es el siguiente: estoy tratando de insertar juegos de mochimedia en mi blog, en la seccion de los post ( body) y he seguido tus pasos tal como lo explicas:

    <div id="leaderboard_widget"></div><script src="http://xs.mochiads.com/static/pub/swf/leaderboard.js" type="text/javascript"></script><script type="text/javascript">Mochi.showLeaderboardWidget({game: "coinssas", id: "leaderboard_widget"})</script>

    pegue el codigo generado en la seccion html y no aparece el juego en cuestión.
    Agradecería tu ayuda.
    Gracias y quedo a la espera de tu respuesta

  11. Brenda

    HOla , quisiera q des una leccion acerca d como poner o crear en el gadget html web sister,elite sites eso los q van en los blog q agregan blog d otros y asi… gracias

  14. javier

    hola amigo sabes necesito tu ayuda me puedes mandar a mi correo el codigo para que en mi pagina me dejen o me manden comentarios asi como este que tienes en tu pagina porque me gustaria que me manden comentarios a mi correo como este blog de comentarios que tienes te agradeseria

Los comentarios están cerrados.