Hướng dẫn tạo hộp đăng ký theo dõi giống CanhMe cho Blogspot

Có lẽ CanhMe là trang web không còn xa lạ đối với những độc giả thường quan tâm đến giá tên miền, hosting và ưu đãi từ các trang web bán tên miền... Không chỉ ở nội dung phong phú, tin tức cập nhật mà CanhMe mang lại cho bạn một trải nghiệm tuyệt vời với giao diện đầy đủ chức năng cần thiết, dễ nhìn cùng với nhiều widget đẹp. Đã có rất nhiều blogger muốn sở hữu một số widget ở CanhMe nhưng CanhMe hoạt động dựa trên nền tảng Wordpress nên có thể sẽ khó khăn cho các Blogger dùng Blogspot ! Nhưng vấn đề này đã được giải quyết khi bài viết hôm nay sẽ hướng dẫn bạn tạo hộp đăng ký theo dõi giống CanhMe cho Blogspot ! Cùng khám phá nhé.
Hướng dẫn tạo hộp đăng ký theo dõi giống CanhMe cho Blogspot
Ảnh minh họa

Các bước thực hiện

Bước 1: Đăng nhập Blogger.com > Chủ đề > Chỉnh sửa HTML > Chèn CSS này vào dưới thẻ <style>:

.form-content{ background: linear-gradient(45deg, transparent 33.33%, #e5e0da 33.333%, #e5e0da 66.66%, transparent 66.66%), linear-gradient(-45deg, transparent 33.33%, #e5e0da 33.33%, #e5e0da 66.66%, transparent 66.66%) !important; background-size: 20px 40px !important; top:-10px;left:0;width:100%;height:12px;display:block;} .pro-form{background:#80b810;color:#fff;text-align:center;font-size:24px;font-weight:600;padding-top:25px} .pro-form p{color:#ddd;text-align:center;font-size:14px;margin:15px 0;font-weight:400} .form-pro{background:#e5e0da;padding:10px} #input-name,#input-email{height:35px;border:1px solid #e5e5e5;margin-bottom:15px;box-sizing:border-box;font-size:14px;font-family:inherit;background:#fff;text-align:left;color:#777;width:100%;border-radius:5px;padding-left: 10px;} #input-name::-webkit-input-placeholder,#input-email::-webkit-input-placeholder{color:#777} #feedform input[type="submit"]{background:#445a6d;color:white;padding:10px;width:100%;border:1px solid #e5e5e5;border-radius:5px;font-weight:bold;font-size:15px;} #feedform input[type="submit"]:hover,#feedform input[type="submit"]:active{background:#465868} #feedform input[type="submit"]:focus{outline:none}

Bước 2: Vào bố cục, thêm tiện ích Follow by email vào sidebar. Sau đó tiếp tục vào Chỉnh sửa HTML > nhấn Crl+F tìm đến followbyemail1 > thay toàn bộ code trong cặp thẻ <b:includable id='main'> ... </b:incluedable> thành:

<b:includable id='main'> <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if> <div class='pro-form'>Bản tin canhme <p>Đăng ký nhận khuyến mại hấp dẫn nhất qua email</p> <div class='form-content'> </div></div> <div class='form-pro'> <div class='follow-by-email-inners'> <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow' id='feedform'> <input id='input-name' name='Name' placeholder='Họ và Tên...' required='true' type='text'/> <input id='input-email' name='email' placeholder='Địa Chỉ Email...' required='true' type='text'/> <input id='feedform' type='submit' value='Đăng Ký Ngay!'/> <input expr:value='data:feedPath' name='uri' type='hidden'/> <input name='loc' type='hidden' value='vi_VN'/> </form> </div> </div> </b:includable>

Nếu bạn có một ít kiến thức về code thì có thể chỉnh sửa lại cho phù hợp theo ý bạn. Sau khi chỉnh sửa xong bấm Lưu chủ đề và xem thành quả nhé.

Chúc các bạn thành công !

Bình luận

  1. Chỗ kia mình ở việt nam thì thay thành vn_VN

    Trả lờiXóa
    Trả lời
    1. cảm ơn bạn. mình đã cập nhật ạ

      Xóa
    2. dạ vâng e sửa r a ạ

      Xóa
  2. ra bài tạo khung chứa code đi khanh như bài viết trên đấy , chỉ cần nhấn 2 lần là coppy được toàn bộ code trong khung chứa
    [img]https://i.imgur.com/6l3PZJJ.png[/img]

    Trả lờiXóa
    Trả lời
    1. cái đó xấu đui viết làm gì bạn :v với lại mình cũng không thiết kế nhiều cho dễ nhìn chút :v

      Xóa
    2. Mình thấy thủ thuật đó rất hữu ích

      Xóa
    3. nếu bạn thích thì có thể tìm kiếm trên mạng rất nhiều cái đẹp nha bạn. hoặc bạn có thể chờ mình

      Xóa
    4. :)) câu cmt xin khung code nghe rất quen khanh ạ. klq mà e ghi nhầm 1 chữ

      Xóa
  3. Nếu bạn thấy widget, tiện ích ở bất kì trang web nào hay, hãy comment ngay, mình sẽ rip về cho mọi người! - Khanh muốn gây thù chuốt oán à :v

    Trả lờiXóa
    Trả lời
    1. Nếu ngta ko mã hóa thì mình lấy về share, nếu ngta mã hóa thì mình lấy về dùng ko share

      Xóa
  4. Khung này màu hơi tối Khanh ạ :v

    Trả lờiXóa
    Trả lời
    1. Chỉnh lại màu, mình chỉ lấy gần màu canhme thôi

      Xóa

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm