cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- HTML SÓLO DE EJEMPLO, COPIADO TAL CUAL DE UNA PAGINA BLOGGER -->
<div class="comments" id="comments">
<a name="comments"></a>
<h4>
1 comentario
                      :
                    </h4>
<div class="comments-content">
<script async="async" src="//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js" type="text/javascript"></script>
<script type="text/javascript">
                    (function() {
                      var items = [{'id': '2488855270506141639', 'body': 'Un enlace a la \x3ca href\x3d\x22https://3.bp.blogspot.com/-6xN4sEokNLI/Uhewc_hRZTI/AAAAAAAALrU/JqEGqg9Dboo/w640-h200-c/wizard.jpg\x22 rel\x3d\x22nofollow\x22\x3eimagen1\x3c/a\x3e\x3cbr /\x3e\x3cbr /\x3eImagen solo con dirección https://3.bp.blogspot.com/-6xN4sEokNLI/Uhewc_hRZTI/AAAAAAAALrU/JqEGqg9Dboo/w640-h200-c/wizard.jpg\x3cbr /\x3e\x3cbr /\x3eImagen con IMG [img]https://lh3.googleusercontent.com/-6qmXITahg04/TYEE3OaVDfI/AAAAAAAAABI/zoQvYPZWq6U/w500-h100-c/alice+in+wonderland.jpg[/img]\x3cbr /\x3e\x3cbr /\x3eOtra sin nada https://1.bp.blogspot.com/-sQLZ-ROi6sc/VXC6k8JbLqI/AAAAAAAAT3g/jbdl7HF9x5I/w640-h200-c/war-of-the-worlds-xbla-psn-title.jpg\x3cbr /\x3e\x3cbr /\x3eUn enlace a la \x3ca href\x3d\x22https://3.bp.blogspot.com/-6xN4sEokNLI/Uhewc_hRZTI/AAAAAAAALrU/JqEGqg9Dboo/w640-h200-c/wizard.jpg\x22 rel\x3d\x22nofollow\x22\x3eimagen1\x3c/a\x3e\x3cbr /\x3e', 'timestamp': '1493665425292', 'permalink': 'https://singenio.blogspot.com/2017/05/esta-es-muy-breve.html?showComment\x3d1493665425292#c2488855270506141639', 'author': {'name': 'Oloman', 'avatarUrl': '//lh4.googleusercontent.com/-o0SQYyH4kDM/AAAAAAAAAAI/AAAAAAAAbv4/my-v3sAWv6I/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/01957235221463243588'}, 'displayTime': '1/5/17 21:03', 'deleteclass': 'item-control blog-admin pid-1088010323'}];
                      var msgs = {'loadMore': 'Cargar más...', 'loading': 'Cargando...', 'loaded': 'Ya no hay más', 'addComment': 'Añadir comentario', 'reply': 'Responder', 'delete': 'Eliminar'};
                      var config = {'blogId': '420527437610051610', 'postId': '4132222296208029985', 'feed': 'https://singenio.blogspot.com/feeds/4132222296208029985/comments/default', 'authorName': 'Oloman', 'authorUrl': 'https://www.blogger.com/profile/01957235221463243588', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2};
                      // <![CDATA[
                      var cursor = null;
                      if (items && items.length > 0) {
                        cursor = parseInt(items[items.length - 1].timestamp) + 1;
                      }
                      var bodyFromEntry = function(entry) {
                        if (entry.gd$extendedProperty) {
                          for (var k in entry.gd$extendedProperty) {
                            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
                              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
                            }
                          }
                        }
                        return entry.content.$t;
                      }
                      var parse = function(data) {
                        cursor = null;
                        var comments = [];
                        if (data && data.feed && data.feed.entry) {
                          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
                            var comment = {};
                            // comment ID, parsed out of the original id format
                            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
                            comment.id = id ? id[2] : null;
                            comment.body = bodyFromEntry(entry);
                            comment.timestamp = Date.parse(entry.published.$t) + '';
                            if (entry.author && entry.author.constructor === Array) {
                              var auth = entry.author[0];
                              if (auth) {
                                comment.author = {
                                  name: (auth.name ? auth.name.$t : undefined),
                                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                                };
                              }
                            }
                            if (entry.link) {
                              if (entry.link[2]) {
                                comment.link = comment.permalink = entry.link[2].href;
                              }
                              if (entry.link[3]) {
                                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                                if (pid && pid[1]) {
                                  comment.parentId = pid[1];
                                }
                              }
                            }
                            comment.deleteclass = 'item-control blog-admin';
                            if (entry.gd$extendedProperty) {
                              for (var k in entry.gd$extendedProperty) {
                                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                                  comment.displayTime = entry.gd$extendedProperty[k].value;
                                }
                              }
                            }
                            comments.push(comment);
                          }
                        }
                        return comments;
                      };
                      var paginator = function(callback) {
                        if (hasMore()) {
                          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
                          if (cursor) {
                            url += '&published-min=' + new Date(cursor).toISOString();
                          }
                          window.bloggercomments = function(data) {
                            var parsed = parse(data);
                            cursor = parsed.length < 50 ? null
                            : parseInt(parsed[parsed.length - 1].timestamp) + 1
                            callback(parsed);
                            window.bloggercomments = null;
                          }
                          url += '&callback=bloggercomments';
                          var script = document.createElement('script');
                          script.type = 'text/javascript';
                          script.src = url;
                          document.getElementsByTagName('head')[0].appendChild(script);
                        }
                      };
                      var hasMore = function() {
                        return !!cursor;
                      };
                      var getMeta = function(key, comment) {
                        if ('iswriter' == key) {
                          var matches = !!comment.author
                          && comment.author.name == config.authorName
                          && comment.author.profileUrl == config.authorUrl;
                          return matches ? 'true' : '';
                        } else if ('deletelink' == key) {
                          return config.baseUri + '/delete-comment.g?blogID='
                          + config.blogId + '&postID=' + comment.id;
                        } else if ('deleteclass' == key) {
                          return comment.deleteclass;
                        }
                        return '';
                      };
                      var replybox = null;
                      var replyUrlParts = null;
                      var replyParent = undefined;
                      var onReply = function(commentId, domId) {
                        if (replybox == null) {
                          // lazily cache replybox, and adjust to suit this style:
                          replybox = document.getElementById('comment-editor');
                          if (replybox != null) {
                            replybox.height = '250px';
                            replybox.style.display = 'block';
                            replyUrlParts = replybox.src.split('#');
                          }
                        }
                        if (replybox && (commentId !== replyParent)) {
                          document.getElementById(domId).insertBefore(replybox, null);
                          replybox.src = replyUrlParts[0]
                          + (commentId ? '&parentID=' + commentId : '')
                          + '#' + replyUrlParts[1];
                          replyParent = commentId;
                        }
                      };
                      var hash = (window.location.hash || '#').substring(1);
                      var startThread, targetComment;
                      if (/^comment-form_/.test(hash)) {
                        startThread = hash.substring('comment-form_'.length);
                      } else if (/^c[0-9]+$/.test(hash)) {
                        targetComment = hash.substring(1);
                      }
                      // Configure commenting API:
                      var configJso = {
                        'maxDepth': config.maxThreadDepth
                      };
                      var provider = {
                        'id': config.postId,
                        'data': items,
                        'loadNext': paginator,
                        'hasMore': hasMore,
                        'getMeta': getMeta,
                        'onReply': onReply,
                        'rendered': true,
                        'initComment': targetComment,
                        'initReplyThread': startThread,
                        'config': configJso,
                        'messages': msgs
                      };
                      var render = function() {
                        if (window.goog && window.goog.comments) {
                          var holder = document.getElementById('comment-holder');
                          window.goog.comments.render(holder, provider);
                        }
                      };
                      // render now, or queue to render when library loads:
                      if (window.goog && window.goog.comments) {
                        render();
                      } else {
                        window.goog = window.goog || {};
                        window.goog.comments = window.goog.comments || {};
                        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
                        window.goog.comments.loadQueue.push(render);
                      }
                    })();
                    // ]]>
                  </script>
