Cara Membuat Title Otomatis pada Popular Post

Tutorial Blogspot - Cara Membuat Title Otomatis pada Popular Post. Secara Default Popular Post atau Entri Populer tidak menampilkan title dan alt otomatis. Nah agar SEO Onpage Anda semakin baik, perlu modifikasi edit HTML untuk penambahan coding title otomatis ini. Langsung saja yuk. Konsumen Cerdas Paham Perlindungan Konsumen

• Blog --> Template --> Edit HTML --> Expand Template Widget
• Cari coding Popular Post (untuk mempercepat tekan f3 ketikkan PopularPost1)

Kodenya kurang lebih seperti berikut :

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Post Popular' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><div class='dwinurhayati'><data:title/></div></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
</b:widget>

Nah perhatikan  coding berikut :

• <!-- (1) No snippet/thumbnail --> coding popular post yang hanya menampilkan judul
• <!-- (2) Show only snippets --> coding popular post yang hanya menampilkan judul dan cuplikan artikel (no gambar)
• <!-- (3) Show only thumbnails --> coding popular post yang hanya menampilkan gambar
• <!-- (4) Show snippets and thumbnails --> coding popular post yang hanya menampilkan judul, gambar dan cuplikan artikel

Pilih Popular Post sesuai yang Anda tampilkan (jika hanya judul, yang diedit hanya coding pada bagian <!-- (1) No snippet/thumbnail --> ini saja. Berlaku untuk pilihan lainnya)

Cara Membuat Title Otomatis pada Popular Post

Berikut Coding yang sudah dimodifikasi dengan title dan atau alt pada gambar (title injection bahasa saya :))

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Post Popular' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><div class='dwinurhayati'><data:title/></div></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
</b:widget>

Nah dengan melakukan modifikasi ini, maka widget cantik popular post Anda memiliki title otomatis. Memang ada script khusus yang membuat semua link di blog otomatis memiliki title, tapi saya lebih menyukai template yang minim script. Hal ini terkait loading page yang lebih ringan. Semoga bermanfaat artikel berjudul Cara Membuat Title Otomatis pada Popular Post.