Tạo biểu tượng hộp đăng ký Email cho Blogger

Hộp thư Đăng ký Email cho Blogger - là một widget của blogger sử dụng jquery. Mẫu đăng ký này được tạo bằng css3 và jquery. Trong bài viết này mình sẽ hướng dẫn cho các bạn cách thêm hộp đăng ký email mỗi khi ngưởi dùng mở website của bạn lên.

Bằng cách thêm tiện ích này, bạn sẽ dễ dàng tăng được lượng độc giả cho blog của mình. Đó là một cách rất tốt để tăng lượng theo dõi cho blog của mình. Tôi hy vọng hộp thư email mới này sẽ giúp bạn tăng độc giả blog. Bây giờ chúng ta sẽ bắt tay vào thực hiện nhé.

Bạn vào mục Template > Edit HTML Và past đoạn mã code CSS vào trước thẻ </style> 

HTML #sub-box {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {background:#fff;border:8px solid #fff;width:600px;height:250px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {content:"Close";padding:5px 8px;background:#fff;color:#48cb7a;font-weight:normal;font-size:12px;font-family:Open sans;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box {width:600px;height:250px;background-color:#02BA74;}
#subscribe-box p {font-family:'Open Sans';font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:'Open Sans';width:96.3%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}

Bạn Save template
 Bây giờ bạn vào Layout > Add a gadget > HTML/Javascript  và paste đoạn code sau vào.

HTML









Subscribe for Latest Update



               


                

              

Share this: