Membuat Widget Artikel Terpopuler Dengan Bermacam Warna

Setelah sempat kemarin vakum dikarenakan kegiatan sehari-hari, akhirnya pada hari ini bisa online lagi seperti biasanya. Pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang bagaimana membuat widget popular post atau artikel yang paling banyak di baca dengan warna yang berbeda-beda.  Memang blogger sudah menyediakan fitur ini, namun menurut saya tampilan dengan warna-warni ini lebih menarik dan tidak menyebabkan blog menjadi berat juga loh. Langsung saja caranya bisa kam lihat di bawah ini :

1. Login ke blogger.com

2. Klik tata Letak --> Tambah Gadget --> Entri Populer (Aktifkan Widget Popular Post dari blogger terlebih dahulu untuk mengaktifkan widget ini).

2. Klik template --> Edit HTML --> Centang Expand Template Widget --> Kemudian kamu cari kode  seperti di bawah ini. Gunakan ctrl+f untuk memudahkan pencarian.

/* Variable definitions   

 ====================

3. Salin kode di bawah ini,

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group> 

 kemudian kamu letakkan kode yang sudah di salin di bawah kode

 /* Variable definitions    

====================

5. Setelah itu, kamu cari kode yang hampir sama seperti di bawah ini, dan kamu hapus. Ingat, kamu harus menghapus kodenya hingga muncul tulisan  </b:widget>.

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>

......

</b:widget>

NOTE :

• Kode yang berwarna biru adalah nama widget popular post yang pertama kali kamu pasang.

6. kemudian, kamu ganti kode yang sudah dihapus tadi 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;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
</b:widget>

7. Simpan dan lihat hasilnya. Oh iya, di beberapa template blog, mungkin widget ini tidak bekerja. Selamat mencoba :)

Postingan Terkait:

Posted in: Blogger,Widget