Cara Modifikasi Widget Popular Post Keren SEO Friendly

Tutorial blog kali ini akan membahas tentang bagaimana Cara Modifikasi Widget Popular Post Keren SEO Friendly . Dengan menambahkan Nomor Urut dan Auto Title. Banyak cara sebenarnya membuat tampilan widget Popular Post agar terlihat keren sesuai apa yang kita inginkan, dan pada dasarnya hanya sekedar edit atau modifikasi style css bawaan default blogger yang terkesan kurang menarik bahkan membosankan apalagi bagi blogger yang lebih mengedepankan tampilan suatu blog. 

Dan pada tutorial blog kali ini juga menerapkanOptimasi Off Page agar Widget Popular Post menjadi lebih SEO Friendly dengan menambahkan Title Tag dan menambahkan Heading Tag menjadi H2 pada judul secara otomatis dan menambahkan Alt Tag pada gambar thumbnail secara otomatis.

• Cara Memasang Widget Multi Tab 3 Kolom Pada Sidebar.
• Cara Modifikasi Widget Archive Blog Menjadi Keren

Cara Modifikasi Widget Popular Menjadi Keren Dengan Nomor Urut

1. Login pada Akun Blogger anda dan pastikanMembackup template terlebih dahulu.
2. Masuk ke Tata Letak / Layout  >> Tambah Gadget >> Popular Post (apabila anda sudah memasang widget Popular abaikan langkah ini)
3. Lanjut masuk Template >> Edit HTML.

4. Copy kode dibawah ini diatas kode ]]></b:skin>.

/* Popular Post Zaputra.Com*/
#PopularPosts1 h2{padding:0;width:100%;margin:0;font-size:1.3em;font-size:14px;text-align:center;color:#ccc;}
#PopularPosts1 ul{list-style:none;counter-reset:li;padding:0;}
#PopularPosts1 li{position:relative;margin:0;padding:0;width:auto;}
#PopularPosts1 ul li{background:#f6f6f6;position:relative;display:block;padding:5px;margin:5px;text-decoration:none;border-radius:2px;transition:all .5s ease-out;box-shadow:0 0 1px rgba(0,0,0,0.4);border:1px solid #fff}
#PopularPosts1 ul li:before{content:counter(li);counter-increment:li;position:absolute;top:80%;margin:-1.3em;height:2em;width:2em;line-height:25px;font-size:16px;color:#fff;background:#ff5050;border:2px solid #fff;text-align:center;font-weight:700;border-radius:2em;position:absolute;left:96%;transition:all .3s ease-out;z-index:9;box-shadow: 0 0px 1px rgba(0,0,0,0.4);}
#PopularPosts1 ul li:hover{background:#e6e6e6;transition:all 0s ease-out}
#PopularPosts1 ul li:hover:before{transform:rotate(360deg)}
#PopularPosts1 ul li a{font:13px merriweather sans, sans-serif;color:#333;display:block;min-height:50px;text-decoration:none;text-transform:uppercase;margin-right:10px}
#PopularPosts1 ul li a:hover{color:#ff5050;}
.item-thumbnail img {width:100%; padding:0;margin:0;border:2px solid #fff;border-radius:100%;width:60px;height:60px;box-shadow: 0 2px 2px rgba(0,0,0,0.4);}

5. Lanjut lagi ke optimasi seo nya

Cara Optimasi Widget Popular Post Lebih SEO Friendly Dengan Title Tag Dan Alt Tag Otomatis

6. Cari kode <b:widget id='PopularPosts1' untuk memudahkan pencarian gunakan CTRL + F.
7. Jika sudah ketemu ganti semua kode yg diawali <b:widget sampai kode </b:widget> dengan kode dibawah ini.

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='' type='PopularPosts' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><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' expr:title='data:post.title'><h2><data:post.title/></h2></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' expr:title='data:post.title' 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>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
  </b:widget>

8. Simpan Template anda.

Untuk memastikan kalau pemasangan anda berhasil coba anda sorot judul pada popular post dan kalau muncul Title Tag maka pemasangan berhasil

Apabila anda mengalami kendala dalam menerapkan tutorial ini silahkan anda bertanya pada kotak komentar, semoga tutorial Cara Modifikasi Widget Popular Post Keren SEO Friendly bermanfaat bagi anda....

Tweet