Cara membuat notifikasi pop up + scroll diblogger keren

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

• Periksa

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

Text Judul

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