Membuat Widget Popular Posts Valid HTML5

Ternyata widget popular posts tidak hanya untuk menunjukan kepada pengunjung bahwa di dalam blog Anda tersebut memiliki postingan yang paling banyak dikunjungi saja. Namun, Gambar (Thumbnail) yang ada di widget popular posts ini juga mempengaruhi skor SEO blog Anda. Jadi, jika Anda ingin skor SEO blog Anda bertambah, maka setidaknya lakukanlah langkah-langkah berikut ini:

1. Masuklah ke menu template.

2. Carilah kode yang seperti ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget>

Jika Anda merasa kesulitanya mencarinya, anda bisa menggunakan fitur CTRL+F, atau bisa juga dengan menggunakan fitur jump to widget, kemudian pilihlah yang Popular Post1.

3. Nah, setelah kode tersebut sudah ketemu, hapus semua kode yang berhubungan dengan popular post yang sudah Anda cari tadi. Kemudian ganti dengan kode berikut 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 expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title' />

                                            </a>

                                        </div>

                                        <b:else/>

                                        <div class='item-thumbnail'>

                                            <a expr:href='data:post.href' target='_blank'>

                                                <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2HKg1O0ljMRxb9uILbzc7uE1sOAjagqmamJnYH_o6esmx8pqXDu8Dt3tnAnwr89n42Mh_sCvCjqSs9VgKfsTJXV4zX1WW9v6POqju28qgFT0hXq8sxMNiPfEltMiwC8Y5i6ESDZRXCUs/s1600/no+image.jpg' />

                                            </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 expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title' />

                                            </a>

                                        </div>

                                        <b:else/>

                                        <div class='item-thumbnail'>

                                            <a expr:href='data:post.href' target='_blank'>

                                                <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2HKg1O0ljMRxb9uILbzc7uE1sOAjagqmamJnYH_o6esmx8pqXDu8Dt3tnAnwr89n42Mh_sCvCjqSs9VgKfsTJXV4zX1WW9v6POqju28qgFT0hXq8sxMNiPfEltMiwC8Y5i6ESDZRXCUs/s1600/no+image.jpg' />

                                            </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>

        </div>

    </b:includable>

</b:widget>

4. Save template anda.

Lalu, apa sih yang menjadi perbedaan dengan kode popular posts yang tidak diganti dengan kode popular posts yang sudah diganti dengan kode di atas?

Yang menjadi perbedaan adalah tag ALT <img>. Karena, jika tidak anda rubah dengan kode di atas, maka ALT <img> yang sebenarnya bisa digunakan untuk menambah skor SEO malah tidak muncul di widget popular posts yang kodenya belum diganti tadi.

Note: ada dua kode yang berwarna merah, kode tersebut digunakan ketika di dalam postingan Anda yang masuk ke dalam widget popular post tidak memiliki gambar. Jadi, jika anda ingin merubanya, silahkan rubahlah sesuai dengan keinginan Anda.