Erhay - Trang thông tin hay và hữu ích: Blogger - Đưa Form liên hệ vào lightbox với fancybox

Blogger - Đưa Form liên hệ vào lightbox với fancybox

Trong hướng dẫn trước tôi đã hướng dẫn bạn cách đưa một iframe vào lightbox với fancybox. Trong hướng dẫn này tôi sẽ giới thiệu với bạn cách đưa một phần tử div xuất hiện trong lightbox với fancybox.

Và ứng dụng của nó với blogger ở đây là đưa Form liên hệ vào trong lightbox với fancybox.

Form liên hệ mới được blogger đưa vào chưa lâu. Tính năng này cũng khá hay. Bạn không cần phải sử dụng form của bên thứ 3 nữa. Khi một ai đó gửi mail là bạn hoàn toàn có thể nhận được mail trong hòm thư của mình ngay lập tức.

Xem Demo (click vào liên hệ)

Cách áp dụng vào web blog của bạn form liên hệ này :

Bước 1: Thêm trước </head> toàn bộ code sau :

<style type="text/css">

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */

.fancybox-wrap,

.fancybox-skin,

.fancybox-outer,

.fancybox-inner,

.fancybox-image,

.fancybox-wrap iframe,

.fancybox-wrap object,

.fancybox-nav,

.fancybox-nav span,

.fancybox-tmp

{

padding: 0;

margin: 0;

border: 0;

outline: none;

vertical-align: top;

}

.fancybox-wrap {

position: absolute;

top: 0;

left: 0;

z-index: 8020;

}

.fancybox-skin {

position: relative;

background: #f9f9f9;

color: #444;

text-shadow: none;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

.fancybox-opened {

z-index: 8030;

}

.fancybox-opened .fancybox-skin {

-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

}

.fancybox-outer, .fancybox-inner {

position: relative;

}

.fancybox-inner {

overflow: hidden;

}

.fancybox-type-iframe .fancybox-inner {

-webkit-overflow-scrolling: touch;

}

.fancybox-error {

color: #444;

font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;

margin: 0;

padding: 15px;

white-space: nowrap;

}

.fancybox-image, .fancybox-iframe {

display: block;

width: 100%;

height: 100%;

}

.fancybox-image {

max-width: 100%;

max-height: 100%;

}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {

background-image: url('fancybox_sprite.png');

}

#fancybox-loading {

position: fixed;

top: 50%;

left: 50%;

margin-top: -22px;

margin-left: -22px;

background-position: 0 -108px;

opacity: 0.8;

cursor: pointer;

z-index: 8060;

}

#fancybox-loading div {

width: 44px;

height: 44px;

background: url('fancybox_loading.gif') center center no-repeat;

}

.fancybox-close {

position: absolute;

top: -18px;

right: -18px;

width: 36px;

height: 36px;

cursor: pointer;

z-index: 8040;

}

.fancybox-nav {

position: absolute;

top: 0;

width: 40%;

height: 100%;

cursor: pointer;

text-decoration: none;

background: transparent url('blank.gif'); /* helps IE */

-webkit-tap-highlight-color: rgba(0,0,0,0);

z-index: 8040;

}

.fancybox-prev {

left: 0;

}

.fancybox-next {

right: 0;

}

.fancybox-nav span {

position: absolute;

top: 50%;

width: 36px;

height: 34px;

margin-top: -18px;

cursor: pointer;

z-index: 8040;

visibility: hidden;

}

.fancybox-prev span {

left: 10px;

background-position: 0 -36px;

}

.fancybox-next span {

right: 10px;

background-position: 0 -72px;

}

.fancybox-nav:hover span {

visibility: visible;

}

.fancybox-tmp {

position: absolute;

top: -99999px;

left: -99999px;

visibility: hidden;

max-width: 99999px;

max-height: 99999px;

overflow: visible !important;

}

/* Overlay helper */

.fancybox-lock {

overflow: hidden !important;

width: auto;

}

.fancybox-lock body {

overflow: hidden !important;

}

.fancybox-lock-test {

overflow-y: hidden !important;

}

.fancybox-overlay {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

display: none;

z-index: 8010;

background: url('fancybox_overlay.png');

}

.fancybox-overlay-fixed {

position: fixed;

bottom: 0;

right: 0;

}

.fancybox-lock .fancybox-overlay {

overflow: auto;

overflow-y: scroll;

}

/* Title helper */

