Chỉ cần chèn đoạn mã sau đây vào HTML của web hoặc vào một Widget HTML/Javascript
Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.
Code theo phong cách 1:
<center> <style> a.social-icons {margin-right:5px; height:40px; width:40px;} a.social-icons:hover {opacity: .7;filter:alpha(opacity=70); } #ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9; background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 25px 15px !important; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#ig-subscription-optin input.name { background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;} #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oTVDXQDrcC66IH_UgQzqC_xjYzMDlRWxtjaysiJbfwUI7hyphenhyphen2FcKcxyDwCfW9nDdvyFz2ykPZS0M2XReg8Rfrm9kCutmrQfnjhNTSpZfOOancCDOZw6MbUciDpvK8ZycPASkbrerZA4fK/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpV6OuItDb9-JmxgXNvzlFPo8h95k4xVnzgeLGaaYWlWoLs5-U4t0P8nJSk7qQW59qbUM4iOYLVVC055UychDE30h40-Hg0b1XdQbOnEKgK1KS7iPJDZnFgnzOJgSj1Pqb1KjWGqbOWD6/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style> <div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 265px;"> <h3 id="bloggertrix1-title-text" style="color: white; font-size: 20px;"> NHẬN TÀI LIỆU MỚI NHẤT QUA EMAIL</h3> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <a class="social-icons" href="https://facebook.com/123tailieufree" target="_blank"><img src="http://pik.vn/2015c842ca4c-38dc-4530-9202-862d8c82e478.png" /></a> <a class="social-icons" href="https://twitter.com/quangmen93" target="_blank"><img src="http://pik.vn/20157e51d422-0232-455d-a398-b585ec1f1be4.png" /></a> <a class="social-icons" href="https://plus.google.com/115926576244009409448" target="_blank"><img src="http://pik.vn/2015f6d78e16-945f-484b-a1fa-c20ded54c416.png" /></a> <a class="social-icons" href="http://feeds.feedburner.com/123tailieufree/CCGm" target="_blank"><img src="http://pik.vn/201556e459bd-bb76-44a1-b09c-36db0b92987e.png" /></a> <input class="email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="123tailieufree/CCGm" /><input name="loc" type="hidden" value="en_US" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Đăng ký ngay hôm nay!" /></form> </div></center>
<style> #btrix-newsletter{ width:290px;background:#2e3639; color:#fff; padding:20px; font-size:14px; margin-bottom:20px; -moz-box-shadow: 2px 2px 2px #000000;-webkit-box-shadow: 5px 5px 5px #000000;box-shadow: 5px 5px 5px #000000;border:double 5px #000000; -moz-border-radius-topleft: 5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;} #btrix-newsletter .btrix-title { margin-bottom:10px;margin-top:-10px; } .btrix-title{margin-left: 8px;font-size:25px; font-weight:bold; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:1px 8px 2px 8px;text-align:center;border:1px solid #151819;color:#fff;background:#222729;display:inline-block;} #footer-subscribe-btn {width:116px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; position:relative;left:135px;} .footer-submit-btn {margin-left:50px;margin-top:-5px;margin-bottom:-50px;border: none;color: #fff;text-transform: uppercase; font-size: 13px;padding: 5px 18px 5px;background: #e93a30;border-radius: 30px;-webkit-border-radius: 30px; -moz-border-radius: 30px;font-weight: bold;-webkit-transition: background .2s linear; -moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition: background .2s linear;transition: background .2s linear;cursor: pointer; } .footer-submit-btn:hover { background:#e51111;} #fastsearch ,#footer-subscribe-email{background:#62686b;color:#fff;font-size:14px;border:none; box-sizing:border-box;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;outline:none;padding:0px 15px; height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} #fastsearch.inactive , #footer-subscribe-email.inactive {color:#b5b7b8;} #footer-subscribe-email {width:100%;} #sb-nl-members-count { font-size:12px; font-weight:bold;text-align:center;width:150px;margin:0 0 -36px 0 ;display:inline-block; </style> <br /> <div id="btrix-newsletter"> <div class="btrix-title"> Get Email Updates</div> <div class="btrix-nl-text"> <center> Subscribe to Get Latest Updates Free</center> </div> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="inactive footer-text-field" id="footer-subscribe-email" name="EMAIL" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Your email address" /> <input name="uri" type="hidden" value="YOUR FEEDBURNER ID" /> <input name="loc" type="hidden" value="en_US" /> <br /> <div id="sb-nl-members-count"> <table border="0"> <tbody> <tr> <td style="padding-right: 4px;"><a href="http://twitter.com/YOUR TWITTER USER NAME" target="_blank" title="Follow Me On Twitter"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNcV_3rqOk14G2dP0uaKyyig50I5ydc7uHVFxKOQOKCtxII2TpQYZKZhIGo7gjbn4OQHgesrxQNIrkC-cqt8Q2DiQJueuPxfBLBk8BtXC0_GW1LecW5nyzzC-Vk7KK30aBVlZXXShNfIY/s1600/bloggertrix.com-twitter-icon.png" style="height: 25px; width: 25px;" /></a> </td> <td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/YOUR FEEDBURNER ID" target="_blank" title="Subscribe Via RSS"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE0iiGgi2Qko_ikrmoybWf6HE50lOm5ZyD1BzBO8jbgi1BC-hryv1l39fVAblnXje1vdx7TRaQUJtaUvmMC-6HWZNRKeSxXBkXVVk5d1RYS13NDbzFSI416ROJz5qSgBunP_jKee_7smw/s1600/bloggertrix.com-rss-icon.png" style="height: 25px; width: 25px;" /></a> </td> <td style="padding-right: 4px;"><a href="http://www.facebook.com/YOUR FACEBOOK USER NAME" target="_blank" title="Find Us On Facebook"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBCZLczitqvSoEo6e62EdL7zIxW0_MBAeD3p1j21Tyc9nu4dCAJEaMbHPWKdZGXTM0fNwrLrPecJXL2qci7oGZIQx3YjV6scNkUIv1obzETvGIWutMwKunKtrJ-HFLVQngSf2pNPmApFo/s1600/bloggertrix.com-facebook-icon.png" style="height: 25px; width: 25px;" /></a> </td> <td style="padding-right: 4px;"><a href="https://plus.google.com/YOUR GOOGLE PLUS ID" target="_blank" title="Add me on Google+"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoeMNcBfMB_wv6ZJhIiBI2Sph0jMF1NiHqU0v36iyzvSMJf7n3BZzxfDDJIylnPfJ0o81gitqFO4i36T8I3c94yu7HIlSGymMG2CoMUKefjNeVJ1iM_UuxJLLHrESr45iOvqBTZ5sIwog/s1600/bloggertrix.com-google-icon.png" style="height: 25px; width: 25px;" /></a> </td> <td style="padding-right: 4px;"><a href="http://youtube.com/YOUR YOUTUBE ID" target="_blank" title="youtubr subscribe"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLSch0ngr6h2O35cTbs5ngYtiTk7AlidImfvK0zYYl9NKR4H-D_S8AEqXOjsbC-pmEnXVUliLDWfnUGG-QvNmzg0etOWjLwSKVSWHQKQ5QFDFUfFz-7rxd1Q2JcNoQdBsMW2nxxLOeovU/s1600/bloggertrix.com-youtube-icon.png" style="height: 25px; width: 25px;" /></a> </td></tr> </tbody></table> </div> <input class="footer-submit-btn" id="footer-subscribe-btn" type="submit" value="Subscribe" /> <div class="clr"> </div> </form> </div>
Code theo phong cách 3:
<style> .subscribebtrix { border: 2px solid #000000; padding: 8px; width: 310px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .subscribebtrix:hover { -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); } .tbimailbox { border: 1px solid #D3D3D3; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset; -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; color: #666; font: 14px "trebuchet ms", sans-serif; padding: 7px 15px; width: 160px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbimailbox:hover { -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .btrixsubmit { font: bold 12px Tahoma, Geneva, sans-serif; font-style: normal; color: #ffffff; background: #ff5714; border: 0px solid #ffffff; text-shadow: 0px -1px 1px #222222; box-shadow: 2px 2px 5px #000000; -moz-box-shadow: 2px 2px 5px #000000; -webkit-box-shadow: 2px 2px 5px #000000; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; padding: 8px 15px; cursor: pointer; margin: 0 auto; } .btrixsubmit:active { cursor: pointer; position: relative; top: 2px; } .btrixsubmit::-moz-focus-inner { border: 0; padding: 0; margin: 0; } </style> <br /> <div class="subscribebtrix"> <div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;"> Free Updates to your Inbox</div> <div style="margin: 10px 0 0 6px;"> <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow"> <input name="uri" type="hidden" value="Windows2it" /> <input name="loc" type="hidden" value="en_US" /> <input class="tbimailbox" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." /> <input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" /> </form> </div> <div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;"> Follow us:</div> <div style="margin: -32px 0 0 120px;"> <a href="http://www.facebook.com/YOUR FACEBOOK USER NAME" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9jBeu_Ov9PtCywdIXjVpIblNZLaovv4Tm3sBSV-9u-x6-m-g9DSrfxj61Ylr93nHJ-B94JVn-loxcQgrUJqf3FRH-w8MiiYMiMGig0yy54V0IY9WKKvwwL-sx5iqmYB16S6JY8PnZa3s/s1600/facebook_btrix.png" /></a> <a href="http://www.twitter.com/YOUR TWITTER USER NAME" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAElYyBxwNuN3cuRJsi_Dmf7f79oB64YRtVuFdmJ509h0ZE_EvyBa_KrT-gGrlSAOtPu0KOuIgODkKRv0wu9kzAzEKCodDAD5kJlPBnZOEXqMo2VGNUJaomGB47ZoCleWAJXMcX-5mKGM/s1600/twitter_btrix.png" /></a> <a href="https://plus.google.com/GOOGLE PLUS USER ID" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCDDex74OApdVvErhokMQrnFIpJx3vn9tDdgWoO3bRo7hFxbkaAGVWgOcshF6Ko9qrWSgGkOrXnHxSaGeSLamvWqJe27r3StSPXLwv282Qftr6jSferm-XGYJq4j2VnAxDfUyqXcrPvTo/s1600/googleplus_btrix.png" /></a> <a href="http://www.pinterest.com/PINTEREST USER NAME" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAV2Wjt2vP2zzHUBnyQBAwbwWHUmui0IHA_pn-YHa5MkCHCl30mlljP0pjJmR3FNYtSS1N5KWNgT-VGVjuzwlJqvsL2nvcjXkRdcZ85P2Etii0Sha4u6_Mi_IiX2-KX4d4iU2mwLdkU4w/s1600/pinterest_btrix.png" /></a> <a href="http://feeds2.feedburner.com/FEEDBURNER ID" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJvrBzdLrL8vFW5evBHa5BLb0KIzlZGeSChQkB0ZDaKZlqvJkPMSi_LZAssOeThhRiNMkkA3qZWWJun62f_FewemWn3iIMN6FDhgUKKsb3cR9FKABohRSGwOuwvc5wdxUsdPVjwoI6eVU/s1600/rss_btrix.png" /></a> </div> <div align="center"> <a href="http://feeds.feedburner.com/FEEDBURNER ID"><img alt="" src="http://feeds.feedburner.com/~fc/bloggertrix?bg=FF9900&fg=444444&anim=1" height="26" style="border: 0;" width="88" /></a></div> </div>
Ghi chú: Bạn cần thay chữ màu xanh đậm in nghiên thành địa chỉ các trang cộng đồng của bạn nha. Thế là xong!
Kết luận:
- Các code trên là một widget CSS và đoạn HTML không hề có JS nên các bác yên tâm.
- Bạn có thể tùy biến (chỉnh sữa) một các dễ dàng.
Theo Nguồn:windows2it
Test :p
Trả lờiXóaTests
Trả lờiXóa