Ở 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 Buttonsmà 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é !

   Đọc thêm:

● Thêm nút share trượt dọc cho Blogspot Pro Version 2

● Tạo sitemap (sơ đồ) cho blogspot theo phong cách chuyên nghiệp 

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/AVvXsEgjL3TFf7AD0fnwCbrl2zocmAhyXtE3C_5AvRmUYhc6AKTt84BhC16m8kcgT3W64NftMUUnqjFQQuHxmgaG8BPu9dYBrEMNJpz0fphSTIZWec7vloOfHJuoPrvigdPWmmc9eyUZZJVVTJ_6/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/AVvXsEhDbWwhU_JYKBtiQQ0JORgSlLLEc2tjOEt2vvizb1fW7Iw4zIU7SBhRiXLW5_JMOJaKM0YKdd2x8x1Wv0HAqGJHLBgYtxo0MApqnYbU2XUWD3TXuQJdrWqbCJoNyLdGJTVdoV8Yb69pVOfh/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>

Read more »