Chào các bạn, hôm nay rảnh rỗi nên ngồi mò tý về box subcriber cho blogspot, nó khá giống với cái hiện tại của mình đang dùng nhưng của mình thì có chỉnh qua rồi!
Để thấy rõ hơn thì mời các bạn xem hình demo dưới đây nhé!
Tạo Box Subscribe Khung Đăng Ký Qua Email Đơn Giản
Hình Minh Họa

CÁC BƯỚC THỰC HIỆN

Bước 1: Chèn CSS này vào trước thẻ ]]></b:skin>
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#234150;overflow:hidden;border-top:5px solid #2c4584;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#fff;color:#000;margin:10px 0;padding:15px 20px;width:35%;border:0;border-radius:3px}
.subscribe-css-email-button{background:rgba(0,0,0,.3);color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .7s}
.subscribe-css-email-button:hover{background:linear-gradient(to left, #1a75c6, #44A18A);}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:#fff;font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:#fff;text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.7);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
Bước 2: Chèn đoạn code sau đây vào nơi muốn hiện thị, nên để nó cuối trang giống mình.
<div id='subscribe-css'>
<p class='subscribe-note'><span>ĐĂNG KÍ</span> <span class='itatu'>NHẬN</span> BÀI VIẾT MỚI</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Starcuongit' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Starcuongit&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Star Cường IT'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Email của bạn...'/><input class='subscribe-css-email-button' title='' type='submit' value='Subscribe'/></form>
</div>
</div>
</div>

HƯỚNG DẨN EDIT BOX SUBCRIBER 

  • Để thay đổi màu nền của box thì các bạn thay #234150 thành mã màu ưa thích của các bạn
  • Nếu muốn cái nền thành hình ảnh thì các bạn thay #234150 thành url(htpp://linkanh.com)

LỜI KẾT

Chỉ vài bước đơn giản thì các bạn có thể tự tạo cho mình một cái box subcriber chất rồi :)) Nếu có thắc mắc hay lỗi gì thì các bạn hãy cứ comment bên dưới, mình sẽ giải đáp tất cả cho các bạn.
Chúc các bạn thành công
- - 49 bình luận
CHUYÊN MỤC

BÌNH LUẬN (49)

  1. Đó. Thấy e nói đúng chưa :)) Cần gì tìm đâu xa xôi hehe

    Trả lờiXóa
  2. Đang hóng Cường share vài cái thanh search cho blog
    Mấy cái search mà cường edit des đẹp phết.

    Trả lờiXóa
    Trả lời
    1. Cái temp.starcuongit.com
      Với cái của temp dii max á

      Xóa
    2. À mấy cái đó nhặt trên mạng thôi :3

      Xóa
    3. Share đi
      Không rành code nên không cop được
      Nếu có link thì xin luôn

      Xóa
    4. Kiểu như cái của BSW

      Xóa
    5. http://notepad.vn/share/vrvpgwu72

      Xóa
    6. http://notepad.vn/share/vrvpgwu72

      Xóa
  3. <img src="https://uphinhnhanh.com/images/2017/08/31/1.png" alt="1.png" border="0" />
    Cho xin code đây đi huynh.!
    ctysapa@gmail.com

    Trả lờiXóa
    Trả lời
    1. Bạn tham khảo bài của TSM Blogger tại đây nhé.

      Xóa
    2. mình làm được nhưng thấy nó xấu qá, mình muốn biết cách tùy biến sao cho nó gọn đẹp lại ý! mong giúp với^^

      Xóa
    3. Bạn để lại blog bạn cho mình xem nhé!

      Xóa
    4. https://hoachatsapachemical.blogspot.com/

      Xóa
    5. Bạn set admin mình sửa cho nhé!
      tuananhle732@gmail.com

      Xóa
    6. thanks nhé! tôi sẽ thường xuyên ghé vào ủng hộ bác! ^^

      Xóa
  4. Trả lời
    1. TSM Blogger có bài này à bạn? cho mình xin link gốc đi?

      Xóa
  5. Trả lời
    1. Bạn nhấn tổ hợp phím Ctrl+F rồi gõ thứ cần tìm vào rồi gõ Enter nhé!

      Xóa
  6. cái code này đăng kí cho blog starcuong it vậy muốn edit để thành đăng kí của blog mình thì làm saoa

    Trả lờiXóa
    Trả lời
    1. bạn vào http://feedburner.google.com rồi đăng ký cho mình một account rồi triển thôi :3

      Xóa
    2. adnub có thể bỏ chút thời gian chỉ cách xài được không :D e k biết đăng kí rồi edit sao

      Xóa
  7. template bác share bây h đổi ko đc luôn nhé ! load blogger cũng ko luôn :v

    Trả lờiXóa
  8. Sao bị lỗi hiển thị rồi ông?

    Trả lờiXóa
    Trả lời
    1. Lỗi như thế nào nhỉ? cho xem cái hình minh họa.

      Xóa
  9. Rất hay, hóng nhiều bài như thế

    Trả lờiXóa
  10. . Hellu bác cường lâu rr k ghé thăm <3

    Trả lờiXóa
    Trả lời
    1. Hello Văn Huy đã ghé thăm Star Cường IT:))

      Xóa
  11. Bài này lâu rồi, mà mình chỉnh ngày nó vẫn up lên lại được à Cường?

    Trả lờiXóa
    Trả lời
    1. Chỉnh lại ngày thành tự động là được mà :))

      Xóa
  12. Anh cường chỉ em làm cái trang mã hóa code đi

    Trả lờiXóa

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé