Membuat Pop Up Yuk

Membuat Pop Up Yuk

Membuat Pop Up Yuk



Lama juga ga buat postingan, jadi kangen nge-blog :) kali ini admin akn membagikan tutorial membuat pop up yang tentunya sudah banyak bertebaran di jagad maya, sebagai koleksi pribadi dan mungkin juga dapat bermanfaat bagi teman-teman blogger lain admin posting disini lagi, disimak ya :)

Baca juga : Membuat Link Pop Up


Disini saya beranggapan bahwa teman-teman sudah berada di template editor milik paman blogger selanjutnya cari kode ]]></b:skin>  atau  </style>   copy dan paste css dibawah ini tepat diatas kode tersebut

/* CSS Pop Up Button*/


a.popup-link{padding:17px 0;text-align:center;margin:7% auto;position:relative;width:300px;color:#fff;text-decoration:none;background-color:#FFBA00;border-radius:3px;box-shadow:0 5px 0 0 #eea900;display:block}

a.popup-link:hover{background-color:#ff9900;box-shadow:0 3px 0 0 #eea900;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}

#popup{visibility:hidden;opacity:0;margin-top:-200px;}

#popup:target{visibility:visible;opacity:1;background-color:rgba(255,255,255,0.7);position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}

@media (min-width:768px){.popup-container{width:300px}}

@media (max-width:767px){.popup-container{width:90%}}

.popup-container{position:relative;margin:7% auto;padding:15px 30px;background-color:#8dbb90;color:#fff;border-radius:3px;line-height:normal;font-size:130%;width:30%;border:5px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.15);}

a.popup-close{position:absolute;top:-3px;right:-3px;background-color:#fff;padding:7px 10px;font-size:20px;text-decoration:none;line-height:1;color:#333;border-bottom-left-radius:3px;}

a.popup-close:hover{border-radius:3px;transform:scale(1.5)}

Jika selsai simpan template
Untuk memanggilnya kita gunakan HTML berikut ini,

<div id="closed"></div>


<a href="#popup" class="popup-link">Klik untuk memunculkan Popup</a>

<div class="popup-wrapper" id="popup">

<div class="popup-container">

<!-- Konten popup, silahkan ganti sesuai kebutuhan -->



Letakkan Kontent apa saja disini. Bisa tulisan, widget fanspage, subscribe box dll



<!-- Konten popup sampai disini-->

<a class='popup-close' href='#closed'>X</a>

</div>

</div>

Mungkin itu dulu yang dapat admin sampaikan biarpun sedikit... semoga ada manfaatnya.

sumber : wajahilmu.blogspot.com/2015/07/cara-membuat-pop-up-tanpa-javascrip.html

DEMO

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×