Cara Optimasi Widget Popular Posts Blogger

Cara Optimasi Widget Popular Posts Blogger | Hai kawan-kawan erblog yang setia, kali ini erblog akan berbagi tentang Cara Optimasi Widget Popular Posts Blogger dan semoga artikel tentang Cara Optimasi Widget Popular Posts Blogger bermanfaat untuk teman-teman semua. Oke langsung saja untuk membaca atikel tentang Cara Optimasi Widget Popular Posts Blogger

ER BLOG - Salah satu widget penting yang sering digunakan oleh para blogger adalah Widget Popular Posts.  Widget ini penting karena berpotensi meningkatkan page views blog.

Masih membahas optimasi SEO blogger, maka pada postingan kali ini, akan diungkap bagaimana mengoptimalkan widget popular posts standart, bawaan blogger agar menjadi lebih SEO Friendly.

Trik yang akan diterapkan adalah, membuat widget ini menjadi valid HTML5 sehingga error saat pengecekan pada W3C Markup Validation Service dapat dikurangi, dan untuk memperbaiki SEO Score dilakukan pula penambahan Title Link serta Title Image pada widget ini.


Optimasi SEO pada Widget Popular Posts Blogger

• Untuk memulai perkerjaan ini, seperti biasa Anda harus login ke blogger dengan user ID serta password Anda

• Pada halaman dashboard blogger pilih menu Template > Edit HTML

• Pada halaman Editor Template Blogger klik tombol Jump to widget dan pilih widget popular posts seperti gambar di bawah ini.

• Expand kode widget dengan menekan simbol panah warna hitam di bagian kiri halaman editor template blogger, sehingga kode akan terlihat seperti di bawah ini.

•   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
      <b:includable id='main'>
    <b:if cond='data:title'><h3><data:title/></h3></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>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
    </b:widget>

• Agar kode widget ini valid HTML5 hapus kode yang ditulis dengan warna merah.

• Selanjutnya tambahkan kode (warna biru) untuk menampilkan Title Link dan Title Image, sehingga kode widget akan menjadi seperti di bawah ini.

•   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
      <b:includable id='main'>
    <b:if cond='data:title'><h3><data:title/></h3></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' 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' 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>

• Simpan perubahan template Anda dengan menekan tombol Save Template.

Sampai di sini pekerjaan Anda telah selesai dan silahkan diperiksa, kunjungi blog Anda dan periksa apakah title link dan title image telah berhasil di tampilkan. Jika Anda sukses jangan lupa ucapkan Alhamdulillah.

Demikian artikel Cara Optimasi Widget Popular Posts Blogger yang erblog bisa bagikan, semoga bermanfaat dan silahkan dibagikan ke teman-teman anda yang membutuhkan. :) salam ER