Cara Membuat Pop Up Keren dan Responsive - Halo sobat, untuk hari ini saya akan berbagi tips tentang bagaimana membuat berhubung saya melihat popup yang digunakan oleh mbak Arlina saya tertarik dan ingin menambahkan popup tersebut di blog saya juga. Terus saya cari-cari tutorial tentang membuat popup dengan banyak versi yang menarik, namun tidak ada yang mirip seperti blog mbak Arlina tersebut.
Daripada pusing saya memutuskan untuk melihat source dari web mbak Arlina. Ketemu sih namun banyak yang membuat saya bingung. Terutama setelah saya menempatkan kode-kode dari sana tampilan Popup tidak mau muncul ha ha ha... tambah bingung dibuatnya. Namun dari usaha tersebut saya tidak mau mundur saya coba terus berkali-kali dengan sedikit bekal pengetahuan. Sampai keesokan harinya popup saya telah jadi dengan sempurna, sama persis dengan yang dimiliki mbak arlina, Boleh dikatakan ini adalah popup ala arlina design.
Cara Membuat Popup
Sebelum membuat popup alangkah baiknya kita tahu apa itu definisi popup. Menu Popup menurut definisi saya adalah menu yang apabila di klik terus muncul sebuah kotak dialog yang berisi sejenis peringatan, informasi, konfirmasi, dan dialog lainnya. Popup yang berisi peringatan biasanya digunakan untuk memberikan peringatan jika ada kesalahan atau kekurangan, ini biasanya digunakan untuk pencarian, contact form dan sejenisnya. Sedangkan Popup Konfirmasi biasanya digunakan untuk meyakinkan seseorang apakah benar-benar setuju atau tidak, pop up jenis ini biasanya digunakan untuk formulir registrasi, biasanya di dalam pop up ini ditambahkan dengan dialog peringatan. Terakhir adalah Pop up Informasi, seperti yang saya gunakan saat ini adalah sejenis pop up informasi, karena dialog yang saya gunakan adalah untuk memberikan info kepada seseorang untuk mengetahui segala informasi secara ringkas tentang isi dari blog saya. Dari Penjelasan di atas merupakan definisi menurut saya pribadi, jadi jika ada kesalahan saya mohon berkomentar agar saya dapat memperbaiki dengan benar, dan informasi yang saya berikan tidaklah menjadi informasi yang tidak berguna.
Langkah-langkah Membuat Popup
Oke, kita langsung saya ke pokok pembahasan tentang bagaimana membuat pop up seperti yang saya miliki saat ini.
1. Masuk ke blog sobat > dan pilihlah Template > selanjutnya pilih Edit HTML
2. Tambahkan CSS untuk menu pop up. Berikut ini adalah kode CSS yang akan sobat gunakan nantinya.
.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#ff675c;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
.top-menunavi li.infoInginTahu{border:0;}
.top-menunavi li.infoInginTahu a{background:#ff675c;color:#fff;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
.top-menunavi li.infoInginTahu a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
3. Cari kode</head> lalu tambahkan kode script di atasnya. Ingat jangan sampai masuk ke dalam tag kondisional ya sobat. Berikut ini kode javascript yakan sobat tambahkan.
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("//fonts.googleapis.com/css?family=Roboto+Condensed:400,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');}
//]]>
</script>
4. Cari kode <body>ini adalah bagian dimana dalog tersebut akan muncul pada saat menu pop up di klik. Sobat bisa mengubah pesan-pesan yang berisi di dalamnya. Misalnya Logo, sosial media, dan isi dialog tentang blog sobat. Isikan kode di bawah ini di bawah kode <body>.
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='contentbox'>
<headbanger><span id='textlogo'>Ingin Tahu</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'></i></a>
</headbanger>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Ingin Tahu' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq3clKRSc8zsDPQ_PD1vjIjvofmp9W_rT9DK4B4ZicCTZn743TAPX3zHnLuxLAmImECkshqhs_jLxPl19kiQ2NfctEphUfAsOCYZ7hyCtukpUPAMWIWTT9WxfB5HtrNcVulBkDEtLE4X0/s1600/IT-InginTahu.png' title='Ingin Tahu' width='140'/><br/>
<script src='http://memberi-cara.blogspot.com/feeds/posts/default?alt=json-in-script&callback=getposts'></script><br/><br/>
Blog Ingin Tahu merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger<br/><br/>
Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi sobat semua. Terima kasih.<br /><br />
<div style=float:right;font-size:8px;margin-bottom:0;><script>eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1.4("<a 2=\'3://0-5.6.7\'>8 9</a>");',11,11,'memberi|document|href|http|write|cara|blogspot|com|Memberi|Cara|'.split('|'),0,{}))</script></div>
</div></div></div>
<div id='left'>
<div class='taber2'><a href='https://plus.google.com/111136239845024944402' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'></i> Google Plus</a></div>
<div class='taber3'><a href='https://www.facebook.com/Ingin.Tahu.IT' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'></i> Facebook</a></div>
<div class='taber4'><a href='https://twitter.com/aboeoeba' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'></i> Twitter</a>
</div>
<div class='taber6'><a href='http://codepen.io/abudarda/' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen fa-fw'></i> Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=BLOG ID SOBAT' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-users fa-fw'></i> Join this blog</a>
</div></div></div></div></div></div>Keterangan : parse kode script yang paling atas. Ubah dan sesuaikan pesan singkat tentang informasi blog sobat. Ganti alamat sosial media dan id blog yang telah saya tandai tersebut5. Langkah terakhir sobat masukkan kode ini di menu yang sobat inginkan:
<li class='infoInginTahu'><a class='popup-link' href='#popup'>Popup </a></li>
Demikian saya akhiri saja tutorial tentang membuat menu pop up yang berbentuk dialog informasi. Popup ala arlina design ini saya peroleh dari source kode dari web mbak arlina. Jika ada kesalahan dalam tutorial ini saya mohon maaf dan saya juga ingin sobat memberikan kritik dan saran demi perkembangan blog ini selanjutnya.
