Cara Membuat Template Blogger 100% Valid AMP

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale'>
&lt;head&gt;
<meta expr:charset='data:blog.encoding'/>
<meta content='width=device-width' name='viewport'/>
<title><b:if cond='data:view.isSingleItem'><data:blog.pageName/> - <data:blog.title/><b:else/><data:blog.pageTitle/></b:if></title>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<meta expr:content='data:view.description + &quot; - &quot; + data:blog.pageTitle' name='description'/>
<b:include name='openGraphMetaData'/>
<meta content='id_ID' property='og:locale'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:tag cond='data:view.featuredImage' expr:content='data:view.featuredImage' name='meta' property='og:image'/>
<b:tag cond='!data:view.featuredImage' content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirohmNJV5_O7hoHDrcYIcLyf8gyqv4tUd3G7nwI1NM3PmyZzmqVKhkGE9-Zl6FWyJV8DzgugF_9xSO7Aix2hFqYm8zzxcwKBi2q3tpbV4Fzf7lUd_2XnGU7i9kbB4_x7vF9-DFB-0VZiMbHNJPT0kKlGqMavWH7doUs9X9dF0OO40Kxj6D1TlJLeGbxl8c/w320-h175-rw/nesianet-cover.png' name='meta' property='og:image'/>
  <script async='async' src='https://cdn.ampproject.org/v0.js'/>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
