Tiện ích nhận bài viết qua email chỉ với 1 click hình hòm thư

VIEW:

BÀI LIÊN QUAN

Có rất nhiều tiện đăng ký email Popup cho blogger trên mạng nhằm mục đích tăng số lượt view trang website của bạn và có lượng độc giả nhất định và trung thành. Lý do chính đằng sau thiết kế tiện ích này là hiệu suất. Tất cả các tiện được công bố trước khi sử dụng jquery để chức năng và phải mất rất nhiều thời gian tải và kích thước trang là một kết quả làm giảm hiệu suất. Nhưng các widget tôi xuất bản hiện nay là chỉ dựa trên CSS3 và HTML5 . Vì vậy, nó tải ánh sáng nhanh chóng và sẽ không gây rối với bất kỳ tiện khác.

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

Sẽ hiên một hình tròn nhỏ thông báo xuyên suốt blog để bạn chỉ cần click vào là sẽ đăng kí nhận bài qua email.

Bắt đầu thôi!!

Bước 1: Vào Blogger Tới Mẫu> Chỉnh sửa HTML.

Bước 2: Tìm thẻ  ]]></b:skin> thêm đoạn code sau vào trước thẻ  ]]></b:skin>

thangbme.com

/***** 1 click nhan email *****/
#popup-wrap .popup-button { background: #A1362A url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFI4csDDvgKH845cRoNfZprqvo40NWX4_GJ7Db8mbPgKtNysyPtfbBjBephAIc0RuoEqwS9KB9fIxeB0R-jugIDw2JzIcdUUexUxj0FkgHZAWpid4ZZkSSMuAuA2EUNlij9L7gdtM13ff/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 54px; left: 25px; position: fixed; width: 54px; z-index: 99999; }
#popup-wrap .popup-button:hover { background-color: #70261D; }

#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }

#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox, 
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }

#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

Bước 3: Tìm tới thẻ  </body>  thêm đoạn code sau vào trước thẻ </body>
  

thangbme.com

 <div id="popup-wrap">
  <!-- Subscribe Trigger -->
       <label class='popup-button' for='popup-trigger'></label>

  <!-- Subscribe Content -->
  <input class='popup-trigger' id='popup-trigger' type='checkbox'/>
  <div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'></label>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'></label>
                <div class='popup-inner'>
                    <!-- Opt-In Subscribe -->
                    <span class="popup-title">Subscribe Via Email</span>
                    <span class="popup-content">Subscribe to our newsletter to get the latest updates to your inbox. ;-)</span>
                    <br/><br/>
                    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR_SUBSCRIBE_ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='YOUR_SUBSCRIBE_ID'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your email...'/>
                        <input id='subbutton' title='' type='submit' value='Sign up'/>
                    </form>
                    <br />
                    <span class="popup-footer">Your email address is safe with us!</span>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

Lưu ý: thay tên YOUR_SUBSCRIBE_ID thành tên blog bạn đăng kí với FeedBurner
Bước 4: Lưu mẫu và thưởng thức kết quả.

Chúc các bạn thành công, nếu có gì thắc mắc hãy để lại comment bên dưới cho tôi