.fancybox-title {

visibility: hidden;

font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;

position: relative;

text-shadow: none;

z-index: 8050;

}

.fancybox-opened .fancybox-title {

visibility: visible;

}

.fancybox-title-float-wrap {

position: absolute;

bottom: 0;

right: 50%;

margin-bottom: -35px;

z-index: 8050;

text-align: center;

}

.fancybox-title-float-wrap .child {

display: inline-block;

margin-right: -100%;

padding: 2px 20px;

background: transparent; /* Fallback for web browsers that doesn't support RGBa */

background: rgba(0, 0, 0, 0.8);

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

text-shadow: 0 1px 2px #222;

color: #FFF;

font-weight: bold;

line-height: 24px;

white-space: nowrap;

}

.fancybox-title-outside-wrap {

position: relative;

margin-top: 10px;

color: #fff;

}

.fancybox-title-inside-wrap {

padding-top: 10px;

}

.fancybox-title-over-wrap {

position: absolute;

bottom: 0;

left: 0;

color: #fff;

padding: 10px;

background: #000;

background: rgba(0, 0, 0, .8);

}

/*Retina graphics!*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

only screen and (min--moz-device-pixel-ratio: 1.5),

only screen and (min-device-pixel-ratio: 1.5){

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {

background-image: url('fancybox_sprite@2x.png');

background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/

}

#fancybox-loading div {

background-image: url('fancybox_loading@2x.gif');

background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/

}

}

</style>

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>

<script type="text/javascript">

$(".fancybox").fancybox({

openEffect : 'none',

closeEffect : 'none',

overlayOpacity: 0.4,

helpers : {

overlay : {

opacity : 0.4,

css : {

'background' : 'rgba(0, 0, 0, 0.3)',

}

}

}

}

);

</script>

Bước 2 : Thêm trong <body> code sau :

<div id='erhaydiv' style='display:none;width:300px;'>

<b:section class='sidebar12' id='section22' preferred='yes'>

<b:widget id='ContactForm1' locked='false' title='Liên hệ' type='ContactForm'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='contact-form-widget'>

<div class='form'>

<form name='contact-form'>

<p/>

Họ và tên của bạn :

<br/>

<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>

<p/>

<span style='font-weight: bolder;'>Địa chỉ Email của bạn : *</span>

<br/>

<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>

<p/>

<span style='font-weight: bolder;'>Gửi nhận xét : *</span>

<br/>

<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>

<p/>

<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>

<p/>

<div style='text-align: center; max-width: 222px; width: 100%'>

<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>

<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>

</div>

</form>

</div>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

Bước 3: Vị trí đặt button liên hệ để mở form.

<a href="#erhaydiv" id="myDiv" class="fancybox">Liên hệ</a>

Ok. Vậy là đã xong rồi đó. Chúc bạn thực hiện thành công các thao tác trong hướng dẫn này.

M.Anh - Vui lòng ghi rõ nguồn Erhay khi bạn phát hành lại thông tin từ trang này.

Anonymous6/25/13, 12:36 PM
Ad ơi. e áp dụng rồi mà sao ko chạy gì cả.hix
hello7/5/13, 6:48 AM
Không thành công
Anonymous7/16/13, 8:38 AM
Trang này có nút gửi nhận xét hay ghê.
hello7/22/13, 12:05 PM
Không biết là liên hệ nó gửi đi đâu luôn Minh Anh
hello7/23/13, 3:02 PM
Có cách nào nó vào thẳng @blogger không Minh Anh?

- Rất vui khi được mọi người nhận xét, đóng góp ý kiến để bài viết chất lượng hơn.
- Các ý kiến mang nội dung xấu, tính chất spam, chia rẽ, vi phạm sẽ bị xóa mà không nhắc nhở.
- Comment và share bài viết nếu bạn cảm thấy hay và thú vị.
- Không quên ghi lại nguồn erhay khi bạn phát hành lại thông tin từ trang này.

Blogger - Đưa Form liên hệ vào lightbox với fancybox

Blogger - Đưa Form liên hệ vào lightbox với fancybox

Bước 1: Thêm trước </head> toàn bộ code sau :

Bước 2 : Thêm trong <body> code sau :

Bước 3: Vị trí đặt button liên hệ để mở form.

Popular Posts

Fanpage

Erhay - Trang thông tin hay và hữu ích

Flickr

Labels

Nhận xét mới

Bài viết mới