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
Khung subscribe cho blogger đẹp 2

[post_ad]

Cách thêm khung subscribe cho blogger
Bước 1: Bạn vào BloggerMẫuChỉ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é !

Loading...

Quang Trường

Giá trị của một con người không phải là khi họ đang ở vị trí thuận lợi mà là khi họ đang rơi vào hoàn cảnh khó khăn và đau khổ nhất.

3 comments “Khung subscribe cho blogger đẹp 2

    • 12/10/2016 at 06:17
      Permalink
      • Bác quá khen :3 e thấy cũng bt mà, k viết bài thì đành ngồi phá chơi
      Reply
    • 12/10/2016 at 12:10
      Permalink

      Mỗi lúc vào là lại thấy thay =)) lúc chiều em vào, bây giờ vào lại thấy thay màu rồi. Blog bác đẹp quá đi mất

      Reply

Cùng tham gia bình luận bài viết nhé!

%d bloggers like this: