Khung subscribe cho blogger đẹp 2

Bài viết trước mình cũng đã chia sẻ tới các bạn cách tạo một khung subscribe cho blogger bài viết này mình sẽ chia sẻ tới các bạn một kiểu dáng mới đẹp hơn.

Chức năng chính của nó cho phép người đã đăng ký nhận thông báo bài viết mới nhất qua Email.

Xem thêm:

- Tạo hiệu ứng tải trang với CSS cho blogspot

- Cách chèn hiệu ứng Lazy Load cho blogspot

- Thay đổi giao diện tiện ích thống kê cho blogspot

huhu

[post_ad]

Cách thêm khung subscribe cho blogger

Bước 1: Bạn vào Blogger - Mẫu - Chỉnh sửa HTML sau đó chèn đoạn css sau lên trên thẻ ]]></b:skin> hoặc trên thẻ </style>

#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

Bước 2: Bạn quay trở lại bố cục sau đó thêm tiện ích dán đoạn code sau

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=StarTrngBlog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='StarTrngBlog'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

Bạn chỉnh sửa StarTrngBlog thành url feedburner của bạn là được. Chúc bạn thành công !
Xem nhiều thủ thuật hơn tại Star Trường Blog nhé !

Download Here