Khung Subscribe Box Cho Blogger - Blogspot

Thông thường, khi dạo ngang qua các blog hay các bạn thường lưu trang blog đó lại để sau này vào đọc tiếp bài mới. Làm như vậy rất lâu thay và đó nếu ta đăng ký nhận bài viết mới từ Blog đó qua Email thì mọi chuyện khá đơn giản. Hôm nay Anh Nhím Blog sẽ hướng dẫn các bạn làm điều đó  ngay trên blog của bản thân với Widget Khung Subscribe Box Cho Blogger - Blogspot.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao
• Lời Kết

Mục Đích

• Giúp cho mọi người nhận bài viết sớm nhất từ Blog của bạn qua Email
• Giúp cho việc SEO blog, tăng lượt view,...
• Chèn các chỗ trống trên blog

Thực Hiện

1. Đăng nhập vào Blogger --> Mẫu --> Chỉnh Sửa HTML. sau đó dán đoạn CSS sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

CSS/* Subscribe Box */
#subscribe-box{background-color:#ffe4ad;margin:20px 0 0 0;padding:20px;overflow:hidden;border:8px solid #ebd099}
#subscribe-box h4{color:#827459;font-size:16px;margin-bottom:20px;text-align:center;text-transform:uppercase}
#subscribe-box .emailfield{margin:auto;text-align:center;}
#subscribe-box .emailfield form {margin:0;}
#subscribe-box .emailfield input{padding:12px;color:#bcc4ca;border:1px solid #ebd099;font-size:14px;margin-bottom:10px}
#subscribe-box .emailfield input:focus{color:#454545;outline:none;border-color:#d5bc88;}
#subscribe-box .emailfield .submitbutton{background-color:#f8695f;color:#fff;margin:0;font-size:14px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;border:0;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#e0594f;color:#fff;}

Chú ý: nếu blog bạn đã có thì xóa toàn bộ code cũ rồi mới thay thế bằng code trên. Nếu ko thì widget không hoạt động

2. Tiếp sau đó các bạn chép đoạn html sau vào nơi bạn muốn đặt. Nếu blog bạn đã có thì trước khi xóa nhớ vị trí của nó rồi thay thế nó bằng code này:

HTML
<div id="subscribe-box">
<h4>
Never miss our latest news, subdcribe here for free</h4>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Vnitworld', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter Email&quot;;}" onfocus="if (this.value == &quot;Enter Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Enter Email" />
<input name="uri" type="hidden" value="Vnitworld" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Submit" />
</form>
</div>
</div>
<div style="clear: both;">
</div>

Chú ý: các bạn thay chữ màu đỏ: Vnitworld thành của bạn. Có nhiều bạn không biết lấy cái đó ở đâu thì các bạn vào Bố cục > Thêm tiện tích > Kéo xuống chọn Theo Dõi qua Email --> Sau đó các bạn để ý tới phần link bên dưới , các bạn sửa lại rồi nhấn lưu. Sau đó mở lại chọn cái chữ cuối cùng dán vào chữ màu đỏ trên.

3. Save Template (Lưu Mẫu) lại.

Nâng Cao

Thay đổi chữ Never miss our latest news, subdcribe here for free

- Ctrl + F từ đó và thay thế lại thôi

Với các chữ khác cũng tương tự

Thay đổi Màu nút Submit 

- Tìm dòng #subscribe-box .emailfield .submitbutton{background-color:#f8695f 
Thay đổi mả màu #8695f thành màu của bạn

Vào đây lấy màu

 Thay đổi màu nền

tìm dòng #subscribe-box{background-color:#ffe4ad có mã màu là #ffe4ad và thay đồi nó

Thay đổi cái viến

Tìm dòng border:8px solid #ebd099} và thôi đổi cái màu #ebd099  

 Thay dổi màu nút Submit khi rê chuột vào

tìm dòng .submitbutton:hover{background-color:#e0594f; và thay đồi cái #e0594f

Lời Kết

Vậy là mình đã hướng dẫn các bạn tạo Khung Subscribe Box Cho Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.