Thêm khung nhận thông báo qua email dưới bài viết

Nếu bạn là một người hay vào Blog mình thì các bạn đã biết tuần trước mình đã chia sẻ một template khá đẹp và chuẩn Seo cho Blogspot tin tức. Nếu bạn đã xem demo trong bài đăng của template đó ở cuối bài sẽ có 1 khung theo dõi qua email khá đẹp.

Vì khá đẹp nên mình đã lấy về cho Blog Văn Thắng. Nhưng hôm nay mình sẽ hướng dẫn cho tất cả các bạn có khung theo dõi này.

* Thêm CSS - Tìm ]]>< và thêm đoạn code dưới trên nó:

.subscribe-widget{background:#222;color:#fff;position:relative;overflow:hidden;border:1px solid #eee;text-align:center;margin:25px 0;padding:25px 0;padding:25px}.form-promo i{font-size:40px;margin-bottom:5px}.form-promo h3{text-transform:uppercase;margin:0}.form-promo h4{font-weight:400;font-size:17px;margin:0 0 15px}.form-promo h3{font-size:14px}input.email-field{font:normal normal 14px Prompt,sans-serif;display:inline-block;width:50%;color:#ccc;background:none!important;border:1px solid #f5f5f5!important;text-indent:20px;outline:none!important;height:50px;padding:10px 0!important}input.email-button{font:normal normal 14px Prompt,sans-serif;font-weight:500;height:50px;cursor:pointer;border:1px solid #02b95c;background:#02b95c;outline:none;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;padding:0 15px}

* Tiếp theo để hiện khung cái bạn thêm đoạn HTML dưới vào nơi bạn muốn hiện:

<div class='subscribe-widget' id='subwid'>
<div class='form-promo'>
<i class='fa fa-envelope'></i>
<h3>Nhận tin tức từ Văn Thắng Blog ?</h3>
<h4>Hãy đăng kí để nhận những tin tức mới nhất</h4>
</div>
<div class='tl-rssform'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=vanthangit/PQTX&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input class='email-field' name='email' placeholder='Nhập email của bạn tại đây ...' type='text'/>
<input name='uri' type='hidden' value='vanthangit/PQTX'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='email-button' type='submit' value='Nhận ngay'/>
</form>
</div>
<div class='form-policy'><p><span></span>Blog Chia Sẽ Thủ Thuật Blog - Facebook - Photoshop</p></div>
</div>

Các bạn chỉnh lại các thông tin tô đậm màu xanh thành thông tin của Blog mình nhé. Tùy vào mỗi template nên mình không thể đưa vị trí chính xác để hiễn thị vì thế nếu bạn có thắc mắc gì thì liên hệ với Facebook mình sẽ giúp. 

Nhớ Share là Like để giúp Blog nhé !