Tạo ra một mẫu đăng ký dễ thương
Tôi đã chia sẻ nhiều bài hướng dẫn trên RSS các hình thức đăng ký như mẫu Email đăng ký và đăng ký Feed Widget và hôm nay chúng tôi có thêm một nhưng vô cùng xinh đẹp và dễ dàng để chỉnh sửa hình thức thuê bao ngủ gà ngủ gật với các hiệu ứng CSS mới. Widget này sẽ tiếp tục sidebar của bạn gọn gàng và sạch sẽ và chắc chắn sẽ thu hút du khách đăng ký.
Làm thế nào để Thêm Hình thức đăng ký này để Blogger ?
Về Blogger> Thiết kế> Phần tử
Chọn HTML JavaScript Widget
Dán đoạn mã sau vào nó:
<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz5ifYg-_KyZFmbNcHBMjKmTqBIxZ1zgZeUU5a0YDpFjFd3kFV2DCHDCfvQzug0a1eAcv9N7FGbLetVBfB0ltvc26q_IznoPVeUghvUyUCw13BEQHK1QiqhQjPhSjOQd1VJV-LYsPCOPom/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz5ifYg-_KyZFmbNcHBMjKmTqBIxZ1zgZeUU5a0YDpFjFd3kFV2DCHDCfvQzug0a1eAcv9N7FGbLetVBfB0ltvc26q_IznoPVeUghvUyUCw13BEQHK1QiqhQjPhSjOQd1VJV-LYsPCOPom/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=lutip', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="lutip" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=lutip', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="lutip" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>
Bây giờ làm cho những thay đổi này:
Bây giờ thay thế http://feedburner.google.com/fb/a/mailverify?uri = Lutip với Feedburner Email thức ăn liên kết của bạn. Bạn có thể có được nó bằng cách truy cập của bạn Feedburner chiếm sau đó điều hướng đến Công bố công khai và sau đó đến Email theo dõi.
Thay thế Lutip với tiêu đề nguồn cấp dữ liệu của bạn. Nó xuất hiện ở cuối của liên kết nguồn cấp dữ liệu của bạn. Trong trường hợp của tôi là http://feedburner.google.com/fb/a/mailverify?uri = Lutip
Tiết kiệm widget của bạn và xem blog của bạn để xem nó giới thiệu trực tiếp!