Cara Membuat Post Grid Di Home Page Seperti Kompiajaib Pada Blog Non AMP

www.azid45.web.id - Cara Membuat Post Grid Di Home Page Seperti Kompiajaib Pada Blog Non AMP. Assalamualaikum.Wr.Wb, pada kesempatan kali ini saya akan berbagi tutorial cara membuat post grid seperti milik kompiajaib. Siapa yang tidak kenak bang Adhy Suryadi, pemilik blog kompiajaib.com. Beliau sudah sangat terkenal di dunia blogging dan internet, terutama tutorial blog dan template blogger. Ya, template beliau sangat responsive dan fast loading, selain itu juga support adsense jadi tidak diragukan lagi setiap postingan anda yang termuat dengan menggunakan template milik kang Adhy Suryadi kebanyakan akan termuat di one page dan rata-rata jika mendaftar di google adsense akan diterima full approve.

Mengapa saya bilang demikian?, hal ini sudah saya buktikan sendiri. Dengan menggunakan template safelink buatan kompiajaib.com, blog saya khusus safelink diterima oleh google adsense bahkan tidak tanggung-tanggung saya ganti email dan daftarkan lagi dengan alamat blog yang sama tetap diterima oleh google adsense. Padahal blog yang sudah diterima oleh adsense sulit untuk diterima lagi. Namun kali ini saya tidak akan menyinggung bagaimana diterima di google adsense karena blog saya yang satu ini sudah tiga bulan dalam masa upgrade adsense belum kunjung juga diterima. Oleh karena itu, selama saya belum diterima oleh google adsense di blog ini saya tidak akan membuat tutorial tentang adsense, jadi saya pada pertemuan kali ini akan share cara membuat postingan grid seperti milik kompiajaib. Biasanya kompiajaib.com terkenal dengan blog AMPnya sehingga jarang sekali beliau membuat tutorial blog Non AMP kecuali ada pengunjung yang memintanya. Dengan hal itulah, maka tutorial kali ini, saya buatkan buat anda yang menggunakan template Non AMP namun ingin sekali tampilan blog anda pada menu home page mirip seperti kompiajaib.com.

Baiklah, simak cara membuat postingan grid seperti milik kompiajaib di home page pada template Non AMP berikut ini;

Pertama, menuju menu theme - edit HTML kemudian cari kode </head> dan letakkan kode css berikut ini tepat diatas kode </head>

<b:if cond='data:view.isMultipleItems'>
<style>
#sidebar-wrapper {display:none;}
#post-wrapper{width:100%;max-width: 100%;margin: 0 !important}.post {margin: 10px;position: relative;width: 23.5%;width: calc(25% - 20px);height: 280px;display: flex;flex-direction: column;justify-content: center;float: left;transition: all .4s ease-in-out;overflow: hidden;box-shadow: 0 3px 20px 0 rgba(0,0,0,.075);text-align:center} @media screen and (max-width:1200px){.post{width:100%;width: calc(50% - 20px);} h2.post-title{margin-top:20px;}}
.post-info, .info-1{display:none}
.post:hover {transform:translateY(-5px);box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);}
.post:after{content: &quot;&quot;;position: absolute;left: 0;width: 100%;top: 0;height: 3px;background: linear-gradient(to right,#00626b 0,#00acc1 50%,#00f7ca 100%);}
.post-snippet{padding: 0px 10px 10px 10px;text-align:center}
h2.post-title{padding-left:10px; padding-right:10px}
@media only screen and (max-width:800px){.post {height:220px;} h2.post-title{margin-top:25px;}}
@media only screen and (max-width:568px){.post {height:auto;width:100%;margin: 0 0 20px;float: none;}.post-container{padding-left:10px!important;padding-right:10px !important} h2.post-title{margin-top:15px;}}
</style>
</b:if>

Kedua, edit kode css tersebut sesuai dengan kode pemanggil template anda. Contoh seperti, #sidebar-wrappaer, #post-wrapper karena barangkali berbeda dengan kode css pemanggil pada template anda.

Ketiga, Jika sudah merasah dirubah langkah selanjutnya adalah klik Save Template

Lihatlah dan uji cobalah agar tempilannya tidak berantakan.

Demikianlah Cara Membuat Post Grid Di Home Page Seperti Kompiajaib Pada Blog Non AMP. Semoga bermanfaat, Amin.