Cara Membuat Widget Popular Post Seperti Jalantikus di Blogger

Cara Membuat Widget Popular Post Seperti Jalantikus di Blogger

Juni 20, 2020
Ada banyak cara untuk mempercantik tampilan web atau blog. Salah satu caranya yakni membuat desain widget Popular Post atau Postingan Populer. Kita ambil contoh desain Popular Post milik Jalantikus. Bisa kamu lihat ada urutan nomor di list nya bukan?
Widget popular post jalantikus

Untuk membuat Popular Post seperti milik Jalantikus sangat mudah. Tidak ada tambahan Javascript. Kita hanya bermain CSS saja.

Cara Membuat Widget Popular Post Seperti di Jalantikus di Blogger

Langkah pertama yang kamu harus lakukan adalah masuk ke Blogger, Edit HTML, cari tag <body> dan letakkan kode css berikut ini diatas tag <body>.

<style>
.PopularPosts{
  margin:0 auto;
  width: 300px;
  font-size:13px;
}
.PopularPosts,
.PopularPosts .widget-content{
  position: relative;
  margin-top: 20px;
}
.PopularPosts::before{
  content:'';
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 32px;
  width: 5px;
  background-color: #ce0a46;
  z-index: 1;
}
.PopularPosts h2,
.PopularPosts h3{
  margin-bottom: 20px;
  height: 32px;
  font-weight: 500;
  position: relative;
  display: inline-block;
  font-size: 22px;
  line-height: 32px;
  padding-left: 20px;
}
.PopularPosts li{
  display: block;
  position: relative;
  height: 60px;
  margin-bottom: 20px;
  list-style:none;
}
.PopularPosts li::before{
  content:'';
  position: absolute;
  left: -15px;
  top: 13px;
  width: 30px;
  height: 30px;
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #ce0a46;
  z-index: 4;
}
.PopularPosts li:nth-of-type(1)::before{
  content:'1';
}
.PopularPosts li:nth-of-type(2)::before{
  content:'2';
}
.PopularPosts li:nth-of-type(3)::before{
  content:'3';
}
.PopularPosts li:nth-of-type(4)::before{
  content:'4';
}
.PopularPosts li:nth-of-type(5)::before{
  content:'5';
}
.PopularPosts li:nth-of-type(6)::before{
  content:'6';
}
.PopularPosts li:nth-of-type(7)::before{
  content:'7';
}
.PopularPosts li:nth-of-type(8)::before{
  content:'8';
}
.PopularPosts li:nth-of-type(9)::before{
  content:'9';
}
.PopularPosts li:nth-of-type(10)::before{
  content:'10';
}
.PopularPosts li .item-thumbnail{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABWQAAAJYAQMAAADfXH2qAAAABlBMVEXu7u7Nzc0qm56VAAAE5klEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABm54xtJgehIAxyQEgJlOJWrhPo4Er4W3Ep7uAcbrDynG0BBtK7YEbiC1Ybjt7OY7yGx2QymUwmk8lkMplMJpPJZPJv/DJC2I8RYvkaITyMECs2owNwGBksINRmDjiNDAFAMipEALtRARBqswUXMvngcSGTDysuZPIBEDKuxYVMPjhcyORDwIVMPkRcyOQDINRmCy5k8sHjQiYfVlzI5EMEdNrM4kImHxxufkTyITw6nUg+rI8HrEib5f6KEvmwZAsEiXzwub2cRD6EvHRZiTaLJRaiQD68JQ0C+eBqKjiBfPC1olagzdbXrZE/H5qVINDnw9KY1dHng2sWAkvfZqFdZCN7PnQCA3k+9D++I8+HpdNnydvM97995M6Hte+rwJ0Pw5rlqPPBjm1F3WZuXLIicz74MQ48c5v5sZSOXW1vU3a1fdKu5GpNR+BWew5RzK12yALLrXYfs5harRnwzGq/ZmBhVnuYAcusdjcjK7HaZEYCsdrdjERitR8p355mwDGrRRptS612NG6kVvuRek4YjOu41SIpPd8Oxo3kajvjWvb/ZVr/eTvjBnq1uzEaLxk9XuPyb5l5tMZl30f36I0bBNS+xo0CaqtxLfeJO49+T0dBbTVukFBb9yIl1JZ9XvKToh6tcR292nU8n4A/xGp/Yzj7gd/Eah2GczUn74Skh32Nm4Uzq02xPw+GnVlt0Vhtm5jf2qVqXIsH4slej9JbxbZfbrUG7flbHNRqi8o923ajfttcn3GzbZkn0j3KSewz25ZbbSrG/cHNwa02b5sXdu5dkufjJXHXNt3GrZzU9z54DFNF/GrbiS3y3b306Cskgdq6alvu+0o8unG4D7va1Br3YN+V7malN/badiOy5PfsZCfkfPjSn0/o7k+gr213NwW92tQYl/+kSnunCvttVh7tCWx+tam5C0jFCY9xE39tmzus6G9h80hV7Vfg9Fr+smjU1ry1FVCbcm2lnCDSZcW3Uk6Ya8J/xyNJrQlNbQWcoFpbBbWlthpOUK2tglqtNWGTeqrZXyfoTGfctdWZzrh9KzCxhdcJAtNw2KoTFCYNj1pbnVmS27c6syS3E3RmSaoTPLnardRWYg79KL7VmXy5nUA/+fK3vTu4iRgGogCaVQ45poSUklboZCPRGL3QAAWgDXFiWzlQwIz2PQnOlpnRB7HyLzv1uk/CFPkljXE/bLe7nUM/r7Mfvm5zu0Z+Aaadrk9C7Nd1zp98nYToS1a3qt5t9CWrl7n10y6RnwJq/3rqk7DGfs3svM2ffrfRX4qrazZe32Mv2XXAV5uEKXQ2FPthq3e7hM6GoS1WPe0aOhv6mp2TEH/J6qxevyeMsbOh58N1t1PwbGj5sJ1zuwTPhr5m52mf4Zes/m1WJiH0u2v3fPgdy1f4bGj5UE47h8+Gtmafx2kzLNmVD9/HaZ/hs+HeVBQ/G/I1fQx7phaVZA01udp/cjUrPTItWbZGsFxta7ma7MZMY5usgTFZu2Wu5tD4rRl3j0xLlq1NOFdT85wmG4ox0ZJla29P1owf99OL/5kSLdmRD3myofgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgLfwB371bVaqc5ojAAAAAElFTkSuQmCC);
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  border-radius: 4px;
  position: absolute;
  left: 0;
  top: 0;
  height: 60px!important;
  width: 60px!important;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
  pointer-events: none;
}
.PopularPosts .item-title{
  white-space: normal;
  padding-left: 80px;
  padding-right: 5px;
  height: 60px;
}
</style>

Jika sudah, silahkan tambahkan widget Popular Post dengan cara masuk ke Blogger, Edit Tata Letak, Tambahkan widget Popular Post di Sidebar.

DEMO

Akhir Kata

Bagaimana dengan cara membuat widget popular post seperti jalantikus di Blogger? Sangat mudah bukan?

Kalau belum berhasil atau ada yang ingin ditanyakan, silahkan tuliskan komentarmu disini ya. 
Tampilkan Komentar

Tidak ada komentar:

Posting Komentar

Mohon untuk menggunakan bahasa yang baik dan benar.