Memodifikasi Widget Populart Post Blogger

Ubah dulu kode template blogger ke versi terbaru dengan cara menganti kode dibawah ini yang berada dibagian atas kode <head>

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Otomatis semua kode template akan berubah ke versi terbaru atau yang lebih dikenal layout versi 2.

Lalu salin kode HTML dibawah ini.

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='widget-title'>
      <b:if cond='data:defaultTitle or data:title'>
        <div class='widget-title'>
          <h4 class='title'>
            <data:title/>
          </h4>
        </div>
      </b:if>
    </b:includable>    
  </b:defaultmarkup>
<b:defaultmarkup type='PopularPosts'>
    <b:includable id='main' var='this'>
      <b:include name='widget-title'/>
      <div class='widget-content'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='postContent'/>
        </b:loop>
      </div>
    </b:includable>
    <b:includable id='postContent' var='post'>
      <div class='post'>
        <div class='post-content'>
          <a class='post-image-link' expr:href='data:post.url'>
              <img class='post-thumb' expr:alt='data:post.title' expr:src='data:post.featuredImage resizeImage 100' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
          </a>
          <div class='post-info'>
            <h3 class='post-title'>
              <a expr:href='data:post.url'><data:post.title/></a>
            </h3>
            <div class='post-meta'>
              <span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span>
            </div>
          </div>
        </div>
      </div>
    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

Kode diatas adalah kode widget blogger version layout 2, yang mana kode tersebut berbeda dari kode versi lama blogger.

Letakan kode HTML diatas dibagian atas </head> atau </body>.

Sudah selesai di tahap kerangka HTML nya, maka langkah berikutnya kita beri make up menggunakan CSS.

Apapun minuman dan makanan nya, kalo sudah berkaitan dengan tampilan situs maka CSS ini adalah salah satu skin carenya.

Salin kode CSS dibawah ini.

<style>
/* CSS Popular Posts */ 
.PopularPosts .post{overflow:hidden;padding-bottom:26px;margin:0;border:0}
.PopularPosts .post-image-link{position:relative;width:100px;height:70px;float:left;overflow:hidden;display:block;vertical-align:middle;margin:0 12px 0 0}
.PopularPosts .post-info{overflow:hidden}
.PopularPosts .post-title{font-size:14px;line-height:20px;margin:0 0 4px}
.PopularPosts .post-title a{display:block;font-weight:500;color:#111}
.PopularPosts .post-meta {font-size:11px}
</style>

Letakan kode CSS diatas dibagian atas kode </head>

Klik simpan.

Cara Menggunakannya :

Buka menu Tata Letak / Layout
Klik Tambahkan Gagdet > Pilih Postingan Populer
Lalu simpan

Tambahan

Untuk mematikan thumbnail gambar postingan, Anda cukup atur CSS .PopularPosts .post-image-link menjadi display:none
Jika ingin menghilangkan tanggal .PopularPosts .post-meta menjadi display:none

Jika kamu ingin meletakan widget popular post dibagian letak tertentu.

Silahkan tambahkan kode <b:section class='baku_hantam' id='baku_hantam' name='Popular Post' showaddelement='false'/>