Belajar Memodifikasi Widget Popular Post Blogger

Berbagi :
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.

Daftar Isi [Tutup]

    Apakah Halaman ini membantu?
    Lebih baru
    Lebih lama
    BosHJN
    BosHJN Technical Content Writer, Menyukai dunia Technical IT, Produk Digital & Blogging. Suka berbagi satu sama lain.

    6 Komentar

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

      BalasHapus
      Balasan
      1. Tidak ada pengaruhnya dari segi sisi SEO

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

      BalasHapus
      Balasan
      1. Ya gak muncul karena ini bukan untuk versi AMP

        Hapus

    Posting Komentar

    Kami memiliki kebijakan dalam berkomentar di Blog ini :

    — Dilarang promosi suatu barang
    — Dilarang jika memasang link aktif di komentar
    — Dilarang keras melakukan promosi iklan
    — Dilarang menulis komentar yang berisi sara, bully atau cemuhan

    NB :Komentar yang melanggar tidak akan ditampilkan

    Kebijakan komentar yang bisa Anda temukan selengkapnya disini

    Dukungan :

    Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini