Ở phần 1 mình đã hướng dẫn các bạn Tạo nút Social
Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger __ Khá sinh
động.
Tới phần 2 mình sẽ hướng dẫn các bạn không chỉ đơn
thuần là tạo nút Social Buttons
mà nó còn có sự kết hợp với tiện ích theo
dõi bài viết qua Email. Với 3 phong cách khác nhau, cũng windows2it
thực hiện nhé !
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(https://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/AVvXsEjXBcwuNnyqDb236OgmNOV6Bte-qTKEi_Orj2-HLNqaWZT_PKuV7TFXFRY1mbhjQJ2kFjU2nJNlEjO05FQqRHq5m3P7-AOAdS5R4T8tWqiVJm9pcIV5yfbBVs1Y-2oJYUJa4dCuuDSUGMvD/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/AVvXsEiKLLCPWdSQRxS5KqsKaOKHzNDu69d9AERI8LE7YlBUkXKg26hPrTuuh3Mxz_K-utMWTzSr5iC-bQHGMIUgbNVO_UxC3_ElaK0OaDNaGRYUAdqyQ-IgdEYuWBbldhUYxHxns0jexoaIliGA/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/AVvXsEho-SSwYFXkygFayHbIOCVRa7RYJut5WD16zyunQ7fW5aontsS2KDYgwW4pCGL7VDfoY6Xn0CZjS1UAFpDw7_ncgnbEY-_H-7-DuS1oTZb9u5_QAxbJs3oQPWyMwUTgEPFgZ6df5MiQjws/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/AVvXsEjIVDaRHA8fTe6YCC9lh1A-PiwWB-faVKm74Bz_3TP6PeyZbSxeGdffgKQgheMYlwF9HyY5QTG33ZsHCLnLbuvl0ZZp8IO-nKwiHJKt1IxAuZl4QxD1gWqA3QDh3xTyGj9FiVsrEppnOok/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/AVvXsEhSZBTTxCPtQG6-kS1_ffekbzNhOcHmBU-wF8XlvFAKSA1RKS-RhT4kKWqycIAr7qC5yOXOr5XJYZzHDg7fMWJZzhTSVlASSGM7lmxNP6ELDDAHRpTyhLyXw2WjOG-p2CWmG9iQwte6Dgc/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/AVvXsEj28AC55FFDbG1rzPdkSmN4dEw0et74A1r1ZrHrjRRCBeY1tKSkRFrFmG6oSjGURj_3s1YcuqI7wd0wsSJMYOMko1tQ13TDV9S8URMUihL0WbQgeq70ln9Nvn1Jduo_N78m8_pL_JXTVU8/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/AVvXsEh3Vf5tD3JG0xUvYIlxdDuvV93YZx_cL05Ulze2mD6_cZt_dsTfp3bstZUn_-5HyIPWlqNq0rwCl5bD9lslRp_jRSZM0n1Rb7Fv53PD_TyZ2NiB_SZcX0sIfzBcdZE6RG7VI_OuakXW2Uo/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/AVvXsEjqhlGY_OmjmebmpBx2ZrxldLc7OH7fzqk4DpL305uxFfYnJ-HSz0bJNxUL9iYuawPa_kZFk7MgJu-xHhHXqgi3ZXHFciDtveO57GsdPGyREGMMR-t5dOkSwIk4wMAU9WGO0d2TcCZPDv8/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/AVvXsEgdMgqL3MDz-x1pzoPz5cqG70zUhl86Pg2WqVfxFtOn91wRM6t0i3pssUmh2zy_bRNss2DIA8naT6a1ydjNsbzSJTz2MejM1elVellsFVho7fh48NhWwSBS5QpebfGwqta3ZNlSm3klu8Q/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/AVvXsEjkbEh3jQh81diqn9GbKGIZXS7G2-n_eWIpRY3HtomzTNsN2lpQKr5mS2Cw1VbtoDdq_JUeghMrfWr30sGMrlsXekIER-geKwEMb8x10xETfUwZ1YGeuyW7hqbDxY2fTmLnad3fI08tZd4/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/AVvXsEhYwsHH5OVJ7l43WAYia_CAkbAoaLoNayiTgbPKAR3FUZ2hDN5YEVjrtv5d-QP8KvFNAdqrx5WDwwzAIDiZXNM0PLlv-XlBdBULOjGxPgLHlAAnKoQnbflfTrEPfGNKMj5SeQV_ahZFGdM/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/AVvXsEjOIIJwSODEfwwYKBmf6qJN0ow4zDQKN2Ca0JmA2rec-qkHxrksRCPGLpPCi57astbZmmij8AD3P9pDCFNQkSFoxikiWTqpMRIwnJq7bcsKnCajm494qSREVSCvWbKXbkfKkVSTppNxHdM/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.
>>> Thêm nút mạng xã hội cho blogspot blogger rất chuyên nghiệp và hiện đại phần 1
Còn bác nào chưa hiểu cứ để lại comment nhé @!
>>> Thêm nút mạng xã hội cho blogspot blogger rất chuyên nghiệp và hiện đại phần 1
Còn bác nào chưa hiểu cứ để lại comment nhé @!
About Quang Mến :
Theo dõi tôi trên:
0 nhận xét:
Đăng nhận xét