√ Cara Membuat Related Posts Grid Keren di Blogger

Cara Membuat Related Posts Grid Keren di Blogger

Konten [Tampil]

Related posts atau artikel terkait adalah beberapa link yang berada di website yang mengenai artikel yang sama. Nah pada sebuah blog tentunya akan ada topik yang terkait dengan artikel yang atau artikel yang sering dikunjungi oleh pengunjung anda ya.

Cara membuat related post biasanya secara default bawaan tema sudah ada. Akan tetapi related posts akan berpengaruh terhadap seo sebuah blog ya. Dengan adanya related post dapat meningkat pengunjung blog anda ya.

Membuat related post dapat mengurangi bounce rate dan menjadikan blog anda menjadi lengkap dan terlihat professional. Related posts biasanya terletak pada bagian blog paling bawah ya.

Cara Membuat Related Posts di blogger keren.

Cara membuat related post grid di blogger dapat diawali dengan membuka bagian akun blogger anda ya.

Kemudian anda buka Tema > Edit HTML ya

Cara Membuat Related Posts Grid Keren di Blogger

Lalu anda cari kode ]]></b:skin> atau </style>

/* Related Post Grid */
#ignielRelated{
  display:block;
  margin:20px 0px;
  line-height:1.5em;
}
#ignielRelated h3.title{
  font-size:16px;
  font-weight:600;
  text-align:center;
  text-transform:uppercase;
  line-height:initial;
}
#ignielRelated h3.title span{
  background-color:#fff;
  padding:0px 15px;
  position:relative;
  z-index:1;
}
#ignielRelated h3.title:before{
  content: '';
  display: block;
  position: relative;
  top:10px;
  width: 100%;
  border-top: 2px solid #cccccc;
}
#ignielRelated ul{
  margin:20px 0px 0px;
  padding:0px;
  display:flex;
  display:-webkit-flex;
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
}
#ignielRelated ul li{
  list-style:none;
  width:calc((100% / 3) - 15px);
  text-align:center;
  margin-right:20px;
  margin-bottom:20px;
  padding:0px;
  -webkit-margin-start:0px !important;
}
#ignielRelated ul li .thumb{
  overflow:hidden;
  line-height:0px;
  border-radius:7px;
}
#ignielRelated ul li:nth-of-type(3n){
  margin-right:0px;
}
#ignielRelated ul li a{
  display:block;
}
#ignielRelated ul li a.judul{
  color:#000; /* Warna Huruf */
  font-weight:600;
  margin-top:7px;
}
#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul{
  color:#ff5722; /* Warna Huruf Ketika Disorot */
}
#ignielRelated ul li a img{
  width:100%;
  max-height:143px;
  transition:all .3s ease;
  border:0px;
  margin:0px;
}
#ignielRelated ul li a img:hover, #ignielRelated ul li:hover img{
  transform:scale(1.1) rotate(-5deg);
  filter: brightness(75%);
  -webkit-filter: brightness(75%);
}
#ignielRelated .norelated{
  text-align:center;
  font-weight:600;
}
@media screen and (max-width:480px){
  #ignielRelated ul li{
    width: calc((100% / 2) - 7.5px);
    margin-right:15px;
    margin-bottom:15px;
  }
  #ignielRelated ul li:nth-of-type(3n){
    margin-right:15px;
  }
  #ignielRelated ul li:nth-of-type(2n){
    margin-right:0px;
  }
}

Kemudian anda klik simpan ya.

Nah demikianlah cara membuat related post di blog semoga anda tambah jago ngeblog ya