<style amp-boilerplate=''/><noscript><style amp-boilerplate=''/></noscript>
<style amp-custom=''>
body{display:block;margin:0;padding:0;background:#f9f9f9;font-family:Arial,sans-serif;line-height:1.6}a{color:#007BFF;text-decoration:none}
.bar{background:#333;color:#fff;text-align:center;padding:10px 20px;margin:20px 0}header{background:#fff;padding:10px 15px;margin:20px 0}.logo-title{display:flex;justify-content:space-between}.logo{font-weight:bold}h1,h2{font-size:20px}.post h2{font-size:15px;color:#333}.search,.post{display:flex;align-items:center}.search input{padding:6px}.search button,.tombol a{padding:6px 10px;background:#007BFF;color:#fff}.post{background:#fff;margin:20px 0;padding:15px;justify-content:space-between}.post-content{width:100%;overflow-wrap:break-word}.post .date{font-size:10px}.tombol{text-align:center;margin:20px 0}.tombol a{display:inline-block;margin:0 10px;padding:10px 20px}.bar a{color:#fff;margin:0 10px}.separator{text-align:center}
</style>
&lt;/head&gt;&lt;!--<head/>--&gt;
  <body>


    <header>       
        <div class='logo-title'>
<b:if cond='!data:view.isSingleItem'>
  <div class='logo'><a expr:href='data:blog.homepageUrl.canonical'><h1><data:blog.title/></h1></a></div>
  <b:else/>
  <div class='logo'><a expr:href='data:blog.homepageUrl.canonical'><h2><data:blog.title/></h2></a></div>
          </b:if>
            <div class='search'>
<form action='/search' method='get' target='_top'>
    
        <input name='q' placeholder='Cari posisi atau perusahaan...' required='' type='text'/>
        <input name='by-date' type='hidden' value='true'/>
        <button type='submit'>🔍</button>

</form>

            </div>
        </div>
        </header>
    
                <div class='bar'>
            <a expr:href='data:blog.homepageUrl.canonical'>Halaman Awal</a>
        
        </div>
  


 <b:section id='blog'>
   <b:widget id='Blog1' locked='false' title='Postingan Blog' type='Blog' version='1'>
     <b:widget-settings>
       <b:widget-setting name='showDateHeader'>false</b:widget-setting>
       <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
       <b:widget-setting name='showShareButtons'>false</b:widget-setting>
       <b:widget-setting name='showCommentLink'>false</b:widget-setting>
       <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
       <b:widget-setting name='showAuthor'>false</b:widget-setting>
       <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
       <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
       <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
       <b:widget-setting name='reactionsLabel'/>
       <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
       <b:widget-setting name='style.layout'>1x1</b:widget-setting>
       <b:widget-setting name='showLabels'>false</b:widget-setting>
       <b:widget-setting name='showLocation'>false</b:widget-setting>
       <b:widget-setting name='showTimestamp'>true</b:widget-setting>
       <b:widget-setting name='postsPerAd'>1</b:widget-setting>
       <b:widget-setting name='showBacklinks'>false</b:widget-setting>
       <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
       <b:widget-setting name='showInlineAds'>false</b:widget-setting>
       <b:widget-setting name='showReactions'>false</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>

      <b:if cond='data:view.isSingleItem'>
<b:loop values='data:posts' var='post'>
<div class='post'>
            <div class='post-content pos'>
                <h1><data:post.title/></h1>
              <data:post.body/>
                <div class='date'><data:post.date/></div>
            </div>
           </div>
 </b:loop>
  </b:if>
<b:if cond='!data:view.isSingleItem'>

<b:loop index='i' values='data:posts' var='post'>
<b:if cond='data:i &lt; 7'>
         <div class='post'>
            <div class='post-content'>
              <a expr:href='data:post.url.canonical'><h2><data:post.title/></h2></a>
                <div class='date'><data:post.date/></div>
            </div>
            <b:tag class='thumbnail' cond='data:post.firstImageUrl' decoding='async' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' loading='lazy' name='img'/>
           <b:tag class='thumbnail' cond='!data:post.firstImageUrl' decoding='async' expr:alt='data:post.title' expr:src='data:blog.blogspotFaviconUrl' loading='lazy' name='img'/>
        </div>
</b:if>
  </b:loop>


  
 <b:loop index='i' values='data:posts' var='post'>
<b:if cond='data:i &gt;= 7 and data:i &lt; 13'>
         <div class='post'>
            <div class='post-content'>
              <a expr:href='data:post.url.canonical'><h2><data:post.title/></h2></a>
                <div class='date'><data:post.date/></div>
            </div>
            <b:tag class='thumbnail' cond='data:post.firstImageUrl' decoding='async' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' loading='lazy' name='img'/>
           <b:tag class='thumbnail' cond='!data:post.firstImageUrl' decoding='async' expr:alt='data:post.title' expr:src='data:blog.blogspotFaviconUrl' loading='lazy' name='img'/>
        </div>
</b:if>
  </b:loop>



  <b:loop index='i' values='data:posts' var='post'>
<b:if cond='data:i &gt;= 13 and data:i &lt; 20'>
         <div class='post'>
            <div class='post-content'>
              <a expr:href='data:post.url.canonical'><h2><data:post.title/></h2></a>
                <div class='date'><data:post.date/></div>
            </div>
            <b:tag class='thumbnail' cond='data:post.firstImageUrl' decoding='async' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' loading='lazy' name='img'/>
           <b:tag class='thumbnail' cond='!data:post.firstImageUrl' decoding='async' expr:alt='data:post.title' expr:src='data:blog.blogspotFaviconUrl' loading='lazy' name='img'/>
        </div>
</b:if>
  </b:loop>  
     
      </b:if>      
      
        <div class='tombol'>
<b:if cond='data:newerPageUrl'>
            <a expr:href='data:newerPageUrl'>&#8592; Lebih Baru</a>
          </b:if>
<b:if cond='data:olderPageUrl'>
            <a expr:href='data:olderPageUrl'>Lainnya &#8594;</a>
          </b:if>
        </div>    
      
</b:includable>
     <b:includable id='backlinkDeleteIcon' var='backlink'/>
     <b:includable id='backlinks' var='post'/>
     <b:includable id='breadcrumb' var='posts'/>
     <b:includable id='comment-form' var='post'/>
     <b:includable id='commentDeleteIcon' var='comment'/>
     <b:includable id='comment_count_picker' var='post'/>
     <b:includable id='comment_picker' var='post'/>
     <b:includable id='comments' var='post'/>
     <b:includable id='feedLinks'/>
     <b:includable id='feedLinksBody' var='links'/>
     <b:includable id='iframe_comments' var='post'/>
     <b:includable id='mobile-index-post' var='post'/>
     <b:includable id='mobile-main' var='top'/>
     <b:includable id='mobile-nextprev'/>
     <b:includable id='mobile-post' var='post'/>
     <b:includable id='nextprev'/>
     <b:includable id='post' var='post'/>
     <b:includable id='postQuickEdit' var='post'/>
     <b:includable id='shareButtons' var='post'/>
     <b:includable id='status-message'/>
     <b:includable id='threaded-comment-form' var='post'/>
     <b:includable id='threaded_comment_js' var='post'/>
     <b:includable id='threaded_comments' var='post'/>
   </b:widget>
 </b:section>



      <div class='bar'>
            <a expr:href='data:blog.homepageUrl.canonical'>Halaman Awal</a>
        
        </div>
      


&lt;!--</body>--&gt;&lt;/body&gt;
<b:if cond='data:view.isError'><b:skin><![CDATA[]]></b:skin></b:if>
</HTML>
31 Januari 2025