Facebook Like Đăng ký Box cho Blogger

Xin chào đồng nghiệp người đọc hôm nay tôi sẽ cho bạn biết làm thế nào bạn có thể thêm mát Facebook Like Đăng ký Box cho Blogger blog.Subscribe Box của bạn là một tiện ích rất quan trọng đối với blog những người muốn du khách của họ trở lại. Hộp này là bản sao của Facebook Đăng nhập hộp chuyển đổi sang Theo dõi hộp bởi Genie máy tính của bạn có thể lấy bạn rất nhiều thuê bao. Điều kiện tiên quyết của mẫu này sẽ là một tài khoản thực hiện tại Feedburner nơi đăng ký bằng email được kích hoạt.

Widget này có một cái nhìn thanh lịch và rất đẹp mã. Thanh và nút phát sáng khi họ đang hoạt động (chuột được nhấn vào chúng). Một bản demo làm việc trực tiếp của tiện ích này được nhìn thấy ở bên dưới:

Một khi bạn đã nhìn thấy các bản demo để thêm tiện ích này vào blog của bạn làm theo các bước dưới đây.

Thêm HTML / CSS trong diện

Thêm mã của widget này đi vào Blog Tiêu đề → Giao diện → Thêm Widget → HTML / JavaScript và dán đoạn mã được đưa ra trong hộp mở ra.

<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/>

</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;

-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;

-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>

Một khi bạn đã dán các thay đổi mã lutip (xảy ra tại 2 địa điểm trong các mã) với Feedburner của bạn ID. Cuối cùng lưu các widget và các mẫu. Bạn đang thực hiện bây giờ. Bây giờ bạn và truy cập của bạn có thể thấy điều này Facebook mát như hộp Đăng ký thanh lịch trong blog của blogger của bạn và đăng ký của bạn nhận được tất cả các bài viết gần đây trực tiếp trong hộp thư đến của họ.

Các tin khác