<div id="comment-holder">

<div id="bc_0_2C" kind="c"><div id="bc_0_2CT"><div id="bc_0_1T" class="comment-thread" kind="r" t="0" u="0"><ol id="bc_0_1TB"><li id="bc_0_0B" class="comment" kind="b"><div class="avatar-image-container"><img src="//lh4.googleusercontent.com/-o0SQYyH4kDM/AAAAAAAAAAI/AAAAAAAAbv4/my-v3sAWv6I/s35-c/photo.jpg"></div><div id="c2488855270506141639" class="comment-block"><div id="bc_0_0M" class="comment-header" kind="m"><cite class="user blog-author"><a rel="nofollow" href="https://www.blogger.com/profile/01957235221463243588">Oloman</a></cite><span class="icon user blog-author"></span><span class="datetime secondary-text"><a rel="nofollow" href="https://singenio.blogspot.com/2017/05/esta-es-muy-breve.html?showComment=1493665425292#c2488855270506141639">1/5/17 21:03</a></span></div><p id="bc_0_0MC" class="comment-content">
 Imagen solo con dirección https://3.bp.blogspot.com/-6xN4sEokNLI/Uhewc_hRZTI/AAAAAAAALrU/JqEGqg9Dboo/w640-h200-c/wizard.jpg<br>
