Subscription box cho blog (style 6)

Hôm nay mình sẽ tiếp tục chia sẻ một style nữa rất đẹp của subscription box widget (khung đăng ký) cho Blogger (xem hình trên). Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Bố cục.

Bước 2: Tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào phần nội dung:

<style type="text/css"> 
img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNb4eFfFNnlWIAyGvvvlpdrWO7sj8A2PLSt9HLla0OVX671lCL4Wds9DxxhrKvTVlWDEDQf2fDqHhmXde2jkUrM6SOjadC335VUA21UiGvwh7YtFxKfD0xQiwECL13DYqcHkn-FY_v5g/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/mrjan.tk"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13frfvketQar-HpI7fjre3gwUlpPCzpa79nuhcvWwS_Eqdy0J7v3fZPPWmdOTV7ytiTh4PayTnGHYJV9MqWVy2x4TxKV9_EkCn64qfyUkP87dyr44nDS76rQpU5qivLj6bs2T9W-kJg/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/quocdoantrinh/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi52d1a9wH3pPIfMo6AdeLKvRhl7vQzqjUYcFF-fkApvOrdQON-mv8_xXtmTy4mPLIHHeckWHQq3uHuXL6RhyWIVjMoX9iweolyKFnILuJrOabBpmPExo7N1btvvc8qVSVEnaUiEjoqew/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/tqd" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNiMh1Ptk2-9j1Qe5hRRNyUdd0-bBMZfkK_VlJbnMWYavAzw6bGNsndTzW8t2SQDIvT48KptFxImMjwAem_NxjQUUiaNRmHqinyiQOXQETCaWznX_CLPGOVMGipJtp44XNQy0iZiwvhQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://tqd.96.lt"></a></td></tr></tbody></table>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tqd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="tqd" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>

Sửa những chỗ mình đánh dấu thành ID tương ứng của bạn.

Chúc thành công !