Khung đăng ký nhận bài viết mới qua email được rất nhiều blogger nổi tiếng sử dụng, đây là sợi dây kết nối giữa họ và những người quan tâm đến bài viết được đăng tải trên blog của họ. Đây là hình thức nhận bài đăng qua mail phổ biến đồng thời thông dụng nhất cho tới thời điểm hiện nay. Nếu bạn cũng có một blog thì đừng ngần ngại hãy bắt đầu ngay hôm nay cài đặt nó vào blog của bạn.
Từ trước tới nay namkna đã giới thiệu tới các bạn rất nhiều mẫu Subscribe khác nhau từ đơn giản đến phức tạp, Bài viết hôm nay namkna sẽ giới thiệu thêm cho các bạn thêm một mẫu tiện ích đăng ký nhận bài qua email mang phong cách của trang facebook với màu xanh là màu chủ đạo.
☼ Khung Subscribe mang phong cách của trang facebook cho blogger
1- Đăng nhập vào Blog
2- Vào Bố cục (layout) => Bấm chọn mục Thêm tiện ích (Add widget) => Trong danh sách các tiện ích của blogger bạn chọn tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào.
<center> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=--namkna--', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login"> <h1>SUBSCRIBE TODAY</h1> <img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px"> Sign up and receive our free Newsletter </span></font></center><br/> <input type="hidden" value="--namkna--" name="uri" /> <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus /> <input type="hidden" name="loc" value="en_US" /> <input type="submit" value="Subscribe" class="login-submit" /> </form> </center> <style> a.tt{ position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none; } a.tt span{ display: none; } a.tt:hover{ z-index:25; color: #aaaaff; background:;} a.tt:hover span.tooltip{ display:block; position:absolute; top:0px; left:0; padding: 15px 0 0 0; width:200px; color: #993300; text-align: center; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; } a.tt:hover span.top{ display: block; padding: 30px 8px 0; background: url(bubble.gif) no-repeat; } a.tt:hover span.middle{ /* different middle bg for stretch */ display: block; padding: 0 8px; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; } ::-moz-focus-inner { padding: 0; border: 0; } :-moz-placeholder { color: #bcc0c8 !important; } ::-webkit-input-placeholder { color: #bcc0c8; } :-ms-input-placeholder { color: #bcc0c8 !important; } .input { font: 12px/20px "Lucida Grande", Verdana, sans-serif; color: #404040; background: #ebc9a2; } .input { font-family: inherit; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .login { padding: 18px 20px; width: 80%; background: #3f65b7; background-clip: padding-box; border: 1px solid #172b4e; border-bottom-color: #142647; border-radius: 5px; background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6); background-image: -moz-radial-gradient(cover, #437dd6, #3960a6); background-image: -o-radial-gradient(cover, #437dd6, #3960a6); background-image: radial-gradient(cover, #437dd6, #3960a6); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); } .login > h1 { margin-bottom: 20px; font-size: 24px; font-weight: bold; text-align: center; color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; } .login-input { display: block; width: 90%; height: 37px; margin-bottom: 20px; padding: 0 9px; color: white; text-shadow: 0 1px black; background: #2b3e5d; border: 1px solid #15243b; border-top-color: #0d1827; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2); } .login-input:focus { outline: 0; background-color: #32486d; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6); } .lt-ie9 .login-input { line-height: 35px; } .login-submit { display: block; width: 100%; height: 37px; margin-bottom: 15px; font-size: 14px; line-height: 10px; font-weight: bold; color: #294779; text-align: center; text-shadow: 0 1px rgba(255, 255, 255, 0.3); background: #adcbfa; background-clip: padding-box; border: 1px solid #284473; border-bottom-color: #223b66; border-radius: 4px; cursor: pointer; background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed); background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed); background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed); background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15); } .login-submit:active { background: #a4c2f3; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1); } .login-help { text-align: center; } .login-help > a { font-size: 11px; color: #d4deef; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.4); } .login-help > a:hover { text-decoration: underline; } </style>
» Tùy chỉnh:
- Thay --namkna-- thành id trang feddbunner của bạn. Nếu chưa đăng ký feed bạn có thể xem bài viết hướng dẫn Tại đây.
- Bây giờ nếu quay trở lại trang của bạn bạn sẽ thấy xuất hiện thêm một khung đăng ký nhận bài viết mới qua email đẹp đẽ và bắt mắt.
Hãy cho namkna biết nếu bạn gặp bất cứ khó khăn nào khi áp dụng thủ thuật này nha,
mypremiumtricks.com
Nhận xét
làm như vậy rồi người khác đăng ký rồi làm sao gởi bài viết vào mail cho người khác vậy anh? đây là blog của em muốn đặt giống vậy mà không biết làm sao nữa nè. http://linkdafabet.blogspot.com/
Trả lờiXóaKhi một người đăng ký theo dõi blog của bạn, thì mỗi khi bạn đăng bài mới nó sẽ tự gửi mail đến cho họ.
XóaĐúng vậy tất cả là tự động, Chúng ta không cần thao tác gì thêm hết :)
XóaSubscribe là tiện ích rất hay tương tác giữa blog bạn và các thành viên theo dõi nội dung trên blog.Nos sẽ góp phần giữ được lượng khách truy cập thân thiết
Trả lờiXóaAh chào Namkna không biết là chúng ta có thể trao đổi 1 textlink không bạn? http://www.vnbloggertheme.com. Nếu đồng ý chúng ta hợp tác nhé. Srry vì đã để lại comment không đúng nội dung. thanks.
Trả lờiXóaTất nhiên rồi bạn mình đã thêm liên kết với bạn ròi đó :)
XóaOk đã add link của bạn rồi nhe. Hop tác vui vẻ
XóaOke hợp tác vui vẻ :)
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaMình bị dính lỗi này: The feed does not have subscriptions by email enabled khi Subscribe thì giải quyết thế nào hả bạn ?
Trả lờiXóaBạn xem cách khắc phục vấn đề đó ở đây nha:
XóaSửa lỗi "The feed does not have subscriptions by email enabled"
tks Nam nhé. Mình làm được rồi. :)
XóaAnh Namkha có bận gì không giúp em sửa ít code với ạ, em làm hoài theo mà vẫn chưa được không biết có sai ở đâu không
Trả lờiXóaOke em cứ gửi nó vào mail tavannam01@gmail.com anh chỉnh cho nha :)
Xóatại sao khi tối dùng code Subscribe cho blog thì lại bị feed báo lỗi : The feed does not have subcriptions by email enblesd:
Trả lờiXóahttp://ctgttpk53.blogspot.de/
Lỗi The feed does not have subcriptions by email enblesd: nguyên nhân chính là do bạn chưa kích hoạt feed khi đăng ký. Cách khắc phục rất đơn giản thôi bạn ak. Bạn xem cách khắc phục vấn đề đó ở đây nha:
XóaSửa lỗi "The feed does not have subscriptions by email enabled"
Đó là tiện ích future post sử dụng Jquery. Tiện ích này sử dụng code hoàn toàn khác biệt nên nếu mốn áp dụng được nó em có thể lọc code từ mẫu mà em nói. Hoặc thêm thủ thuật như bài viết này nha:
Trả lờiXóaTrình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaAnh Ta ơi mình tạo subscribe đó rồi có người đăng ký rồi. xong sau đó mình xóa tiện ích nầy khi đăng bài mới có có tự động gởi mail đến thành viên đã đăng ký nữa không!
Trả lờiXóaDĩ nhiên là vẫn gửi! Trừ khi họ vào feddbunner và hủy đăng ký thôi...
XóaChính xác rồi :)
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaHello nam Ta một blogger nổi tiếng mong được sự hợp tác 1 texlink với blog của bạn nhé. Blog của mình là http://www.khamphablog.com/
Trả lờiXóa