Thêm nút Đăng ký ở bên phải của Biểu trưng

Thêm nút “Đăng ký” ở bên phải của biểu trưng và mở đăng ký MailChimp trên cửa sổ bật lên hộp đèn.

Xem Setps

Đầu tiên hãy cài đặt plugin Easy Fancybox và thiết lập plugin như sau:

Tiếp theo vào trang Widget (Appearance → widget) và đặt Text Widget vào Header Right Widget Area. Thêm mã sau vào hộp văn bản và tạo nút “ĐĂNG KÝ”:

[code lang=”HTML”]
<a href="#mc_embed_signup" class="fancybox-inline">
<span class="btn-subscribe">SUBSCRIBE</span>
<span class="dashicons dashicons-arrow-right-alt2"></span>
</a>

Để có thiết kế đẹp hơn Bạn có thể thêm CSS sau vào tệp style.css của mình

[code lang=”CSS”]
a.fancybox-inline{
background: #f4603d;
color: #FFF;
display: inline-block
}

a.fancybox-inline:hover{ background: #11bf0d; }
a.fancybox-inline:hover .btn-subscribe{ border-color: #0cb008 }
a.fancybox-inline:hover span.dashicons { border-color: #22c61e }
.btn-subscribe {
border-right: 1px solid #e54e2b;
display: inline-block;
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
padding: 8px 19px 8px 24px;
}

a span.dashicons{
border-left: 1px solid #ff7350;
display: block;
float: right;
height: auto;
line-height: 23px;
margin: 0 25px 0 0;
padding: 14px 0 11px 13px;
}

Nút sẽ nhìn theo hướng này

Nếu bạn kiểm tra mã thì bạn sẽ thấy rằng tôi đã thêm lớp “ưa thích nội tuyến” và liên kết với thẻ HASH “#mc_embed_signup” (Để làm cho nội dung nội tuyến mở trong một lớp phủ, hãy bọc nội dung đó trong một div với một ID duy nhất, hãy tạo một liên kết với đích “#uniqueID” và cung cấp cho nó thuộc tính lớp “ưa thích hộp-inline”).

Bây giờ đăng nhập vào tài khoản Mailchimp và tạo danh sách. Sau đó nhấp vào liên kết Biểu mẫu đăng ký, đi tới trang “Nhúng biểu mẫu” và thiết lập Biểu mẫu đăng ký. Do đó, đã sao chép mã của biểu mẫu Đăng ký Mailchimp và dán nó vào bên trong div “hộp thư được ẩn”.

Mã sẽ đến như thế này:

[code lang=”HTML”]
<div class="fancybox-hidden">

<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">

<div id="mc_embed_signup" style="width: 560px;">
<form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style="position: absolute; left: -5000px;"><input type="text" name="b_35247fc5c39addf61e1a4fa1d_af01db35ed" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[2]=’LNAME’;ftypes[2]=’text’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>

</div>

Thêm mã trên ngay bên dưới thẻ đóng “A”.

Tất cả các thiết lập đã được thực hiện. Bây giờ hãy làm mới trang chủ của bạn và nhấp vào nút “Đăng ký”. Biểu mẫu đăng ký của bạn sẽ bật lên với hiệu ứng lạ mắt. Mong rằng đây không phải là một ý tưởng tồi và bạn sẽ thích nó.

Thận trọng: Không sử dụng mã Mailchimp demo này. Đây là mã của Biểu mẫu đăng ký của tôi. Bạn sẽ thêm mã của mình.