<br/>Video VIMEO https://vimeo.com/127423845
    <a href="https://www.youtube.com/watch?v=kJQP7kiw5Fk">https://www.youtube.com/watch?v=kJQP7kiw5Fk</a>
  <br>
Un enlace a la <a href="//3.bp.blogspot.com/-6xN4sEokNLI/Uhewc_hRZTI/AAAAAAAALrU/JqEGqg9Dboo/w640-h200-c/wizard.jpg" rel="nofollow">imagen1</a><br>
  https://youtu.be/kJQP7kiw5Fk
  <br>Otra sin nada https://1.bp.blogspot.com/-sQLZ-ROi6sc/VXC6k8JbLqI/AAAAAAAAT3g/jbdl7HF9x5I/w640-h200-c/war-of-the-worlds-xbla-psn-title.jpg<br><br>Un enlace a la <a href="//3.bp.blogspot.com/-6xN4sEokNLI/Uhewc_hRZTI/AAAAAAAALrU/JqEGqg9Dboo/w640-h200-c/wizard.jpg" rel="nofollow">imagen1</a><br></p><span id="bc_0_0MN" class="comment-actions secondary-text" kind="m"><a kind="i" href="javascript:;" target="_self" o="r">Responder</a><span class="item-control blog-admin pid-1088010323"><a o="d" target="_self" href="https://www.blogger.com/delete-comment.g?blogID=420527437610051610&amp;postID=2488855270506141639">Eliminar</a></span></span></div><div id="bc_0_0BR" class="comment-replies"></div><div id="bc_0_0B_box" class="comment-replybox-single"></div></li></ol><div id="bc_0_1I" class="continue" kind="ci"><a href="javascript:;" target="_self">Añadir comentario</a></div><div id="bc_0_1T_box" class="comment-replybox-thread"></div><div id="bc_0_1L" class="loadmore loaded" kind="rb"><a href="javascript:;" target="_self">Cargar más...</a></div></div></div></div></div>
</div>
<p class="comment-footer">
</p><div class="comment-form">
<a name="comment-form"></a>
<p>
</p>
<a href="https://www.blogger.com/comment-iframe.g?blogID=420527437610051610&amp;postID=4132222296208029985&amp;blogspotRpcToken=6542081" id="comment-editor-src"></a>
<iframe allowtransparency="true" class="blogger-iframe-colorize blogger-comment-from-post" frameborder="0" height="410px" id="comment-editor" name="comment-editor" src="https://www.blogger.com/comment-iframe.g?blogID=420527437610051610&amp;postID=4132222296208029985&amp;blogspotRpcToken=6542081#%7B%22color%22%3A%22rgb(51%2C%2051%2C%2051)%22%2C%22backgroundColor%22%3A%22rgb(255%2C%20255%2C%20255)%22%2C%22unvisitedLinkColor%22%3A%22rgb(186%2C%2062%2C%2081)%22%2C%22fontFamily%22%3A%22%5C%22Open%20Sans%5C%22%22%7D" width="100%" data-resized="true"></iframe>
<script src="https://www.blogger.com/static/v1/jsbin/2492300974-comment_from_post_iframe.js" type="text/javascript"></script>
<script type="text/javascript">
                      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
                    </script>
</div>
<p></p>
<div id="backlinks-container">
<div id="Blog1_backlinks-container">
</div>
</div>
</div>
            
          
!
            
              //<![CDATA[
(function() {
  var regimg = /(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi;
  var regyt = /(\[vid\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?(\[\/vid\])?/gi;
  var regvim = /(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi;
  //Capturar contenido comentarios
  var a = document.querySelectorAll(".comment-content"); 
  for (var i = 0; i < a.length; i++) {
    // Seleccionar enlaces
    var enlaces = a[i].getElementsByTagName("a");
    for (var j = 0; j < enlaces.length; j++) {
      // Si es un enlace de los que queremos manipular
      if (enlaces[j].href.match(regimg)||enlaces[j].href.match(regyt)||enlaces[j].href.match(regvim)) {
        // Eliminamos el HTML del enlace y dejamos sólo una URL
        var ele = document.createElement("span");
        ele.innerHTML = enlaces[j].href;
        var ref = enlaces[j];
        ref.parentNode.insertBefore(ele, ref);
        enlaces[j].href = "";
        enlaces[j].innerHTML = "";
      }
    }
    var c = a[i].innerHTML;
    // En cada tipo de URL, sustituimos esta por el HTML que muestra imagen o vídeo
    c = c.replace(regimg,'<img style="max-width: 100%; height: auto;display: blocK;margin: 10px auto;" src="$2"" alt=""/>');
    c = c.replace(regyt,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>');
    c = c.replace(regvim,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>');    
    a[i].innerHTML = c;
  }
})();
//]]>

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console