Widget Popular Post adalah suatu widget yang pasti atau bahkan keseluruhan blog menggunakan widget ini, namun apakah anda sudah tahu widget popular post anda sudah
SEO friendly apa belum??
Baca disini =>
Cara Membuat Popular Post Seo friendly
Namun Pada Malam ini Saya Tidak akan membahas mengenai Cara
membuat popular post SEO friendly tetapi kita akan membahas mengenai alternatif gambar untuk widget popular post. Maksudnya???
Pada saat kita memposting dengan gambar, maka secara otomatis widget popular post tersebut ada gambarnya, namun bagaimana jika memposting yang tidak bergambar?? itulah yang akan kita bahas kali ini.
Perhatikan Gambar Popular Post Di Bawah Ini:
Alternative Image Untuk Widget Popular Post
Pada Edit HTML Silahkan cari kode yang tampak seperti dibawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
. . . . . ....... ............. ............. ........
. . . . . ....... ............. ............. ........
. . . . . ....... ............. ............. ........code panjang . . . . . ....... ............. ............. ........
. . . . . ....... ............. ............. ........
. . . . . ....... ............. ............. ........
</b:widget>
Ganti Kode di atas dengan kode dibawah 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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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 == "false"'>
<!-- (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' expr:title='data:post.title'>
<img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</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/>
<!-- (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' expr:title='data:post.title'>
<img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<img class='alternatif-image' alt='thumbnails' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORFYjKNBK30YCW1_eCFxFQAZQR-roDQrzKO1UQY6HtXk0yDI5mErRlykWsVWFwXE4WqIdczhnyBYIX4btC0UjTi_WBELNQaWyxhuOL_tsqdcrjf_1lTf5Ew8wSHuIGQyVA8290wUaAoA/s1600/SEO-blog-terbaru.jpg'/>
</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>
</b:includable>
</b:widget>
Sudah ????
Perhatikan code yang saya tandai itulah yang saya tambahkan pada widget ini. Gambar kurang menarrik?? Silahkan ganti URL gambar tersebut dengan url yang akan anda tampilkan sebagai alternatif image.
BELUM selesai.
Sekarang cari code
]]></b:skin>
atau
</style>
dan tambahkan CSS berikut tepat di atasnya.
.alternatif-image{
height: 72px;
width: 72px;
}
Simpan Templatemu.
Sumber?? Cari di Google =>
Alternative Image Untuk Widget Popular Post?
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini