Tạo Khung Subscribe Đẹp Cho Blogspot V2

Chào các bạn, để cho người đọc tiện theo dõi các bài viết mới của bạn thì khung subscribe là một lựa chọn rất tốt. Vì thể trong bài viết này mình xin hướng dẫn các bạn "Tạo khung subscribe đẹp cho blogger". Hy vọng nó mang lại nhiều hữu ích cho website của bạn!

Đọc Thêm:
Hộp đăng kí nhận bài viết V1



Sau đây là các bước thực hiện thủ thuật này:
1. Code Html
Các bạn vào phần bố cục>qua phần sidebar chọn thêm tiện ích>chọn HTML/CSS rồi paste code sau vào:

<div id="isubscribe">
 <div class="isubscribe-text">NHẬN BẢN TIN QUA EMAIL</div>
  <div class="social-icons" id="ABC-social-icons">
   <ul>
     <li class="media_icon">
        <a href="#" target="_blank" title="Facebook">
        <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWrWGIGKx5WVTDcmljyqiBAFuVAA_hdIp0kgTmA5CkaetN-QFwID6yxOwXRd9jakSmR-S-28VwWuMaC2Kbv0JxRW1tUWeIY8I_lvFqscVIHCyKxOMuk20H3Sjq8-IIKrNRsduB4X35P9g/s1600/Facebook.png" />
        </a>
 </li>
 
     <li class="media_icon">
        <a href="#" target="_blank" title="Twitter">
        <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIT98x54ylc1aj3a624eqzOxEkHnK9Xz-fVrg4-S1JeLmI99h4t8D_JwbBssVcCxHCoaIcQx9Z5TkUQjN7mncTH9dsKPHgo8o5tXgQ4YCAR9EJJVt9Zj9OU3yodQNR_rtsj-A77TB_uvQ/s1600/Twitter.png" />
        </a>
 </li>
 
     <li class="media_icon"><a href="#" target="_blank" title="Google+">
        <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8uesrczUMkUs1f2P5NkFoxf_RNbI4-dZJHStM3kaAe8cu4uzafLWFFO_pOv94zI0K34DIUasCs7JuwiYoYClqLXB8ugrmQvcAFBIvqUlmgUG0svvBQ030YI6S15QAUOjHqiN-LaJ1_KM/s1600/Google.png" />
        </a>
    </li>
 
     <li class="media_icon">
        <a href="#" target="_blank" title="Youtube">
        <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO_KVA8Jen7CAwbJOJMOnAE9usfI-eb3CYflEojaa81gkbYZ9FXzVljGEjGz9FIPAxxylLThIwAXC0Rm4K5jNuHCtZ3W-m1dCJQdnuIyOV_TibTFt6gdfZs7jDj2NjtVGKiCLBRD2A2Ic/s1600/Youtube.png" />
        </a>
 </li>
 
     <li class="media_icon">
        <a href="#" target="_blank" title="Rss">
        <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyw6vDFiIAfhHyISsk4BApQLpiBcS2GBbMwdH21LlkRg7KnmVzaucsXashIQ4siJgn3O6Q4NRpUuaEtadOIAQ8xsHkVPy57IY5OZQMNoVq9BwWgwKZALy_diCHPmZUMEzicDyugwyxoA0/s1600/Rss.png" />
        </a>
    </li>
    </ul>
</div>
 
<div class="isubscribe-text">Bạn Hãy Yên Tâm, Nó Hoàn Toàn Miễn Phí
Chúng Tôi Không Spam</div>
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FreeAllToShare', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
  <input  type="text" class="isubscribe-email-field" name="email" autocomplete="off" placeholder="Enter your email address"/>
 
  <input type="hidden" value="vnminhtriet" name="uri"/>
  <input type="hidden" name="loc" value="en_US"/>
  <input type="submit" value="THEO DÕI" id="isubscribe-submit"/>
 </form>
</div>

Các bạn chú ý đoạn Id feedburner FreeAllToShare nhé,thay bằng Id feed blog của bạn
2. Code Css
Các bạn vào Mẫu>Chỉnh sửa Html>ấn ctrl+F tìm ]]></b:skin> và chèn đoạn code sau đây vào trước nó:

 
#isubscribe-submit {
  height: 30px;
  width: 120px;
  background: #734E76;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  margin-left: 70px;
  border: 1px;
  border-radius: 5px;
  cursor: pointer;
}
 
#isubscribe-submit:hover {
  background-color: #000000;
}
 
#ABC-social-icons {
  height: 50px;
  width: 100%;
  margin: 15px 0 0 10px;
  clear: both;
  z-index: 2;
  position: relative;
}
 
.social-icons {
  display: table;
}
 
.social-icons ul {
  text-align: center;
  padding: 5px 5px 0 0
    list-style-image:none;
  list-style-position: outside;
  list-style-type: none;
}
 
.social-icons ul {
  margin-bottom: 0;
  padding: 0;
}
 
.social-icons li.media_icon {
  margin-left: 15px;
  padding-left: 0 !important;
  background: none !important;
  display: inline;
  float: left;
}
 
.social-icons li:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(-360deg);
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest