Cara Membuat Widget Popular Post Seperti Jalantikus di Blogger

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?

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.

GalihDesign

Cari Blog Ini