Cara Membuat Efek Layar Melengkung (Edge Screen) di Blog

Membuat Efek Edge Screen di Blogger
Selamat pagi sobat blogger, kali ini saya mau berbagi trik blogspot yaitu membuat efek layar melengkung di blog seperti Samsung Edge. Dua tepi sisi blog terlihat melengkung, dan ini akan membuat tampilan blog lebih keren dan menarik.

Jika sobat menggunakan smartphone Samsung, tentu ini tidak asing lagi. Nah, pada kesempatan ini kita akan coba membawa efek edge terebut pada blog, yaitu dengan menggunakan kode CSS.

Trik ini menggunakan HTML dan CSS dengan atribut box-shadow untuk membuat efek bayangan melengkung pada tepi layar di blog.


Memasang Efek Layar Melengkung di Blog

Caranya cukup mudah dan singkat tanpa perlu banyak langkah-langkah yang harus sobat lakukan. Baiklah mari kita mulai:
  1. Buka dashboard blog.
  2. Pilih Tema dan klik Edit HTML.
  3. Letakkan kode berikut tepat di bawah kode <body>.
    4. <style> .edge-right{z-index:99999999;background:#a8a8a8;height:100vh;width:0px;box-shadow:10px 0px 10px 12px #333;position:fixed;top:0;right:0} .edge-left{z-index:99999999;background:#a8a8a8;height:100vh;width:0px;box-shadow:0px 0px 10px 3px #333;position:fixed;top:0;left:0} </style> <div class='edge-right'/> <div class='edge-left'/>
  4. Simpan tema.


Silahkan sobat lihat hasilnya.

Jika efek layar melengkung di blog hanya ingin ditampilkan pada mode seluler saja dan tidak ingin ditampilkan di desktop, tambahkan kode tag conditional di CSS tersebut, seperti berikut:

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- KODE CSS EFEK LAYAR MELENGKUNG -->
</b:if>

Memasang efek layar melengkung di blogspot membuat tampilan blog sobat lebih keren dan menarik, pengguna selular merasakan pengalaman baru mengunjungi blog dengan edge screen effect pada blog.

Jika ada pertanyaan seputar postingan ini, silahkan sobat tuliskan pada kolom komentar di bawah. Selamat mencoba.
Postingan terkait
Komentar