Skip to main content
JEJAK UNIK

follow us

Cara Mudah Membuat Tampilan Berbeda Tiap Halaman Blog

Cara Mudah Membuat Tampilan Berbeda Tiap Halaman Blog

Cara Mudah Membuat Tampilan Berbeda Tiap Halaman Blog - terkadang kita sebagai admin blog merasa jenuh melihat tampilan postingan yang monoton dalam arti begitu saja. Tentunya ini sangat tidak enak dan membosankan sekali. Untuk itu dari pada kita mengganti template blog alangkah baiknya kita coba terapkan trik yang satu ini.

Trik membuat halaman berbeda ini sebenarnya sangat mudah, namun kita juga harus teliti dan mengetahui tiap bagian css pada template kita. Jika kita baru belajar mengenal css pastinya agak sedikit bingung, tapi jika sudah terbiasa maka cara ini hanya butuh waktu paling lama 5 menit tampilan halaman blog kamu akan berubah.

Baca juga: Situs Tempat Belajar Coding HTML, CSS Dan Javascript Bersama Duniailkom

Mantap sekali bukan? saya sendiri baru mempelajarinya dan mencoba menerapkan tampilan berbeda pada postingan yang saya buat dan berhasil. Untuk itu jika kalian ingin mencobanya bisa ikuti langkahnya dibawah ini.
Ada dua cara untuk menerapkan trik ini. Pertama kita masuk ke edit html template dan meletakan kode ini diatas <head> </head> atau bisa langsung menyimpan di halaman postingan mode (HTML) kita pakai cara yang mudah saja menyimpan di dalam halaman postingan.
Cara Mudah Membuat Tampilan Berbeda Tiap Halaman Blog

Seperti gambar diatas kita masuk editor postingan pada mode Perhatikan kode paling bawah yang saya kotakan, itulah yang nanti akan kita taruh sebagai style pembeda pada halaman postingan.

Kita akan menggunakan kode dasar ini
<b:if cond="data:blog.url == &quot;Url posting yang tampilannya ingin di bedakan&quot;"> <style type="text/css">

............

</style> </b:if>

Kemudian menjadi seperti ini

<b:if cond="data:blog.url == &quot;https://www.jelajahunik.com/p/jasa-review.html/&quot;"> <style type="text/css">

.post_page .content-wrapper{background:#f5f5f5;}#main-wrapper{width:76.7%;width:calc(100% - 340px);margin:0 auto;background:#E8EAF6} .footer-wrapper,.headtop-2,#header-wrapper{display:none}

 </style> </b:if>

Keterangan
Kode warna hijau adalah css yang bisa kalian lihat pada template Anda dan kode warna kuning merupakan url halaman posting yang akan kita ubah/bedakan. 

Dan kode yang saya tandai hijau contoh CSS dari template blog ini. Setiap kode css pada template tentunya dapat berbeda kalian bisa sesuaikan saja mana yang mau diubah tampilannya.

Untuk melihat hasilnya kalian bisa melihat demonya pada halaman ini

Selamat mencoba dan semoga bermanfaat!

You Might Also Like:

Jika tertarik dengan artikel yang anda baca saat ini, berikan tanggapan melalui kolom komentar di bawah ini. Berkomentarlah yang cerdas, karena pintar saja tidak cukup.
Buka Komentar