Hello sobat IcloudZer kali ini admin akan memberikan informasi mengenai blogger yakni bagaimana caranya membuat pesan melayang responsif dan keren pastinya
Info: Ya udah dari pada penasaran yuk langsung aja kita bahas bersama sama okay
Pesan Melayang
Khusus pada pembelajaran didalam artikel kali ini adalah untuk membuat pesan melayang sederhana dan juga responsif diblogger, yang mana pada pesan tersebut bisa kamu tampilkan sesuai dan sesuka hati kamu lah hehehe
Fungsi
Fungsi dari pesan melayang ini sebenarnya bisa kamu gunakan ketika kamu ingin menampilkan suatu informasi ataupun yang lainnya, bisa berupa text, gambar, atau yang lainnya, termasuk kode unit adsense yang bisa kamu Tampilan didalam pesan melayang ini
Contoh Tampilan
Admin juga telah membuatkan sebuah contoh tampilan dari pesan melayang sederhana dan juga responsif, kamu bisa melihat contoh tampilannya menggunakan tombol dibawah ini okay
Cara Pembuatan
Baiklah sekarang saatnya admin akan memberikan penjabaran mengenai cara pembuatan pesan melayang sederhana dan juga responsif yang bisa kamu terapkan diblog kamu
Kode CSS
Seperti biasanya langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya di atas kode ]]<b:skin>
.rahpsn-oto{
display:flex;
position:fixed;
overflow:hidden;
buttom:0;
width:100%;
height:auto;
background-color:#fefefe;
z-index:10px;
padding:5px 5px 0 0;
border-radius:10px;
}
.rahpsn-oto .cls{
position:absolute;
right:5px;
top:5px;
}
.rahpsn-oto .cls svg{
width:24px;
height:24px;
fill:#161617;
}
.rahpsn-Oto:checked ~ .rahpsn-oto{
display:none
}
.rahpsn-oto .cnt{
display:flex;
justify-content:center;
align-items:center;
font-family:'Rubik', sans-serif;
font-size:12px;
color:#161617;
}
.rahpsn-oto .credit:after{
content:'Created by Icloudice';
font-weight:700;
font-size:10px;
display:flex;
align-items:center;
justify-content:flex-end;
width:55px;
height:25px;
padding-right:10px;
background-color:#f8000;
border-radius:80px 0 0 0;
color:#fefefe;
position:absolute;
buttom:0;
right:0;
}Info: Kamu juga bisa juga menggunakan tag kode style untuk menaruh kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>
<input class='rahpsn-Oto hidden' id='rahpsn-oto' type='checkbox'/>
<div class='rahpsn-oto credit'>
<label for='rahpsn-oto'>
<div class='cls'>
<svg viewbox='0 0 24 24'>
<path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'>
</path>
</svg>
</div>
</label>
<div class='cnt'>
<!-- Tulis pesan yang akan kamu tampilkan disini -->
</div>
</div>Info: Kode HTML diatas berfungsi untuk menampilkan pesan melayang nya
Style Lainnya
Style lainnya ini merupakan pesan melayang sederhana dan juga responsif yang ditampilkan tepat diatas header, berlawanan dengan style sebelumnya yang sudah admin jabarkan
Contoh Tampilan
Dan untuk contoh tampilan dari style lainnya ini kamu bisa melihatnya menggunakan tombol dibawah ini okay
Icloudice merupakan sebuah tempat untuk berbagi berbagai macam informasi Teknologi, Icloudice merupakan sebuah tempat untuk berbagi berbagai macam informasi Teknologi, Icloudice merupakan sebuah tempat untuk berbagi berbagai macam informasi Teknologi, Icloudice merupakan sebuah tempat untuk berbagi berbagai macam informasi Teknologi
Icloudice merupakan sebuah tempat untuk berbagi berbagai macam informasi Teknologi, Icloudice merupakan sebuah tempat untuk berbagi berbagai macam informasi Teknologi, Icloudice merupakan sebuah tempat untuk berbagi berbagai macam informasi Teknologi, Icloudice merupakan sebuah tempat untuk berbagi berbagai macam informasi Teknologi