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