Skip to main content

follow us


www.azid.web.id - Cara membuat kotak post grid di home page pada blog seperti milik kompiajaib. Sobat sudah tahu blog kompiajaib.com? jika sudah mengetahuinya berarti sobat benar-benar seorang blogger yang cinta akan penampilan, sebagaimana saya. Pada blog kompiajaib terdapat hal yang unik bukan?. Ya, ternyata pada blog tersebut dimenu home pagenya full width 100% tanpa sidebar namun ketika menuju pada menu postingan ternyata sidebarnya muncul alias ada. Mengapa demikian? Hal tersebut dikarenakan Kang Adhy Suryadi menyembunyikan sidebarnya dan khusus muncul pada menu postingan saja. Cararanya sangat mudah tinggal menggunakan tag conditional, kemudian kode scriptnya yang ingin tidak ditampilkan diberi display:none. Contoh sidebar tidak tampil maka #sidebar-wrapper{display:none}, dan secara otomatis sobat juga harus mengganti postingannya menjadi width: 100% karena jika tidak demikian maka akan terlihat tidak bagus untuk dipandang. Caranya bisa #sidebar-wrapper{display:none} #post-wrapper{width:100%}.

Baca Juga: Memunculkan widget atau script pada halaman tertentu dengan tag conditional

Sebagaimana yang saya utarakan diatas, intinya setiap template bisa di desain seperti milik kompiajaib. Asal kita mengetahui caranya, dan tentunya tahu tag conditional agar blog kita tidak berantakan. Baik, jika sobat ingin membuat tampilan post di home page seperti kompiajaib sobat bisa mencobanya dengan mengikuti tutorial berikut ini;

Pertama, seperti biasanya, sobat harus masuk terlebih dahulu ke blogger.com - theme/template - pilih edit HTML.

Kedua, setelah menuju edit HTML maka langkah selanjutnya adalah cari kode <style amp-custom='amp-custom'> dan letakkan kode berikut dibawah kode <style amp-custom='amp-custom'>
(intinya didalam kode <style amp-custom='amp-custom'> ..... </style>)


<b:if cond='data:view.isMultipleItems and data:blog.pageType != &quot;static_page&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
#comments,#sidebar-wrapper {display:none;}
#post-wrapper,.post-outer {width:100%;max-width: 100%;}.post {margin: 10px 20px 10px 0;12px 10px 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);}}
.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%);}
h2.post-title, .post-snippet{padding: 5px 10px 10px 10px}
</b:if>
<b:if cond='data:view.isMultipleItems and data:blog.pageType != &quot;static_page&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
#post-wrapper,.post-outer {width:100%;height:auto}.post {margin: 10px 20px 10px 0;padding: 12px 10px 10px;position: relative;width:100%;height: auto;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}
.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%);}
</b:if>
Ketiga, Setelah kode tersebut terpasang, langkah selanjutnya dalah editing sesuai dengan tampilan bloog sobat karena barangkali kurang sesuai baik itu snippet (deskripsi artikel) maupun title (judul artikelnya).

Keempat, Jika sudah dirasa diedit, maka SAVE TEMPLATE

KETERANGGAN:
Mungkin sobat bertanya-tanya apakah kode script tersebut bisa digunakan pada Blog Non AMP? tentunya bisa caranya tinggal cari kode </style> dan letakkan kode diatas tadi tepat diatas kode </style>

Jika sobat juga ingin menampilkan menampilkan pada halaman statis dengan post width 100%, atau full post dan tidak ada sidebarnya maka bisa copas kode berikut dan letakkan dibawah kode diatas


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
#comments,#sidebar-wrapper {display:none;}#post-wrapper,.post-outer {width:100%;max-width: 100%;}
</b:if>

Demikianlah tutorial Cara Membuat Kotak Post GRID Di Home Page Seperti Kompiajaib. Semoga tutorial ini bermanfaaat, Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar