Cara Membuat Widget Popular Posts SEO Friendly di Blog

Pada Artikel kali ini, Penulis akan membahas Cara Membuat Widget Popular Posts SEO Friendly di Blog. Widget Popular Post yang akan dibuat dilengkapi dengan Atribut Alt dan Title pada judul Artikel beserta gambar artikelnya, sehingga bisa mendongkrak Nilai SEO di Blog. Penampakan Widget Popular Post SEO Friendlynya seperti pada gambar di bawah ini.



Bagaimana Cara Membuat Widget Popular Post SEO Friendly ini ? kita langsung saja klik Tema Template Blog kemudian Klik Edit Html.

Cara pertama membuat Widget Popular Post SEO Friendly yaitu dengan meletakkan kode CSS dibawah ini sebelum kode </head>  dan diantara kode <style> Kode CSS ... </style>.

/* Custom CSS for Blogger Popular Post SEO Friendly Widget */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li img{display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left}
.PopularPosts ul li{background-color:#eee;margin:0 10% .4em 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:#228B22!important;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;top:0;right:0;padding-right:0!important}
/* Popular Post SEO Friendly widget*/

Cara Selanjutnya membuat Widget Popular Post SEO Friendly yaitu  dengan mencari widget Popular Posts untuk lebih mudahnya dengan cara klik “lompat ke widget” lalu klik “popularposts1” . Dan hasil nya kalian akan mendapati penampakan kode widget popular posts yang panjang  dalam keadaan diringkas dimana bila kalian klik tanda “...” , maka kode widget popular post yang diringkas tadi akan terurai dan menjadi banyak. Untuk lebih jelasnya perhatikan gambar berikut ini.



Hapus semua kode widget Popular Post yang ada di dalam garis kotak merah pada gambar diatas, kemudian ganti dengan kode Widget Popular Post di bawah ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Blog Posts' type='PopularPosts' version='1'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>6</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>true</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <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' 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' expr:title='data:post.title' target='_blank'>
                    <img alt='thumbnails' 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 class='clear'/>
          <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' expr:title='data:post.title' target='_blank'>
                    <img alt='thumbnails' 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 class='clear'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
    </b:widget>

Setelah kalian selesai mengganti Kode widget populat Postsnya, kalian klik simpan. Selanjutnya kalian tinggal lihat hasilnya.

Demikianlah Artikel Tentang Cara Membuat Widget Popular Posts SEO Friendly di Blog, Semoga bermanfaat.

Share this Cara Membuat Widget Popular Posts SEO Friendly di Blog article :

Facebook Twitter Google+

Artikel Terkait Cara Membuat Widget Popular Posts SEO Friendly di Blog

• Cara Membuat Link Hubungi WhatsApp SMS & Telepon di Blog
• Cara Menilai Seberapa Bagus Template Blog
• Tips dan Trik Cara membuat Blog Lebih SEO Friendly Part Dua
• Tips dan Trik Cara Membuat Blog Lebih Seo Friendly Part Satu
• Cara Membuat Atribut Alt & Title URL Blog Agar SEO Friendly
• Cara Membuat Link URL Blog Menjadi SEO Friendly
• Cara Mengedit Menu Navigasi Template BLog Sesuai Selera
• Cara Membuat Widget Popular Posts SEO Friendly di Blog
• Cara Membuat Share Button Simple Tanpa Javascript di Blog

TENTANG PENULIS

Nanang Sugiarto

Penulis seorang Programmer Aplikasi Database Vb6 dan Blogger. Situs Web yang dibuat Penulis yaitu : Nanang Sugiarto WorkShop, Tutorial VB6 Sugiarto, Tutorial Microsoft Office Sugiarto, dan Seputar Pengetahuan Pangan.