Memperbaiki Widget Popular Post atau Entri Populer

Blogger Blogging kali ini akan memberikan uraian tentang memperbaiki widget Popular Post atau Entri Populer agar dapat lebih SEO Friendly atau dapat meningkatkan score SEO di mata mesin pencari semacam Google Search Engine. Widget Popular Post atau Entri Populer ini, dalam kacamata Blogger Blogging merupakan salah satu widget yang cukup penting keberadaannya, karena dapat menginformasikan kepada pengunjung blog tentang artikel-artikel unggulan atau artikel-artikel yang banyak diminati oleh pengunjung blog yang lainnya.

Dalam banyak template, widget Popular Post atau Entri Populer ini sering menjadi faktor penyebab utama menurunnya nilai SEO atau SEO Score suatu blog. Hal yang paling utama adalah munculnya thumbnail pada widget Popular Post ini. Masalah ini dapat kita buktikan dengan mempergunakan fasilitas SEO Analizer yang dimiliki oleh Bing Webmaster. Pengalaman saya membuktikan bahwa widget Popular Post ini bilamana tidak digarap secara maksimal, pasti akan mengakibatkan muncul "error" yang tentu saja mempengaruhi kualitas SEO blog yang kita miliki. Screen-shoot berikut ini dapat menjadi buktinya.

Bagaimana cara mengatasinya ? Caranya adalah dengan mengganti rangkaian script Widget Popular Post tersebut. Kombinasi script asli Widget Popular Post yang biasa terdapat pada berbagai template blog adalah seperti terurai di bawah ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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-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>

Gantilah rangkaian script tersebut dengan rangkaian script di bawah ini  :

Script ? :

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Entri Populer' 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;'><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>

Selanjutnya simpan template blog anda dan lihat hasilnya.

Lebih jauh lagi, bilamana anda ingin memberikan kombinasi warna-warni pada Widget Popular Post ini, anda tinggal menambahkan rangkaian script berikut di atas ]]></skin>

Script ? :

.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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}
/* Design Warna */
.PopularPosts ul li:nth-child(1){background-color:#f4a460}
.PopularPosts ul li:nth-child(2){background-color:#e74c3c}
.PopularPosts ul li:nth-child(3){background-color:#d35400}
.PopularPosts ul li:nth-child(4){background-color:#e67e22}
.PopularPosts ul li:nth-child(5){background-color:#f39c12}
.PopularPosts ul li:nth-child(6){background-color:#f1c40f}
.PopularPosts ul li:nth-child(7){background-color:#2980b9}
.PopularPosts ul li:nth-child(8){background-color:#3498db}
.PopularPosts ul li:nth-child(9){background-color:#16a085}
.PopularPosts ul li:nth-child(10){background-color:#1abc9c}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Jangan lupa untuk menyimpan Template Blog anda, mudah-mudahan cara ini dapat menaikkan SEO Score blog anda.