Theme base para blogger SEO optimizada

Canvas.xml, es una base para Blogger SEO optimizada (no contiene javascript, html ni css intrusivo e integra de forma inteligente comentarios de Disqus, Facebook y Blogger), que cualquiera pueda usar Gratis, para diseñar sus plantillas de Blogger con un nivel profesional, no tienen que preocuparse por conocer o no el código de Blogger, la plantilla está preparada para recibir lo que le pongas.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.locale.languageDirection' expr:lang='data:blog.locale.language' prefix='og: http://ogp.me/ns#'>

<!-- Canvas.xml v1.10.0 | github.com/zkreations/canvas.xml -->
<!-- Como usar Canvas.xml en blogger | training.owinile.com/2023/02/intro-training-blogger.html -->

<head>
<!-- Basic data -->
<meta expr:charset='data:blog.encoding'/>
<meta expr:content='data:view.isHomepage ? "website" : "article"' property='og:type'/>

<!-- Responsive viewport -->
<meta content='width=device-width,initial-scale=1' name='viewport'/>

<!-- App name -->
<meta expr:content='data:blog.title' name='application-name'/>
<meta expr:content='data:blog.title' property='og:site_name'/>

<!-- Meta Referrer Tag -->
<meta content='unsafe-url' name='referrer'/>

<!-- Type of twitter card -->
<meta content='summary_large_image' name='twitter:card'/>

<!-- favicon -->
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>

<!-- Url canonical -->
<meta expr:content='data:view.url.canonical' property='og:url'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>

<!-- Descripcion -->
<b:if cond='data:view.description'>
   <meta expr:content='data:view.description.escaped' property='og:description'/>
   <meta expr:content='data:view.description.escaped' name='description'/>
</b:if>

<b:if cond='data:view.isError or data:view.isArchive or data:view.isSearch'>
   <meta content='noindex,follow' name='robots'/>
</b:if>

<!-- Featured Image -->
<b:if cond='data:widgets'>
   <b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
     <meta expr:content='resizeImage(data:imageUrl,1200,"1200:630")' property='og:image'/>
   </b:loop>
   <meta property='og:image:width' content="1200"/>
   <meta property='og:image:height' content="630"/>
</b:if>

<!-- Title -->
<b:with value='data:view.isError ? data:messages.theresNothingHere : data:view.title.escaped' var='title'>
   <meta expr:content='data:title' property='og:title'/>
   <meta expr:content='data:title' name='twitter:title'/>
   <title><data:title/></title>
</b:with>

<!-- Feeds -->
<b:if cond='data:blog.feedLinks'>
<b:with value='path(data:blog.homepageUrl.canonical,"feeds/posts/default")' var='feeds'>
   <link expr:href='data:feeds' title='Atom 1.0' rel='alternate' type='application/atom+xml'/>
   <link expr:href='data:feeds params {alt: "rss"}' title='RSS 2.0' rel='alternate' type='application/rss+xml'/>
</b:with>
</b:if>

<!-- AdSense -->
<b:if cond='data:widgets.AdSense.first or data:blog.adsenseClientId'>
   <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
</b:if>

<!-- Sitelinks Searchbox -->
<script type='application/ld+json'>
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "<data:blog.homepageUrl.canonical/>",
    "potentialAction": {
        "@type": "SearchAction",
        "target": "<data:blog.searchUrl/>?q={search_term_string}",
        "query-input": "required name=search_term_string"
    }
}
</script>

