Ads

Popup Login dan Popup Warning

Yo! Kali ini saya akan membagikan 2 tutor Yaitu Popup Login dan Popup Warning. Yang mana khusus untuk membatasi pegerakan pengunjung saat memasuki blog kita.

Popup Login dan Popup Warning
Dagruel

1. PopUp Warning

Yang Pertama PopUp Warning, PopUp ini hanya sekedar peringatan jadi saat popup muncul hanya ada tombol enter untuk masuk kepostingan dan tombol exit yang menuju hompage blog.

Cara pasang nya. Salin css berikut dan letakkan ke dalam template tepat nya di atas tag </style>.

/* in feed */
.resIn{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z' fill='%23edf094'/%3E%3C/svg%3E") 12px 10px no-repeat #e23a2e;background-size:35px;min-height:50px;margin-bottom:20px;padding:12px 12px 12px 60px;color:#fff}
/* in PopUp */
.resWarn{position:fixed;top:0;left:0;right:0;width:100%;height:100%;z-index:99999;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:none;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;justify-content:center;flex-direction:column;background:#000}.resWarn *{box-sizing:border-box}.resWarn .resFile{max-width:600px;text-align:center;padding:20px}.resFile .resTitl{font-size:28px;font-weight:700;color:#fff;margin-bottom:15px}.resFile .resDesc{background:#dd5f05;color:#fff;padding:10px;margin-bottom:15px;border-radius:3px}.resFile .resCon{display:flex;flex-wrap:nowrap;margin:0 -10px}.resCon .resBtn{width:50%;margin:0 10px;padding:7px 10px;background:#333;color:#fff;border-radius:3px;border:0;font-family:inherit;cursor:pointer}.resCon #resEn.resBtn{background:#d30000}

Kemudian taruh html dan script nya di tempat yang kalian inginkan.

<div class='resIn'>
  Peringatan, series berjudul "Bite Into Me" di dalamnya mungkin terdapat konten kekerasan, berdarah, atau seksual yang tidak sesuai dengan pembaca di bawah umur.
</div>
<div class='resWarn'>
  <div class='resFile'>
    <div class='resTitl'>
      Content Warning
    </div>
    <div class='resDesc'>
      Peringatan, series berjudul "Bite Into Me" di dalamnya mungkin terdapat konten kekerasan, berdarah, atau seksual yang tidak sesuai dengan pembaca di bawah umur.
    </div>
    <div class='resCon'>
      <div id='resEn' class='resBtn'>Enter</div>
      <div id='resEx' class='resBtn'>Exit</div>
    </div>
  </div>
</div>
<script type='text/javascript'>
  //<![CDATA[
 $(".resWarn").css("display","flex").hide().fadeIn(),$("#resEn").click(function(){$(".resWarn").fadeOut(function(){$(this).remove()})}),$("#resEx").click(function(){window.location.href="/"});
  //]]>
</script>
Text yang di tandai dapat di ganti sesuai keinginan kalian.

2. PopUp Login

Lanjut yang kedua, PopUp Login ini mengharuskan pengunjung memasukkan nama dan usia. Untuk Nama hanya lah hiasan semata, Fungsi sebenarnya terletak di Usia.

Yang mana ketika pengunjung menuliskan usia nya di bawah angka 18 maka postingan kita akan tersembunyi dan sebaliknya jika memasukkan usia di atas 18 postingan akan muncul.

Langsung saja pasang css berikut.

/* PopUp */
.resWarn{position:fixed;top:0;left:0;right:0;width:100%;height:100%;z-index:99999;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:none;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,.8)}.resWarn *{box-sizing:border-box}.resWarn .resFile{max-width:600px;text-align:center;padding:20px}.resFile .resTitl{font-size:28px;font-weight:700;color:#fff;margin-bottom:15px}.resFile .resDesc{background:#dd5f05;color:#fff;padding:10px;margin-bottom:15px;border-radius:3px}.resLog .resInput,.resLog .resSubmit{display:flex;flex-wrap:nowrap;margin:15px -10px 0}.resCon .resBtn,.resInput .resIpt{width:50%;margin:0 10px;padding:7px 10px;background:#333;color:#fff;border-radius:3px;border:0;font-family:inherit;cursor:pointer}.resInput .resIpt{background:#f1f1f1;color:#333}.resIpt input{outline:none}.resCon #resEn.resBtn{background:#d30000}@media screen and (max-width:540px){.resLog .resInput{flex-wrap:wrap}.resInput .resIpt{width:100%}.resInput .resIpt:first-child{margin-bottom:15px}}

Kemudian salin html berikut dan letakkan di tempat yang kalian ingin kan, ini hanya berupa pemberitahuan pengunjung telah login atau tidak. tidak di pasang juga tidak apa.

<!--Pemberitahuan-->
<marquee id='resSun'>Selamat datang <span></span>, Terima kasih telah berkunjung di blog Dagruel</marquee>

<!--Tombol Login-->
<button type='button' name='loginButton' id='loginPage'>Login</button>
Pisahkan Pemberitahuan dan Tombol Login. tag "marquee" tersebut dapat kalian ganti entah itu div, p, h1, h2, dst. Asalkan attribut id='resSun' tidak di hapus. Dan fungsi tag span di situ untuk meletakkan nama pengunjung yang login. tombol login dapat kalian letakkan misal di header atau dimana saja yang enak bagi pengunjung untuk mengklik tombol tersebut.

Selanjutnya pasang html dan script berikut di atas tag </body>

<div class='resWarn'>
  <div class='resFile'>
    <div class='resTitl'>
      Login Page
    </div>
    <div class='resDesc'>
      Login Hanya Dengan Memasukkan Nama dan Umur saja. Aman Kok :)
    </div>
    <div class='resCon'>
      <form class='resLog' method='post' name='login'>
        <div class='resInput'>
          <div class='resIpt'>
            <span>Nama: </span>
            <input id='resName' type='text' name='Nama Kamu' placeholder='Stalker' required='required'/>
          </div>
          <div class='resIpt'>
            <span>Usia: </span>
            <input id='resAge' type='text' name='Usia Kamu' placeholder='0' required='required'/>
          </div>
        </div>
        <div class='resSubmit'>
          <button id='resEn' class='resBtn' type='submit'>Enter</button>
          <div id='resEx' class='resBtn'>Exit</div>
        </div>
      </form>
    </div>
  </div>
</div>
<script type='text/javascript'>
  //<![CDATA[
  var fileHide = "tag, .class, #id";
  var anom = "Stalker";
  var logConf = "Kamu Sudah pernah Login, Apakah Kamu ingin Logout.";
  var outCom = "Terima Kasih anda telah Logout";
  var kidText = "Di sini adalah text ketika pengunjung memasukkan usia di bawah 18";
  var teenText = "Di sini adalah text ketika pengunjung memasukkan usia di atas 18";
  var ageFist = true;
  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[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;}('1F t=["\\I\\L\\v\\b\\a\\K\\i\\b\\Q\\a\\f\\T\\b\\a\\g\\i\\b\\c\\w\\E\\L\\s\\c\\a\\f\\D\\b\\1c\\a\\g\\i\\b\\c\\f\\h\\c\\a\\f\\G\\b\\c\\y\\c\\g\\c\\1n\\c\\a\\f\\H\\b\\a\\f\\M\\b\\a\\g\\i\\b\\c\\x\\c\\a\\f\\G\\b\\c\\u\\c\\g\\c\\12\\c\\a\\J\\I\\L\\r\\b\\a\\K\\i\\b\\c\\x\\c\\a\\f\\G\\b\\c\\u\\c\\g\\c\\c\\a\\14\\10\\L\\d\\B\\A\\f\\Z\\b\\c\\U\\c\\a\\g\\j\\B\\A\\f\\Z\\b\\c\\R\\c\\a\\14\\i\\b\\c\\w\\E\\L\\s\\c\\a\\f\\D\\b\\d\\a\\g\\i\\b\\c\\w\\E\\c\\a\\f\\M\\b\\a\\g\\i\\b\\c\\f\\h\\c\\a\\f\\T\\b\\I\\b\\a\\K\\i\\b\\c\\h\\c\\a\\f\\P\\b\\a\\J\\a\\g\\1q\\B\\B\\1a\\13\\i\\b\\Q\\a\\f\\M\\b\\a\\11\\j\\1p\\p\\13\\b\\i\\b\\c\\w\\E\\c\\a\\f\\q\\b\\C\\a\\g\\i\\b\\Q\\a\\f\\M\\b\\a\\a\\11\\b\\i\\b\\c\\w\\E\\c\\a\\f\\q\\b\\k\\a\\g\\i\\b\\Q\\a\\f\\T\\b\\a\\a\\J\\i\\b\\c\\f\\17\\c\\a\\f\\O\\b\\I\\b\\d\\a\\K\\d\\f\\1m\\b\\a\\g\\A\\f\\o\\b\\c\\U\\c\\g\\i\\b\\c\\w\\U\\c\\a\\f\\l\\b\\a\\a\\g\\A\\f\\o\\b\\c\\R\\c\\g\\i\\b\\c\\w\\R\\c\\a\\f\\l\\b\\a\\a\\g\\r\\b\\a\\J\\a\\g\\i\\b\\c\\w\\1e\\c\\a\\f\\F\\b\\I\\b\\a\\K\\i\\b\\c\\x\\c\\a\\f\\G\\b\\c\\u\\c\\g\\c\\c\\a\\g\\i\\b\\c\\f\\h\\c\\a\\f\\T\\b\\a\\g\\i\\b\\Q\\a\\f\\T\\b\\a\\J\\a\\g\\i\\b\\c\\w\\1i\\c\\a\\f\\F\\b\\I\\b\\a\\K\\1d\\B\\B\\A\\f\\Z\\b\\c\\U\\c\\a\\e\\e\\1d\\B\\B\\A\\f\\Z\\b\\c\\R\\c\\a\\13\\v\\b\\a\\11\\1h\\b\\1r\\a\\1f\\1f\\b\\A\\f\\m\\b\\c\\U\\c\\a\\g\\A\\f\\m\\b\\c\\R\\c\\a\\g\\i\\b\\c\\w\\E\\L\\s\\c\\a\\f\\D\\b\\1c\\a\\g\\i\\b\\c\\w\\E\\c\\a\\f\\1o\\b\\a\\f\\P\\b\\a\\g\\1C\\b\\N\\a\\g\\v\\b\\a\\a\\J\\a\\14","\\e","\\p\\F\\l\\q\\k","\\e\\l\\m\\x\\h\\l\\16\\k\\m\\j\\h\\v\\d\\e\\j\\d\\p\\16\\y\\o\\e\\s\\y\\o\\x\\k\\q\\m\\o\\e\\j\\d\\p\\1a\\v\\d\\e\\j\\d\\p\\1b\\h\\r\\d\\e\\s\\h\\u\\d\\1D\\y\\k\\e\\s\\q\\l\\d\\17\\q\\u\\d\\e\\s\\h\\u\\d\\O\\o\\e\\v\\d\\k\\O\\k\\d\\r\\e\\j\\d\\p\\1A\\h\\j\\o\\e\\x\\p\\p\\e\\G\\m\\u\\10\\e\\m\\C\\d\\j\\s\\l\\m\\12\\e\\e\\p\\F\\h\\o\\e\\j\\y\\d\\l\\16\\k\\h\\l\\P\\d\\j\\e\\D\\k\\r\\l\\e\\h\\s\\k\\d\\j\\e\\h\\o\\m\\r\\e\\j\\d\\r\\m\\C\\d\\e\\C\\h\\l\\e\\j\\y\\d\\l\\1b\\h\\r\\d\\u\\e\\p\\d\\k\\O\\k\\d\\r\\e\\j\\d\\r\\m\\C\\d\\O\\k\\d\\r\\e\\x\\l\\q\\x\\P\\e\\o\\y\\l\\l\\e\\e\\A\\M\\e\\P\\q\\u\\1j\\d\\H\\k\\e\\u\\q\\p\\F\\l\\h\\10\\e\\k\\d\\d\\o\\1j\\d\\H\\k\\e\\D\\q\\u\\u\\d\\o\\e\\D\\q\\u\\d\\e\\C\\h\\j\\e\\s\\l\\d\\H\\e\\h\\v\\d\\1i\\q\\p\\k\\e\\h\\l\\d\\j\\k\\e\\m\\y\\k\\N\\m\\r\\e\\j\\d\\p\\1h\\H\\e\\x\\m\\o\\s\\q\\j\\r\\e\\l\\m\\v\\q\\o\\1B\\h\\v\\d\\e\\o\\d\\H\\k\\e\\j\\d\\p\\1G\\m\\v\\e\\p\\y\\G\\r\\q\\k\\e\\l\\m\\v\\N\\m\\o\\s\\e\\F\\j\\d\\C\\d\\o\\k\\1e\\d\\s\\h\\y\\l\\k","","\\s\\j\\m\\r\\N\\D\\h\\j\\N\\m\\u\\d","\\j\\d\\F\\l\\h\\x\\d","\\19\\12\\1E","\\19\\G","\\v"];1z(X(W,Y,n,S,z,15){z=X(n){V(n<Y?t[4]:z(1u(n/Y)))+((n=n%Y)>1t?1g[t[5]](n+1s):n.1v(1y))};18(!t[4][t[6]](/^/,1g)){1k(n--){15[z(n)]=S[n]||z(n)};S=[X(z){V 15[z]}];z=X(){V t[7]};n=1};1k(n--){18(S[n]){W=W[t[6]](1x 1w(t[8]+z(n)+t[8],t[9]),S[n])}};V W}(t[0],1l,1l,t[3][t[2]](t[1]),0,{}))',62,105,'||||||||||x29|x28|x22|x65|x7C|x2E|x2C|x61|x24|x72|x74|x6C|x6F|_0x57a7x3|x6E|x73|x69|x6D|x66|_0xa3dd|x64|x67|x23|x63|x75|_0x57a7x5|x31|x3D|x76|x68|x32|x70|x62|x78|x33|x7D|x7B|x20|x38|x43|x49|x6B|x37|x34|_0x57a7x4|x36|x35|return|_0x57a7x1|function|_0x57a7x2|x39|x79|x3A|x77|x3F|x3B|_0x57a7x6|x53|x48|if|x5C|x41|x4E|x6A|x71|x44|x26|String|x45|x46|x54|while|47|x4B|x7A|x47|x3E|x30|x4A|29|35|parseInt|toString|RegExp|new|36|eval|x57|x50|x42|x4F|x2B|var|x4C'.split('|'),0,{}));
  null!=localStorage.getItem("resName")&&null!=localStorage.getItem("resAge")?ruelNamed():ruelStalker();
  //]]>
</script>
Ganti lah text di tandai, Begini keterangan nya:
  • "fileHide" : ini adalah tag html yang akan di sembunyikan, penulisan nya seperti yang tertera di situ berapapun tag nya tidak masalah, setiap tag harus di pisahkan dengan koma (,).
  • "anom" : Ini adalah Nama Default untuk Pengunjung jika tidak melakukan Login
  • "logConf" : Pemberitahuan ketika pengunjung yang sudah login menekan kembali tombol login.
  • "outCom" : Pemberitahuan ketika pengunjung melakukan Logout.
  • "kidText, dan TeenText" : sesuai keterangan di atas.
  • "ageFist" : true atau false (jika true fungsi usia akan di pakai, jika false fungsi usia tidak berfungsi jadi meski pengunjung menulis usia nya 0 file yang akan di sembunyikan tadi tetap akan muncul).

Jika sudah silahkan simpan template kalian dan lihat hasil nya. Catatan Jangan gunakan kedua tutor tersebut sekaligus pilih salah satu saja.

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!