Chào các bạn! hôm nay Deva Desiger share cho các bạn code tạo hộp thoại đăng kí nhận bài viết đẹp chuyên nghiệp cho blogspot..
Mình đi vào các bước thực hiện luôn nhé!
Các bước thực hiện:
Bước 1:
Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head> và lưu mẫu .
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
Bước 2:
Chọn Bố cục ---> Thêm tiện ích HTML/Javascript..dán đoạn code sau vào và Lưu mẫu.
<style> #twist-blogger-sbox-v2{padding:0;padding-bottom:5px;font-family:Arial,Helvetica;display:block;margin:0;width:100%;border-radius:1px;border:0;background:#333}#twist-blogger-sbox-v2 .main_tagline{padding:0;line-height:2.5em;font-size:26px;margin:0;height:90px!important;overflow:hidden;font-weight:normal;color:#FFF;text-align:center;border:0;background-color:#03a9f5}#twist-blogger-sbox-v2 .email_icon{display:table;transition: all .5s;margin:-35px auto 0;font-size:25px;padding:12px;height:25px;width:25px;background-color:#03a9f5;color:#FFF;border-radius:50px;border:10px solid #fff;line-height:0}#twist-blogger-sbox-v2:hover .email_icon{transform: rotate(360deg);}#twist-blogger-sbox-v2 p{font-size:15px;color:#f9f9f9;text-shadow:0 -1px 0 #000;line-height:20px;padding:7px 10px 0;text-align:center;width:90%;margin:0 auto}#twist-blogger-sbox-v2 .rssform{padding:0;margin:0 auto;display:block}#twist-blogger-sbox-v2 .rssform input{padding:8px;margin:15px auto;font-size:13px;color:#000;text-align:center;display:block;font-family:Arial,Helvetica;font-weight:normal;width:90%;height:38px;text-transform:uppercase;outline:none!important;border:1px solid #fff;border-radius:1px;background-color:#fcfcfc;box-sizing:border-box!important}#twist-blogger-sbox-v2 .rssform .button:hover{opacity:.8}#twist-blogger-sbox-v2 .rssform .button{background:#03a9f5;border:0;color:white!important;margin-top:15px;outline:none!important;transition:all .3s ease-in-out;padding:5px 2px!important;float:none;text-transform:uppercase;font-size:15px;font-weight:normal;cursor:pointer}#twist-blogger-sbox-v2 .social_profiles{line-height:1.2em;display:table;float:none;margin:0 auto;text-align:center;min-width:157px;padding:5px 0;border:0}#twist-blogger-sbox-v2 .social_profiles a:hover{color:#FFF;background-color:#ff5959;border-color:#FFF}#twist-blogger-sbox-v2 .social_profiles a{color:#000;margin:0 5px;text-align:center;float:left;display:table;padding:4px 5px;background-color:#fff;border-radius:50px;border:2px solid #2d2d2d;width:15px;height:15px;line-height:0;font-size:16px;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}#twist-blogger-sbox-v2 form{margin-bottom:10px!important}</style><div id="twist-blogger-sbox-v2"><div class="main_tagline">Đăng kí nhận tin</div><div class="email_icon"><i class="fa fa-envelope"></i></div><p>Nhập Email để nhận bài viết mới nhất từ Deva Desiger Blog</p><div class="rssform"><form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Deva','popupwindow','scrollbars=yes,width=550,height=520');return true"><input type="text" name="email" placeholder="Địa chỉ Email của bạn..." /><input type="hidden" value="Deva" name="uri" /><input type="hidden" name="loc" value="en_US" /><input value="Đăng kí ngay" class="button" type="submit" /></form> </div></div>
Tùy Chỉnh:
- thay Nhập Email để nhận bài viết mới nhất từ Deva Desiger Blog thành nội dung bạn muốn
- thay Deva thành URL feedburner của bạn (nếu có.không có cũng không sao)
Vậy là xong rồi.Chúc các bạn thành công,
=>Có thắc mắc gì thì để lại cmt bên dưới nhé.
ttt nha ông
Trả lờiXóaok ông !
Xóa