Memberi Title Tags Pada Thumbnail dan Link Popularpost

Assalamu'alaikum Sobat... Selamat Malam menjelang pagi. Kali ini saya akan memberikan tutorial bagaimana cara memberi title tags pada thumbnail dan link popularpost blogger.

Pada dasarnya thumbnail populartpost bawaan blogger tidak memiliki title tags, dan title tags ini berperan sangat penting untuk kualitas seo blog kita, jika kita hanya menggunakan thumbnail popularpost bawaan blogger ketika kita mengecek kualitas seo blog kita di chkme.com akan terjadi missing  title and description yang mengurangi kualitas Seo blog hampir 30 %, ketika di klik show, maka akan terlihat link gambar yang tidak memiliki title dan deskripsi, biasanya adalah Thumbnail atau gambar popularpost.

Lalu bagaimana agar Thumbnail Popularpost tersebut tidak missing  Descriptions and Titles?

1. Silakan Sobat masuk ke Edit template Blogger. Jangan Lupa Untuk menyimpan terlebih dahulu template sobat sebelumnya, untuk memback up template, agar ketika sobat salah dalam mengedit template masih punya cadangan template sebelumnya.

2. Setelah Masuk, Silakan Sobat Cari Widget Popularpostnya dengan meng klik Lompat Ke Widget, Kemudian Pilih Popularpost1. Perhatikan gambar berikut ini.

3. Setelah ketemu widget Popularpost, silakan sobat klik expan, tanda Panah segi tiga berwarna hitam yg ada di sebelah kiri template lihat kotak merah gambar di bawah ini.

Maka sobat akan melihat code widget popularpost kurang lebih seperti ini

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
            <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></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-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <div class='play-button'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></div>
                  </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'>
                    <div class='play-button'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></div>
                  </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>

5. Silakan Ganti Code yang seperti code di atas dengan code Berikut ini, kemudian simpan template.

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Post' 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;'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a><b:else/><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;'><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:title='data:post.title' expr:width='data:thumbnailSize'/></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/><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:title='data:post.title' expr:width='data:thumbnailSize'/></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><div class='clear'/>
      </b:includable>
</b:widget>

6. Kemudian buka blog sobat, arahkan mouse ke popularpost dan lihat, apakah thumbnail dan link popularpost sudah terdapat title seperti gambar yang paling atas. Untuk lebih meyakinkan silakan cek seo blog sobat di chkme.com untuk memastikannya nilai seo blog sobat.


Code Widget Popularpost ini saya dapatkan dari sebuah template yg memang sudah memiliki title tags pada popularpostnya, Selain Responsive, code tersebut juga sudah memberikan otomatis title tags pada link popularpostnya dan penghapusan code <b:include name='quickedit'/> adalah untuk menghindari missing title. pada edit cepat atau quickedit widget.

Demikian Tutorial cara Memberi Title Tags Pada Thumbnail dan Link Popularpost blogger, Semoga bisa bermanfaat untuk teman-teman sekalian.

sumber: : cyber-islamy.blogspot.com

Syarif Lee

Senin, 11 November 2013