Seperti yang kita ketahui, jika kita memasang widget popular posts pada blog maka validasi HTML5 sebuah blog akan berkurang tergatung pada jumlah post yang kita tampilkan di widget tersebut.
Namun apakah Anda tahu apa penyebabnya ?
Penyebabnya adalah pada widget tersebut tidak memiliki title link dan title image. Jadi yang harus kita lakukan untuk membuat widget tersebut menjadi valid HTML5 adalah memberi title link dan title image.
Cara Memberi Title Link dan Title Image:
1. Buka Dashbor Blogger.
2. Klik Template > Edit HTML > Lompat ke widget > PopularPosts1.
3. Maka kode yang akan Anda temukan adalah seperti di bawah ini:
<b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts'>...</b:widget>
4. Kemudian ganti kode di atas dengan kode di bawah ini:
<b:widget id='PopularPosts1' locked='false' mobile='yes' 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"'>
<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 == "false"'><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>
5. Klik Simpan Template.
Lihat pasti valid HTML5-nya pasti errornya berkurang.
Demikian postingan kali ini semoga saja bermanfaat bagi Anda.
Sumber: http://www.masyadi.com/2014/06/memberikan-title-link-dan-gambar-pada-popular-post.html
TAGS :
Valid HTML5
Widged blog
11 Komentar
sangat bermanfaat gan
Thanks udah berkunjung di sini !
memangnya widget populer post ada error di validator? kalau di chkme ia, karena kekurangan title dan altribut
Ada mbak, kalau tiak percaya coba aja cek blog mbak di validator kalau pasti widget popular postsnya belum valid. Namun, setelah ganti dengan HTML seperti di atas maka invalidnya berkurang
apakah anda dah benar2 mempelajarinya mas sebelum anda menjawab pertanyaan ini?
Yaialah, saya sudah pernah mencobanya sebelum membuat postingan ini. :)
Jika ragu, silahkan coba sendiri. :d
ya nih, popular post dari template-template blogger biasanya tidak ada masalah di validasi HTML5, yg ada masalah itu subscribebox atau widget follow by email
scriptnya pas disimpan kenapa error mas?
Masa sih, ane coba gak error kok :D
Harap tidak memasang live link maupun no live link. Jika komentar Anda mau di tampilkan !
Emoticon