Hello sobat IcloudZer kali ini admin bakalan membahas mengenai cara membuat notifikasi pop up bisa scroll diblogger, dan admin akan menjelaskan cara pembuatannya secara singkat dan terperinci
Info: Bagi kamu yang sudah penasaran yuk langsung aja kita bahas bersama sama
Pop up mode
Pop up mode merupakan sebuah model notifikasi bisa berupa iklan, gambar, peringatan, atau yang lain sebagainya, yang ditampilkan saat jendela browser memuat data dan posisinya itu stabil tetap pada layar perangkat atau bisa juga disebut melayang
Info: So jadi jika kamu melihat ada peringatan, atau iklan melayang itu dinamakan notifikasi pop up
Dibuat menggunakan CSS
Notifikasi pop up ini dibuat hanya menggunakan kode CSS murni, tidak akan membuat blog kamu akan semakin melambat atau lemot diakibatkan sumber kode pembuatan Notifikasi pop up tersebut
Contoh tampilan
Sebagai pelengkap admin akan membuatkan contoh tampilan dari notifikasi pop up ketika kamu menerapkan notifikasi pop up tersebut didalam blog kamu
Info: Bagaimana sobat dengan contoh tampilan nya keren bukan dan kamu bisa scroll tampilan keatas dan kebawah setelah kamu menggunakan tombol diatas
Cara pembuatan
Baiklah saatnya admin akan membahas bagaiamana caranya membuat Notifikasi pop up ala icloudice.com, simak dan pelajari artikel ini hingga selesai ok biar gak salah paham
Kode CSS
Seperti biasanya kamu bisa menyalin dan menggunakan kode CSS dibawah ini kemudian kamu bisa tempelkan diatas kode ]]><b:skin>
.rahBuatPopUp{
background-color:#fefefe;
z-index:10;
position:fixed!important;
padding:5px 5px 5px 5px auto;
top:25%;
left:50%;
width:85%;
height:50%;
transform:translateX(-50%);
-webkit-transition:all .2s ease;transition:all .1s ease;
}
.rahBuatPopUp .cls{
position:absolute;
right:5px;
top:5px;
}
.rahBuatPopUp .cls svg{
fill:#161617;
width:24px;
height:24px;
}
.rahBuatPopUp .cnt{
width:auto;
height:auto;
padding:12px 30px 12px 16px;
border-bottom:4px;
-webkit-animation:slide-down 1s ease-out;animation:slide-down 1s ease-out;
}
.rahBuatPopUp .scrl{
overflow-y:auto;
display:block;
padding:5px;
overflow:hidden;
height:100%;
}
.PopUpRahBuat:checked ~ .rahBuatPopUp{
display:none;
padding:5px 0 0 2px;
border-radius:50%;
z-index:3000;
}Info: Atau kamu bisa menggunakan tag kode style untuk meletakkan kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>
<input class='PopUpRahBuat hidden' id='clss' type='checkbox'/>
<div class='rahBuatPopUp'>
<div class='cls'>
<label for='clss'>
<svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z">
</path>
</svg>
</label>
</div>
<div class='scrl'>
<div class='cnt'>
<!-- Tulis konten anda -->
</div>
</div>
</div>Info: Fungsi dari kode html diatas adalah untuk menampilkan notifikasi pop up nya
Bla BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
Bla BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
Bla BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
Bla BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA