Belajar Memodifikasi Widget Popular Post Blogger

Belajar Memodifikasi Widget Popular Post Blogger

Bagi admin sendiri, cara ini cukup mudah dilakukan. Karena yang perlu dilakukan hanyalah menyalin kode widget HTML saja.

Pada dasarnya, untuk membuat sebuah tampilan diblogspot ini sesuai selera kita hanya perlu paham dibagian bidang HTML, CSS & JavaScript.


Cukup 3 kode diatas saja sudah dipahami, maka semua tampilan yang ada diblogspot bisa kita atur sesuai keinginan.

Namun, tidak semua orang memiliki otak daya pikir yang sama maka disini saya buatkan sedikit bantuan buat yang ingin merubah tampilan widget popular post agar jadi lebih menarik lagi.

Sebelum mengikuti cara saya dibawah ini, perlu diperhatikan lagi agar kamu sudah paham beberapa kode HTML dasar.

Tips ini saya bagikan tanpa ada kode JavaScript, cuma kode HTML dan CSS saja.

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 :

  1. Buka menu Tata Letak / Layout
  2. Klik Tambahkan Gagdet > Pilih Postingan Populer
  3. 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'/>

Akhir Kata

Demikian panduan singkat dari saya tentang cara memodifikasi widget popular post di blogspot dengan mudah dipraktekan.

Jika ada pertanyaan yang masih kurang dipahami tentang penjelasan saya diatas, Jangan ragu untuk menulis pertanyaannya di kolom komentar.
Next Post Previous Post
6 Comments
  • Namina Sudar
    Namina Sudar 9/14/2020 8:06 PM

    Copas boleh

    • Tema Banua
      Tema Banua 9/15/2020 12:11 PM

      Biasakan sertakan sumbernya

  • Widi
    Widi 9/30/2020 5:56 AM

    Kalo widget populer post di hapus apakah akan berpengaruh untuk seo?

    • Tema Banua
      Tema Banua 9/30/2020 6:16 AM

      Tidak ada pengaruhnya dari segi sisi SEO

  • KataSiapa?
    KataSiapa? 10/20/2020 1:16 AM

    saya terapin di template boshjn amp kok thumbnail gak muncul ya?

    • Sonia Monica
      Sonia Monica 10/21/2020 8:20 AM

      Ya gak muncul karena ini bukan untuk versi AMP

Add Comment
Comment url