Skip to main content
RICODS

follow us

Membuat Pesan Melayang Simple Pada Blog

Membuat Pesan Melayang Simple Pada Blog - Terkadang kita sebagai admin ingin memberitahu pesan kepada pengunjung jika ada pengumanan penting yang ingin diberitahu. Namun kita bingung sebab tidak semua pembaca akan langsung melihat pesan yang ingin kita sampaikan.

Untuk itu cobalah trik membuat pesan melayang ala blog jejak unik ini, tampilannya sangat simple dan bisa diberikan link (url tujuan) jadi akan memudahkan pengunjung melihat apa yang ingin kita sampaikan.

Trik ini murni hanya menggunakan CSS jadi tenang saja sebab tidak akan menggangu loading blog sobat, tampilannya juga sudah responsive sehingga ketika diakses lewat smartphone pesan ini tidak akan menggangu tampilan blog anda.

Membuat Pesan Melayang Simple Pada Blog

Buat kamu yang tertarik ingin mencoba trik ini cukup mudah dan langsung saja kita kelangkah penerapannya.

Pertama tentunya sobat harus masuk dalam editor template lalu cari kode <head> atau </head> kemudian letakan kode ini di atasnya.

<style>
#kiri{position:fixed;z-index:9999;bottom:20px;left:0;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);animation:Gradient 15s ease infinite;background-size:320% 200%;border-radius:0 25px 5px 0}#kiri a{display:block;color:#fff;padding:10px 20px;font-weight:bold}#kiri a:before{display:block;content:&quot;BLOG JEJAK UNIK MEMANG KEREN!&quot;}#kiri a:after{display:block;content:&quot;TEMPATNYA BERBAGI TIPS BLOGING KHUSUS UNTUK PEMULA ASIYAPPPP&quot;}

@media(max-width:500px){#kiri{bottom:0;left:0;right:0;border-radius:0}#kiri a{text-align:center;padding:5px 3px;font-size:12px;text-align:center}#kiri a:before{display:block;content:&quot;BLOG JEJAK UNIK MEMANG KEREN!!&quot;}#kiri a:after{display:block;content:&quot;TEMPATNYA BERBAGI TIPS BLOGING KHUSUS UNTUK PEMULA ASIYAPPPP&quot;}}
</style>

Selanjutanya cari kode </body> lalu letakan kode pemanggil ini di atasnya

<div id='kiri'><a href='Url-Tujuan' target='_blank'/></div> 
MMembuat Pesan Melayang Simple Pada Blog

Save template.

Silahkan sesuaikan kata-kata yang saya marking kuning dan url-tujuannya!

Catatan: Untuk kata-katanya harus dibuat sama perhatikan kode css yang saya marking kuning

Selamat mencoba!

NOTE: blog.jejakunik.com atau jejakunik.com kini berganti nama domain menjadi ricods.com

You Might Also Like:

Comment Policy: Hallo sobat Anda bisa memberikan komentar sesuai dengan topik yang dibaca pada halaman ini.
Buka Komentar