Dialox box jika diartikan dalam bahasa indonesia berarti kotak dialog.
Teknik ini merupakan salah satu teknik dari JQuery UI yang sering sekali
digunakan dalam pembuatan website. Dialox Box dapat digunakan untuk
bermacam-macam hal, sesuai kebutuhan yang ada pada website. Misalnya
untuk menampilkan iklan ketika tombol diklik, menampilkan pesan atau
informasi penting pada website ketika tombol dklik, bahkan dapat
digunakan untuk pengisian formulir pendaftaran atau komentar ketika
tombol dklik. Selain tampilannya menarik, teknik ini juga dapat
bermanfaat untuk menghemat ruang pada website.
Langkah pertama
- Login Ke Blogger.com pakai akun sobat.
- Edit template. (Backup dulu apabila terjadi kesalahan)
- Cari tag
]]></b:skin>
atau </style>
gunakan CTRL + F untuk mempermudah pencarian kemudian sisipkan CSS berikut ini..
- html.remodal_lock, body.remodal_lock {
- overflow : hidden;
- }
- .remodal, [data-remodal-id] {
- visibility : hidden;
- }
- .remodal-overlay {
- position : fixed;
- top : 0;
- left : 0;
- right : 0;
- bottom : 0;
- z-index : 10000;
- display : none;
- overflow : auto;
- text-align : center;
- }
- .remodal-overlay:after {
- display : inline-block;
- height : 100%;
- margin-left : -0.05em;
- content : '';
- }
- .remodal {
- position : relative;
- display : inline-block;
- }
- .remodal-bg {
- transition : filter 0.2s linear;
- }
- .remodal-overlay {
- opacity : 0;
- background : rgba(33, 36, 46, 0.95);
- transition : opacity 0.2s linear;
- }
- body.remodal_active .remodal-overlay {
- opacity : 1;
- }
- .remodal {
- width : 100%;
- min-height : 100%;
- padding : 35px;
- box-sizing : border-box;
- font-size : 16px;
- background : #f4f4f4;
- background-clip : padding-box;
- color : #182a3c;
- box-shadow : 0 0 8px #171a24;
- transform : scale(0.95);
- transition : transform 0.2s linear;
- }
- body.remodal_active .remodal {
- transform : scale(1);
- }
- .remodal, .remodal-overlay:after {
- vertical-align : middle;
- }
- .remodal-close {
- position : absolute;
- top : 5px;
- left : 5px;
- width : 28px;
- height : 28px;
- text-decoration : none;
- border-radius : 50%;
- border : #3e5368 solid 2px;
- transition : background 0.2s linear;
- }
- .remodal-close:after {
- display : block;
- font-size : 28px;
- font-family : Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif !important ;
- content : "X";
- line-height : 28px;
- cursor : pointer;
- text-decoration : none;
- color : #3e5368;
- transition : all 0.2s linear;
- }
- .remodal-close:hover, .remodal-close:active {
- background : #3e5368;
- }
- .remodal-close:hover.remodal-close:after, .remodal-close:active.remodal-close:after {
- color : #f4f4f4;
- }
- .remodal-confirm, .remodal-cancel {
- display : inline-block;
- width : 120px;
- padding : 9px 0;
- margin : 0 0 5px 0;
- font-size : 10pt;
- cursor : pointer;
- text-decoration : none;
- text-align : center;
- border-radius : 50px;
- background-clip : padding-box;
- transition : all 0.2s linear;
- }
- .remodal-confirm {
- border : #16a085 solid 2px;
- background : #f4f4f4;
- color : #16a085;
- }
- .remodal-confirm:hover, .remodal-confirm:active {
- background : #16a085;
- color : #f4f4f4;
- }
- .remodal-cancel {
- border : #c0392b solid 2px;
- background : #f4f4f4;
- color : #c0392b;
- }
- .remodal-cancel:hover, .remodal-cancel:active {
- background : #c0392b;
- color : #f4f4f4;
- }
- @media only screen and (min-width:40.063em) {
- .remodal {
- max-width : 700px;
- margin : 20px auto;
- min-height : 0;
- border-radius : 6px;
- }
- }
- .show_button {
- font-family : 'Lobster', cursive;
- font-size : 48px;
- display : inline-block;
- width : 150px;
- height : 150px;
- text-align : center;
- text-decoration : none;
- line-height : 142px;
- color : #ecf0f1;
- border-radius : 50%;
- background : #c0392b;
- transition : background 0.3s ease-out;
- }
- .show_button:hover, .show_button:active {
- background : #e74c3c;
- }
Langkah Kedua
- Cari tag
</body>
gunakan CTRL + F untuk mempermudah pencarian kemudian tambahkan Javascript berikut ini..
- <script type='text/javascript'>
- ! function(a) {
- "use strict";
-
- function b(b, e) {
- this.settings = a.extend({}, d, e), this.modal = b, this.buildDOM(), this.addEventListeners(), this.index = a[c].lookup.push(this) - 1, this.busy = !1
- }
- var c = "remodal",
- d = {
- hashTracking: !0,
- closeOnConfirm: !0,
- closeOnCancel: !0
- };
- a[c] = {
- lookup: []
- };
- var e, f, g = function(a) {
- var b = a.css("transition-duration") || a.css("-webkit-transition-duration") || a.css("-moz-transition-duration") || a.css("-o-transition-duration") || a.css("-ms-transition-duration") || 0,
- c = a.css("transition-delay") || a.css("-webkit-transition-delay") || a.css("-moz-transition-delay") || a.css("-o-transition-delay") || a.css("-ms-transition-delay") || 0;
- return 1e3 * (parseFloat(b) + parseFloat(c))
- },
- h = function() {
- if (a(document.body).height() <= a(window).height()) return 0;
- var b = document.createElement("div");
- b.style.visibility = "hidden", b.style.width = "100px", document.body.appendChild(b);
- var c = b.offsetWidth;
- b.style.overflow = "scroll";
- var d = document.createElement("div");
- d.style.width = "100%", b.appendChild(d);
- var e = d.offsetWidth;
- return b.parentNode.removeChild(b), c - e
- },
- i = function() {
- a(document.body).css("padding-right", "+=" + h()), a("html, body").addClass(c + "_lock")
- },
- j = function() {
- a(document.body).css("padding-right", "-=" + h()), a("html, body").removeClass(c + "_lock")
- },
- k = function(a) {
- var b, c, d = {};
- b = a.replace(/\s*:\s*/g, ":").replace(/\s*,\s*/g, ","), c = b.split(",");
- var e, f, g;
- for (e = 0, f = c.length; f > e; e++) c[e] = c[e].split(":"), g = c[e][1], ("string" == typeof g || g instanceof String) && (g = "true" === g || ("false" === g ? !1 : g)), ("string" == typeof g || g instanceof String) && (g = isNaN(g) ? g : +g), d[c[e][0]] = g;
- return d
- };
- b.prototype.buildDOM = function() {
- this.body = a(document.body), this.bg = a("." + c + "-bg"), this.modalClose = a("<a href='#'>").addClass(c + "-close"), this.overlay = a("<div>").addClass(c + "-overlay"), this.modal.hasClass(c) || this.modal.addClass(c), this.modal.css("visibility", "visible"), this.modal.append(this.modalClose), this.overlay.append(this.modal), this.body.append(this.overlay), this.confirm = this.modal.find("." + c + "-confirm"), this.cancel = this.modal.find("." + c + "-cancel");
- var b = g(this.overlay),
- d = g(this.modal),
- e = g(this.bg);
- this.td = d > b ? d : b, this.td = e > this.td ? e : this.td
- }, b.prototype.addEventListeners = function() {
- var b = this;
- this.modalClose.bind("click." + c, function(a) {
- a.preventDefault(), b.close()
- }), this.cancel.bind("click." + c, function(a) {
- a.preventDefault(), b.modal.trigger("cancel"), b.settings.closeOnCancel && b.close()
- }), this.confirm.bind("click." + c, function(a) {
- a.preventDefault(), b.modal.trigger("confirm"), b.settings.closeOnConfirm && b.close()
- }), a(document).bind("keyup." + c, function(a) {
- 27 === a.keyCode && b.close()
- }), this.overlay.bind("click." + c, function(d) {
- var e = a(d.target);
- e.hasClass(c + "-overlay") && b.close()
- })
- }, b.prototype.open = function() {
- if (!this.busy) {
- this.busy = !0, this.modal.trigger("open");
- var b = this.modal.attr("data-" + c + "-id");
- b && this.settings.hashTracking && (f = a(window).scrollTop(), location.hash = b), e && e !== this && (e.overlay.hide(), e.body.removeClass(c + "_active")), e = this, i(), this.overlay.show();
- var d = this;
- setTimeout(function() {
- d.body.addClass(c + "_active"), setTimeout(function() {
- d.busy = !1, d.modal.trigger("opened")
- }, d.td + 50)
- }, 25)
- }
- }, b.prototype.close = function() {
- if (!this.busy) {
- this.busy = !0, this.modal.trigger("close"), this.settings.hashTracking && this.modal.attr("data-" + c + "-id") === location.hash.substr(1) && (location.hash = "", a(window).scrollTop(f)), this.body.removeClass(c + "_active");
- var b = this;
- setTimeout(function() {
- b.overlay.hide(), j(), b.busy = !1, b.modal.trigger("closed")
- }, b.td + 50)
- }
- }, a && (a.fn[c] = function(d) {
- var e;
- return this.each(function(f, g) {
- var h = a(g);
- null == h.data(c) && (e = new b(h, d), h.data(c, e.index), e.settings.hashTracking && h.attr("data-" + c + "-id") === location.hash.substr(1) && e.open())
- }), e
- }), a(document).ready(function() {
- a(document).on("click", "[data-" + c + "-target]", function(b) {
- b.preventDefault();
- var d = b.currentTarget,
- e = d.getAttribute("data-" + c + "-target"),
- f = a("[data-" + c + "-id=" + e + "]");
- a[c].lookup[f.data(c)].open()
- }), a(document).find("." + c).each(function(b, d) {
- var e = a(d),
- f = e.data(c + "-options");
- f ? ("string" == typeof f || f instanceof String) && (f = k(f)) : f = {}, e[c](f)
- })
- });
- var l = function(b, d) {
- var f = location.hash.replace("#", "");
- if ("undefined" == typeof d && (d = !0), f) {
- var g;
- try {
- g = a("[data-" + c + "-id=" + f.replace(new RegExp("/", "g"), "\\/") + "]")
- } catch (b) {}
- if (g && g.length) {
- var h = a[c].lookup[g.data(c)];
- h && h.settings.hashTracking && h.open()
- }
- } else d && e && !e.busy && e.settings.hashTracking && e.close()
- };
- a(window).bind("hashchange." + c, l)
- }(window.jQuery || window.Zepto);
- </script>
- Save
template, jika terjadi error silahkan konversikan dulu Javascript di
atas melalui Formulir Konversi Kode di atas Form Komentar Blog ini
Langkah Terkahir
Setelah berhasil "Save
template" silahkan sobat pergi ke Tata letak blogger sobat, Add Gadget -
Javascript/HTML kemudian tambahkan tag HTML di bawah ini..
- <a class="show_button" href="#show">Show</a>
-
- <div class="remodal" data-remodal-id="show">
- <h3>Demo Modal</h3>
- <p>
- Flat, responsive, lightweight, fast, easy customizable modal window jquery plugin
- with declarative state notation and hash tracking.
- </p>
- <a class="remodal-confirm" href="#">OK</a>
- </div>
Semoga bermanfaat..