<b:skin><![CDATA[
/*!
=> Theme Name: {{ NAME }}
=> Theme URI: {{ URL }}
=> Author: {{ AUTHOR NAME }}
=> Author URI: {{ AUTHOR URL }}
=> Version: {{ THE VERSION }}
=> License: Creative Commons Atribucion-NoComercial 4.0 Internacional
=> License URI: http://creativecommons.org/licenses/by-nc/4.0/
*/

/*Fix: Unnecessary elements removed*/
.widget-item-control,.item-control.blog-admin,
.continue,.loadmore,.thread-chrome.thread-collapsed,
.singleton-element:not(.cookie-choices-info),
.noAllowNewComments .comment-reply,
.comments .hidden {display:none}

/*Fix: Show lightbox*/
.CSS_LIGHTBOX{z-index:90001!important}

/*Fix: Responsive images*/
a[style^=margin-left],
a[imageanchor]:not([style*=float]) {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.widget-content img,
img[data-original-height],
img[data-original-width] {height: auto;}

/*Fix: Responsive videos*/
.BLOG_video_class, .b-hbp-video, .b-uploade {
    max-width: 100%;
}

/*Fix: Comment Editor*/
#comment-editor{
    border:0;
    width:100%;
    min-height:220px
}

/* Configurations
   ====================
   <!-- General Options -->
   <Variable name="config.comments" description="Comment system" type="string" default="blogger" value="blogger"/>
   <Variable name="config.shortname" description="Shortname of Disqus" type="string" default="shortname" value="shortname"/>
*/
]]></b:skin>

<b:if cond='data:view.isLayoutMode'>
<b:template-skin><![CDATA[ 
/* => Your Layout Styles */
]]></b:template-skin>
</b:if>

</head>

<body>

