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..
0 Komentar untuk "Responsive Jquery Modal Box"