Pada umum nya kita harus paham dulu tentang code html dan css karena jika anda membuat suatu populer post ingin menampil gambar mode grid anda harus pelajari dulu html dan css.
Jika sudah tau dasar dasar dari html dan css maka anda akan mudah dengan sendiri nya untuk mengedit tampilan halaman utama anda baik pada postingan blog anda.
Namun parasabat disni tidak perlu ragu karena saya akan memberikan tips lengkap tampa sahabat tau tentang ilmu coding atau pemograman.
Oya sahabat pastikan dulu bahwa anda sudah mempunyai sebuat akun blogger yang sudah terbuat kerna jika anda belum membuat akun blogger saya rasa postingan saya ini tidak ada gunanya untuk anda.
Baiklah agar mempersingkat waktu kita bagimana kita langsung saja praktek nya.
1.pertama anda login ke blogger.
2.masuk ke tema.
Jika sudah masuk ke Tema lalu copy code di bawah ini .
/* Related Post By Harian Batam */
#populer-post{display:block;margin:10px 0;line-height:1.2em;margin-bottom:-10px;transition:all .5s ease;background:#fff;padding:0px;padding-bottom:0;border-radius:3px}
#populer-post h3.title span{background-color:#fff;padding:0 5px;position:relative;z-index:999;top:-5px;margin-left:10px}
#populer-post ul{margin:0px 0 0;padding:0;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap}#populer-post ul li{list-style:none;width:calc((100% / 3) - 15px);text-align:left;margin-right:10px;margin-bottom:10px;padding:0;-webkit-margin-start:0px!important;font-size:16px;font-family:'Google Sans'}
#populer-post ul li:nth-of-type(2n){margin-right:20}#populer-post ul li a{display:block}
#populer-post ul li a.judul{color:#000;font-weight:400;margin-top:7px}
#populer-post ul li a.judul:hover}
#populer-post ul li:hover a.judul{color:#fd0000}
#populer-post ul li a img{width:100%;max-height:220px;transition:all .3s ease;border:0;margin:0}
#populer-post ul li a img:hover,#populer-post ul li:hover img{transform:scale(1.1) rotate(-5deg);filter:brightness(50%);-webkit-filter:brightness(50%)}#populer-post .norelated{text-align:center;font-weight:600}@media screen and (max-width:480px){#populer-post ul li{width:calc((100% / 2) - 7.5px);margin-right:15px;margin-bottom:15px}#JagoanRedesignRelated ul li:nth-of-type(2n){margin-right:15px}#JagoanRedesignRelated ul li:nth-of-type(2n){margin-right:0}}
#populer-post ul li .thumb{box-sizing: border-box; overflow: hidden; position: relative; width: 175px; height:200px}
#populer-post h3.title span{background-color:#fff;padding:0 5px;position:relative;z-index:999;top:-5px;margin-left:10px}
#populer-post ul{margin:0px 0 0;padding:0;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap}#populer-post ul li{list-style:none;width:calc((100% / 3) - 15px);text-align:left;margin-right:10px;margin-bottom:10px;padding:0;-webkit-margin-start:0px!important;font-size:16px;font-family:'Google Sans'}
#populer-post ul li:nth-of-type(2n){margin-right:20}#populer-post ul li a{display:block}
#populer-post ul li a.judul{color:#000;font-weight:400;margin-top:7px}
#populer-post ul li a.judul:hover}
#populer-post ul li:hover a.judul{color:#fd0000}
#populer-post ul li a img{width:100%;max-height:220px;transition:all .3s ease;border:0;margin:0}
#populer-post ul li a img:hover,#populer-post ul li:hover img{transform:scale(1.1) rotate(-5deg);filter:brightness(50%);-webkit-filter:brightness(50%)}#populer-post .norelated{text-align:center;font-weight:600}@media screen and (max-width:480px){#populer-post ul li{width:calc((100% / 2) - 7.5px);margin-right:15px;margin-bottom:15px}#JagoanRedesignRelated ul li:nth-of-type(2n){margin-right:15px}#JagoanRedesignRelated ul li:nth-of-type(2n){margin-right:0}}
#populer-post ul li .thumb{box-sizing: border-box; overflow: hidden; position: relative; width: 175px; height:200px}
Di atas adalab contoh css untuk mode grid populer post blog tempat kan saja code tersebut di atas code yang bertulusin ]]</b:skin>.
Jika anda bingun mencari code yang bertulisan tersebut maka anda bisa mencari dengan metode ini.
Buka teme nanti akan muncul tiga garis di atas kanan lalu klik saja 3 garis di atas kaman tersebut.
Lalu anda bisa memihat pilihan diaitu akan muncul pilihan hedaer body dll agar lebih mudah untuk mencari nya anda klik saja tulisan Header itu lalu langsu g scroll ke atas untuk mencari css yang sudah di jelas kan di atas.
Oya sobat jangan lupa anda hapus dulu populer post yang ada di css blog nya sobat jika tidak di hapus pasti nya akan berabtakan nanti tampilan gambar mide grid populer post nya.
Mungkin sampai sini dulu yah tutorial cara buat populer post mode grid di blogger tetima Kasih.... 😊😊😊😊