<!-- Posts -->
<b:section id='Blog'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'>
    <b:includable id='main'>

    <!-- Basic structure of example. You can delete from here {{ -->
    <b:if cond='data:view.isMultipleItems'>
      <b:loop values='data:posts' var='post'>
         <b:include data='post' name='post'/><!-- Include posts -->
      </b:loop>
      <b:include name='postPagination'/><!-- Include pagination -->
    <b:else/>
      <b:loop values='data:posts' var='post'>
         <b:include data='post' name='post'/><!-- Include posts -->
         <b:include data='post' name='comments'/><!-- Include comments -->
      </b:loop>
    </b:if>
    <!-- }} Up to this point -->

    </b:includable>
    <b:includable id='aboutPostAuthor'><!-- disable --></b:includable>
    <b:includable id='addComments'><!-- disable --></b:includable>
    <b:includable id='comments-blogger' var='post'>
      <b:include data='post' name='commentPicker'/>
    </b:includable>
    <b:includable id='comments-disqus' var='post'>
      <div id='disqus_thread'/>
      <script>
      var disqus_shortname = "<data:skin.vars.config_shortname/>",
          disqus_config = function(){
             this.page.url = "<data:view.url.canonical/>";
             this.page.title = "<data:view.title.escaped/>";
          };//<![CDATA[
       (function() {
           var d = document, s = d.createElement('script');
           s.async = true;s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
           s.setAttribute('data-timestamp', +new Date());(d.head || d.body).appendChild(s);
       })();//]]>
       </script>
    </b:includable>
    <b:includable id='comments-facebook' var='post'>
      <div class='fb-comments' data-colorscheme='light' data-numposts='10' data-width='100%' expr:data-href='data:view.url.canonical'/>
    </b:includable>
    <b:includable id='commentAuthorAvatar'><!-- disable --></b:includable>
    <b:includable id='commentDeleteIcon' var='comment'><!-- disable --></b:includable>
    <b:includable id='commentForm' var='post'><!-- disable --></b:includable>
    <b:includable id='commentFormIframeSrc' var='post'><!-- disable --></b:includable>
    <b:includable id='commentItem' var='comment'><!-- disable --></b:includable>
    <b:includable id='commentList' var='comments'><!-- disable --></b:includable>
    <b:includable id='commentPicker' var='post'>
      <div class='comments' id='comments'>
         <b:class cond='!data:post.allowNewComments' name='noAllowNewComments'/>
         <div class='comments-content'>
            <div id='comment-holder'><data:post.commentHtml/></div>
            <b:include data='post' name='threadedCommentJs'/>
         </div>
         <b:include data='post' expr:name='data:post.allowNewComments ? "threadedCommentForm" : "status-message"'/>
      </div>
    </b:includable>
    <b:includable id='comments' var='post'>
      <b:if cond='data:post.allowComments'>
         <b:include data='post' expr:name='data:view.isPreview ? "status-message" : "comments-" + data:skin.vars.config_comments'/>
      </b:if>
    </b:includable>
    <b:includable id='commentsTitle'><!-- disable --></b:includable>
    <b:includable id='feedLinks'><!-- disable --></b:includable>
    <b:includable id='feedLinksBody' var='links'><!-- disable --></b:includable>
    <b:includable id='homePageLink'><!-- disable --></b:includable>
    <b:includable id='iframeComments' var='post'><!-- disable --></b:includable>
    <b:includable id='inlineAd' var='post'><!-- disable --></b:includable>
    <b:includable id='nextPageLink'>
      <a expr:href='data:olderPageUrl'><data:messages.older/></a>
    </b:includable>
    <b:includable id='post' var='post'>
    
      <b:if cond='data:view.isMultipleItems'>

      <!--{{ Home Page }}-->

      <b:elseif cond='data:view.isPost'/>

      <!--{{ Posts }}-->

      <b:elseif cond='data:view.isPage'/>

      <!--{{ Static page }}-->
   
      </b:if>

    </b:includable>
    <b:includable id='postBody' var='post'><!-- disable --></b:includable>
    <b:includable id='postBodySnippet' var='post'><!-- disable --></b:includable>
    <b:includable id='postCommentsAndAd' var='post'><!-- disable --></b:includable>
    <b:includable id='postCommentsLink'><!-- disable --></b:includable>
    <b:includable id='postFooter' var='post'><!-- disable --></b:includable>
    <b:includable id='postFooterAuthorProfile' var='post'><!-- disable --></b:includable>
    <b:includable id='postHeader' var='post'><!-- disable --></b:includable>
    <b:includable id='postJumpLink' var='post'><!-- disable --></b:includable>
    <b:includable id='postMeta' var='post'><!-- disable --></b:includable>
    <b:includable id='postPagination'>
      <b:tag cond='data:newerPageUrl or data:olderPageUrl' class='blog-pager' id='blog-pager' name='div'>
        <b:include cond='data:newerPageUrl' name='previousPageLink'/>
        <b:include cond='data:olderPageUrl' name='nextPageLink'/>
      </b:tag>
    </b:includable>
    <b:includable id='postTitle' var='post'><!-- disable --></b:includable>
    <b:includable id='previousPageLink'>
      <a expr:href='data:newerPageUrl'><data:messages.newer/></a>
    </b:includable>
    <b:includable id='threadedCommentForm' var='post'>
      <div class='comment-form'>
         <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
         <iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' src=''/>
         <data:post.cmtfpIframe/>
         <script>BLOG_CMT_createIframe("<data:post.appRpcRelayPath/>");</script>
      </div>
    </b:includable>
    <b:includable id='status-message'>
      <b:eval expr='data:view.isPreview ? data:messages.widgetNotAvailableInPreview : data:post.noNewCommentsText'/>
    </b:includable>
    <b:includable id='threadedCommentJs' var='post'>
      <script async='async' expr:src='data:post.commentSrc'/>
      <b:template-script inline='true' name='threaded_comments'/>
      <b:if cond='data:post.showThreadedComments'>
         <script>blogger.widgets.blog.initThreadedComments(
            <data:post.commentJso/>,
            <data:post.commentMsgs/>,
            <data:post.commentConfig/>);//<![CDATA[
            var a = document.getElementsByClassName("avatar-image-container");
            for (i = 0; i < a.length; i++) a[i].childNodes[0].setAttribute("src", a[i].childNodes[0].getAttribute("src").replace(/s\B\d{2,4}/, "s80"));
         //]]></script>
      </b:if>
    </b:includable>
    <b:includable id='threadedComments' var='post'><!-- disable --></b:includable>
  </b:widget>
</b:section>

<!-- Google analytics -->
<b:include data='blog' name='google-analytics'/>
</body>
</html>
Pagina Oficial del Theme: Canvas.xml v1.10.0
Training Blogger 100% gratuito: Cómo implementar Canvas.xml
Blogger Template CODE
