Tạo khung Subscribe đẹp cho Blog

Lê An    3/08/2014    Subscribe , Thủ thuật blog    Comments   

Tiện ích Subscribe thường được dùng nhằm giúp người đọc tiện theo dõi  bài viết qua mail của mình. Tiện ích này rất hay được sử dụng các Blog/web.
Hôm nay TyniSoft sẽ gửi đến các bạn một tiện ích Subscribe thật đơn giản và đẹp cho Blog/web của mình. Mẫu Subscribe dựa trên Blog Duypham và Namkna sử dụng

HTML

1. Đăng nhập vào Blog
2. Vào Bố cục (layout) => Bấm chọn mục Thêm tiện ích (Add widget) => Trong danh sách các tiện ích của blogger bạn chọn tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào.

<style>
.pam fbpdc, ._4xn4{overflow: inherit;z-index: inherit;}
.wdt_button{float:left;margin:5px;z-index;9999}
#newsletter .text,#newsletter .submit{float:left;background:#5C5959;font-size:12px;line-height:16px}
#newsletter .text{border-top:0;border-right:1px solid #3e3e3e;border-bottom:0;border-left:0;border-radius:7px 0 0 7px;padding:9px 10px;width:170px;height:16px;color:#eee}
#newsletter .text:hover,#newsletter .text:focus,#newsletter .submit:hover{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#066}
#newsletter .text:focus{outline:0}
#newsletter .submit{margin:0;border:0;border-radius:0 7px 7px 0;padding:9px 0;width:65px;height:34px;color:#999;cursor:pointer}
#newsletter .submit:hover{color:#eee}
.namknabar{margin:0;float:left;background:#fff}
.count{color:#333;font-size:14px;font-weight: bold;height:35px;vertical-align:middle;padding:0;border-bottom:2px solid #e6e6e6;margin:10px}
.subicons{border-bottom: 2px solid #e6e6e6; margin-top:-15px;height:80px;float:center}
.emailsub{padding:0; float: left; margin-left:10px}
.emailsub .emailicon{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAABOxJREFUSImdldtrXNcVxn/77H3mcmZ0iaRaUWJbtoU1kqwoMYndivQlUCi4L6WUaSmUkpJA6iYWfek/UWixc8MvFbTQhyEE/GIILeQlqWncNo5rSTZyajlqFEuqLGk0ozm3vVcezsiV6ji3BYvD2ues71v72/uspfgCOztd+0lHuXhGa92/e91au7zVaJ2berb6p8/LV5/38tVarSwt9cr4yNBPg0LeE2knKdgOI3ft+od/VEV58ZfVauMrE5y7eDGvVhqvP31i4tnjY5XP/Ob92Ru8e/nqtOwr/+LMqVPRlyY4d/FiXpY3X/v2ieM/f2KsQmod4mRvoqcw2uPK7A3eufz+71V/1+nPItH/vzA9PV2Im/Ly5JMTz02MDJOkFuccAnvcOYd1wsPf6MP3zfGP5hf7f/T97/35woUL6QN3UKvV9FLTnZt8Yvz048dGSVKLyN7K75NAKXyj+WBmjktXrr32SMk7U61W7X0EtVpNf7zlfvfN48demhgdIU0t7gvAd8zTPsZors5e52///ODlRzu8X+2QKIDz58/7Ya7rN09NjE6NDQ+3wfduT3YipQAveyoPXIKK76KiVfygj5nbG/z96szZgZL362q1GhsRUa/8oTZ18rGxqWOVCs0wwYkCFCIOXJq5JBlYso4Xr6KjFVS6hnYttAdaG+KNEo8N/QCt9dR7V/61KCK/VWen3zi6r6fz0vjI0V7tgbINfNnGqIica6LtJp6to20dLSHa+Gi/jJfvQJk8ngJcE8/vJFydYVGdJAzGmZ2bXVu5uzVp0tT29vQ81NtcnUOtvk05KKELmmLBEBSK+MUyXq4TL/coXi5AIWAbuPguhItItIaEq0hwAF/D/NwcpcOH6O3p7l1a2eg1ltjv7e7kydEK0ZKQT24hSmf6eho8jVIRkEB8F1yC2BDSCFwCngEdIC4GVWL08ABHTozwj2vXscS+8ZyW1KagO7A9k7Tm3yFnlyHXh/KLoEtgimDyGZg4kOzARVw7thCtEZeH6T/wDACpdXhOi7fnTue6sYMvkOh94CIQAbGIS8DGkLYgDcGGWewScCnKRcSUcAOn8II9PRGvXQoOsGkCwUHiwRdICJC0idgw86SFJNuZpy3EtsBFSNIkUV0kg6ch34dNY1wb838E7dgJiI2hOEj0yM9w5FBpHdJtxDYycJsRkLQgqSPkifY/D6UjSBpnGLv+T3OPwIF1ggeIi9AdFdZbPyS4M01g7uC8fKa9EnAWZSNaNs/2wI8pdlawaYQCXBtrD4GQge80NaM1W/UNbnycZ+LQS5Q6FB67j0tQ4ogaMLOQUCluUC4FpNbew5LdBIjgxGFThzEe65tb/HthkaNH9hP09rEW2nYZ964DAKU+zVH1X67fvMXQoYN0lANs6nDi7ulkdvqMtRnrVqPJ4n/uMDx0gO6uDjbqWw+cShsxPNTdRWVIcev2JxzY/zCFQrGNlWUZv2gQcVjr2G612Nisc3hwgCAIWN/cBvXgsSfA+maTUhBw+OAAK2ubdHdDIecj4vCLBrMwf1N96/Fx4iQmjCK6OstYUazXG7vEeLAJENcTjNZ0dpUJo4g4iTHGsDB/U6me/v6Tf3n73UtjQ4e87TDMlP5yY+B+a+82KBSY/XDBfeeZpycNxiz99b3Lb966/dF3Re4foV+LR2E/WV5+C2OWPgULmnlzs3GSFwAAAABJRU5ErkJggg==) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin-left:0;line-height: 15px; vertical-align:middle; font-size:14px; color:#333; }
.emailupdatesform{margin:0;float:left;width:100%;margin:10px 0 10px}
</style>
<div class="emailsub">
    <div class="emailicon">Đăng ký ngay để nhận bài mới hoàn toàn miễn phí qua email của bạn</div>
    <div class="emailupdatesform">
    <form action='http://feedburner.google.com/fb/a/mailverify' class='right' id='newsletter' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=tynisoft","popupwindow","scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input class='text' name='email' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Enter your Email address...'/>
<input class='submit' type='submit' value='Đăng ký'/>
<input name='uri' type='hidden' value='tynisoft'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div></div></div>
</div>
<div class='clear'></div>

Tùy chỉnh:Thay tynisoft thành id trang feddbunner của bạn.

Demo