For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

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

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.