» » » Tiện ích Popup đăng ký Email cho Blogger sử dụng Jquery

VIEW:


BÀI LIÊN QUAN

Tiện ích đăng ký Email đối với blogger là một tiện ích blogger sử dụng jquery . Trong tiện ích này các mẫu được tạo ra bởi css3 với tính năng tự động kiểm tra và các cửa sổ pop up được tạo ra sử dụng jQuery. Chúng tôi hy vọng hình thức này sẽ giúp bạn tăng người đọc blog của bạn. Tiện ích này sẽ giúp đẩy hộp thoại đăng kí email dạng popup cho blog chuẩn nhanh gọn chỉ hiện 1 lần duy nhất tránh các rắc rối kiến độc giả bỏ website của bạn.


Bắt đầu thôi!!

Bước 1: Bạn thêm thư viện jQuery vào blogger bằng cách chèn thêm đoạn code sau vào sau thẻ <head>, lưu ý nếu blog bạn đã có thư viện jQuery thì có thể bỏ qua bước này.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Bước 2: Bạn vào bố cục, thêm tiện ích HTML/JavaScrip dán đoạn code sau vào đó và lưu lại
thangbme.com 
<style type="text/css">

#subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }

#subscribe-widget { display:none; }

/* Overlay */

#btnt-overlay { background-color:#000; }

/* Container */

#btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }

#btnt-container .btnt-data { padding:8px; }

#btnt-container a.btntCloseImg { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6_5dW_qucgpiOAIViYbDpc1KZZVyDlvkl0jgDO-QEIr12iYkNEf_Af-NzLYpvIaqmRURPKQpRyohJ4QTVBl79z9bN4VqISSnfvclo3AHsyw9Tbdc1TOebYEA82LPawkCjAn6Gatr-Mb2v/s1600/close.PNG) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }

#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }

#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }

#btntfollowForm { padding: 15px; }

#btntfollowForm p { margin: 0 0 10px; }

#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }

#btntfollowForm input:not([type="checkbox"]):active,

#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }

#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif;   font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }

#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }

#btntfollowForm .button input:active,

#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }

.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }

.btntFollowFooter a { color: #222; text-decoration: none; }

.btntFollowFooter a:hover { color: #fff; }

<!--[if lt IE 7]>

#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6_5dW_qucgpiOAIViYbDpc1KZZVyDlvkl0jgDO-QEIr12iYkNEf_Af-NzLYpvIaqmRURPKQpRyohJ4QTVBl79z9bN4VqISSnfvclo3AHsyw9Tbdc1TOebYEA82LPawkCjAn6Gatr-Mb2v/s1600/close.PNG',sizingMethod='scale'); }

#btntfollowForm  input{ padding: 10px 5px 10px 32px; width: 93%; }

#btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0; }

<![endif]-->

</style>

<div id="subscribe-button">

<a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirJu6DON31hfLaheCz9N67R68U3JTwhECiWdwSf3NQfIRF_rEU1vaTqxOW23Xwal75GHvh6Lar_hUWHn2Ogi-J16WFb2Es642Cah6bDjtz06eP9l4IUA20LIKZGiCwqosCKuhQLsqtgee9/s1600/trigger-mail-icon.png" alt="subscribe" /></a></div>

<div id="subscribe-widget">

<div id="btntfollowForm">

<img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_uO6GvYRMYI45KLMplzbPtvUkY-a8zLPW7rZqFA-bofmFhoi9npdw5BKEdDg77SBPlXcKCAPNEBL0V3xznfrwIMvuEX_3W4a2xcNjfLTuGe9gNJdoeP87J7B5LjsoSuXQYBg1q99MXNA/s1600/Subscribe+Via+Email.PNG" />

<div id='description'>

<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rMYXIAJbnJLJe-bX0D6OPAZiNzsyiZa92l7fo1abTfzkz2rcEsy4raqE2kfwYPjxU4kpx2W_FeKZj_sH9PVolrbqktyro_FanQK3b1QiuyeNW0Nv1s3w346QQodSQqg8e4m0u08A7G_F/s1600/Mail.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=topviet247', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="topviet247" /><input name="loc" type="hidden" value="en_US" />

<div class="button">

<input type="submit" value="Subscribe" /></div>

</form>

</div>

<div class="btntFollowFooter">

Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.blogtipsntricks.com/" rel="dofollow" target="_blank">blogtipsntricks</a></div>

</div>

<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">

</script>

<script type="text/javascript">

jQuery(function ($) {

    // Load dialog on page load

    //$('#subscribe-widget').modal();



    // Load dialog on click

    $('#subscribe-button .subscribe').click(function (e) {

        $('#subscribe-widget').modal();



        return false;

    });

});

</script>
Lưu ý: thay topviet247 thành tên blogger của bạn đã đăng kí với FeedBurner
Chúc các bạn thành công, nếu có thắc mắc hãy để lại comment cho tôi


0 nhận xét Blogger 0

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)
 
ThangShare © 2016. All Rights Reserved. Design by: Thắng BME - Sitemap
Top