Cara Pasang Widget Popular Post Valid HTML5

Cara Pasang Widget Popular Post Valid HTML5 - Popular post adalah salah satu widget default yang telah disediakan oleh blogspot yang bisa agan pasang di blog. Widget ini di pasang jika anda ingin melihat seberapa populer artikel artikel yang pernah anda buat di blog. Posisi artikel akan ditentukan mulai dari artikel yang paling sering dikunjungi sampai dengan yang sedikit tergantung seberapa banyak jumlah artikel yang akan anda tampilkan.

Kita juga bisa memodifikasi widget popular post ini tergantung selera kita. Nah kali ini saya akan share tentang cara pasang popular post valid html5 ini buat anda.

Tutorial Cara Pasang Popular Post Valid HTML 5

Berikut ini adalah cara pasang widget popular post valid html5 di blogspot

Klik tata letak di halaman dasbor blogger anda
Pilih add widget
Pilih widget Entri Popular dan Letakkan dimana anda ingin meletakkannya
Lalu sekarang silahkan anda masuk ke bagian Template blog, dan jangan lupa untuk selalu melakukan backup dulu template blog anda untuk mencegah terjadi kesalahan.
Lalu cari kode widget pada HTML Entri Popular yang ada blog anda. Kodenya adalah kira kira seperti ini :

<b:widget id='PopularPosts1' locked='false' title='Popular News' type='PopularPosts'>
<b:includable id="main">
<b:if cond="data:title"><h3>
<data:title></data:title></h3>
</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" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&amp;pli=1"><data:post .title=""></data:post></a>
<b:else>
<div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&amp;pli=1"><data:post .title=""></data:post></a></div>
<div class="item-snippet">
<data:post .snippet=""></data:post></div>
</b:else></b:if>
<b:else>
<b:if cond="data:showSnippets == &quot;false&quot;">
<div class="item-thumbnail-only">
<b:if cond="data:post.thumbnail">
</b:if>
<br />
<div class="item-thumbnail">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&amp;pli=1" target="_blank">
<img alt="" border="0" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:width="data:thumbnailSize" />
</a>
</div>
<div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&amp;pli=1"><data:post .title=""></data:post></a></div>
</div>
<div style="clear: both;">
<b:else>
</b:else>
<br />
<div class="item-content">
<b:if cond="data:post.thumbnail">
</b:if>
<br />
<div class="item-thumbnail">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&amp;pli=1" target="_blank">
<img alt="" border="0" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:width="data:thumbnailSize" />
</a>
</div>
<div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&amp;pli=1"><data:post .title=""></data:post></a></div>
<div class="item-snippet">
<data:post .snippet=""></data:post></div>
</div>
<div style="clear: both;">
</div>
</div>
</b:if>
</b:else></b:if>
</li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>
</b:includable>
</b:widget>

Sekarang ganti kode di atas dengan kode 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' 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' 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/>
            <!-- (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: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>
</b:includable>
</b:widget>

Terakhir adalah kita tambahkan CSS untuk widget popular post ini dan di bawah ini adalah kode CSS nya. Oh ya silahkan anda copy paste kode css di bawah ini dan tempelkan di atas code ]]></b:skin>


.popular-posts ul {
 margin: 0 0;
 padding: 5px;
}
.popular-posts li {
 list-style: none;
 border: 1px solid transparent;
 margin-bottom: 5px;
 border-bottom: 1px dotted #5A5A5A;
}
.popular-posts li:hover {
 background: #131313;
 border: 1px solid #131313;
 border-radius: 2px;
}
.popular-posts .item-title {
 font: 12px arial, sans-serif, time new roman;
}
.popular-posts .item-snippet {
 font: 11px arial,sans-serif,time new roman;
}

Demikian tutorial cara pasang widget popular post valid html5 ini semoga bisa bermanfaat dan berguna buat anda.

Yuk share ke: Facebook Twitter Google+ Linkedin Digg

Di posting oleh : Unknown , Update pada : 06.10 | ► 0 komentar

Cara Pasang Widget Popular Post Valid HTML5