Tiện ích Đăng ký nhận bài viết qua E-mail trên blog bạn trông pro hơn

Bạn muốn có 1 Widget trên Blog để người đọc không cần vào blog bạn xem hôm nay có gì mới mà thông qua Email của người đọc khi đã đăng ký. Hoặc liên kết xem trên mạng xã hội như Facebook, Twitter,...các tin RSS của bạn, các Widget cổ điển đa phần có hỗ trợ nhưng không đẹp cho lắm.

Để làm Widget Đăng ký nhận bài viết qua E-mail kèm theo các liên kết đến trang mạng xã hội và làm cho blog bạn đẹp hơn, các bạn làm theo hướng dẫn sau:

Bước 1: Đăng nhập Blog  > Thiết kế (Design) > Phần tử trang (Page Elements).

Bước 2: Chọn một Widget (nhúng HTML / JavaScript) , sau đó sao chép và dán đoạn mã dưới đây vào Widget vừa mới tạo, di chuyển Widget đến nơi mà bạn muốn Tiện ích Đăng ký nhận bài viết qua E-mail hiển thị, (hoặc sao chép và dán vào Widget đã tạo sẵn trên blog nếu có):
 <style> .mbtbar{width: 100%; float: left;} .mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 287; padding: 0 10px 0 4px;} .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;} .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 287px; font-family: Helvetica, Arial; font-size: 14px;} .mbtbar .subicons a{text-decoration: none; color:#333333;} .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;} .mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV2bAJ1cSUJ2W_5lX_tW6Rh8M0uWQgwftY8jwquu4AMUwpmH_QUCacbBTUZx3MMtJ8F3Y67gQ2eAUqBVbywGf0z_abnQ_Ovx8gzMuZycxK_Ld-vVX5n1sdiiMX5bRgZHkMbo2gZrMNmcWv/s1600/rssfeed.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheX_elzTcBWlyfHvVBr7sJktI08as0DyDUyVWipGBI_7uHu_vL3xtKxq-Xg_GsQTwRSenhyphenhyphen_41amMzCW79HBYcEVCsBki-YzRNmorsV0nGJfje02cn0pYAT2C7HfFVVYhZvynqi6jDAvGC/s1600/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkPBM8Ang2THbb83oHXnPjWZD4BXORqB_mn5O1ryp0uUqy9W__wrFBvWxAi0ZjF5J4p2HFjXAth3kpl-FmnRrVYGYfeJ6u2ntHRkU5JNhCzkQ_wiHBtQgbco0CN54TWGzLEIhWLsTsMQqJ/s1600/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;} .mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;} .mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_RPtMTqgZGCTqs1RUUTQG__tO6YNI0lclikBTkEL3V5pUkFHMX8WSpxQpTLnbJzmIdlyC13ioPcIjOkzSHmylRP1FFlJqe53Kwbswkjml9l71WAl8tv4Rlbnn_gye65tH5e0sH9mSUMh6/s1600/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; } .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 286px; float: left;} .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 195px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;cursor:pointer;} </style> <!--[if IE 7]> <style> .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; } .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; } </style> <![endif]--> <div class="mbtbar"> <div class="count"> Get free<span class="bigcount"> LICENSE KEY </span> daily</div> <div class="subicons"> <div class="rssicon"> <a href="http://vnbacklink.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div> <div class="fbicon"> <a href="http://www.facebook.com/nguyenphamhoa" target="_blank" rel="nofollow">Facebook</a></div> <div class="twittericon"> <a href="http://twitter.com/nguyenphamhoa" target="_blank" rel="nofollow">Twitter</a></div> </div> <div class="emailsub"> <div class="emailicon"> Nowaday Readers total <a href="http://feeds.feedburner.com/blogspot/JjVpD" target="_blank"><img src="http://feeds.feedburner.com/~fc/blogspot/JjVpD?bg=191919&fg=ffffff&anim=1&label=listeners" height="22" width="90" style="border:0" alt="" /></a> </div> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jjvpd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="7" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="blogspot/JjVpD" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form> </div> </div> </div>

Trong đó: Các mã số Hex, Color màu sắc, kích thước Height, Width... đường dẫn Facebook, Twitter, RSS, Feed đăng ký nhận bài viết các bạn có thể tùy chỉnh lại cho phù hợp với blog bạn. Sau đó Lưu lại và xem thành quả. Như vậy bạn đã có Tiện ích Đăng ký nhận bài viết qua E-mail cho blog trông đẹp mắt hơn trước đó.

Please share it! :(