Code khung nhận tin mới qua Email

[tintuc]

Đây là bộ CODE Khung Nhận Tin Mới Qua Email mà codeseo.net chia sẻ mình lưu lại hướng dẫn để khi nào cần thì dùng.

* Sau đây là các bước thực hiện:

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn code bên dưới vào trước thẻ ]]></b:skin>

#i-socialSub { width: 300px; height: 400px; background: whitesmoke; border: 1px solid #eaeaea; box-shadow: 0 0 2px 2px #ccc; } .i-subTitle { font-size: 20px; font-family: Airial; background: #f5f5f5; margin: 0 10px; padding: 10px 10px; border-bottom: 1px dashed #444; color: #222; text-align: center; } #i-subIcon { padding: 10px 0 10px; margin: 10px; border-bottom: 1px dashed #444; } ul.i-subIcon { margin: 0; padding: 0; list-style: none; -webkit-perspective: 10000px; -moz-perspective: 10000px; -o-perspective: 10000px; perspective: 10000px; } ul.i-subIcon li { display: inline-block; width: 55px; height: 50px; margin-right: -px; background: none; font: bold 36px Arial; text-transform: uppercase; text-align: center; cursor: pointer; padding-left: 10px; } ul.i-subIcon li a { display: block; width: 100%; height: 100%; color: black; text-decoration: none; outline: none; -webkit-transition: all 300ms ease-out 0.1s; -moz-transition: all 300ms ease-out 0.1s; -o-transition: all 300ms ease-out 0.1s; transition: all 300ms ease-out 0.1s; } ul.i-subIcon li a span { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 5px; display: block; width: 100%; height: 100%; -webkit-transition: all 300ms ease-out 0.1s; -moz-transition: all 300ms ease-out 0.1s; -o-transition: all 300ms ease-out 0.1s; transition: all 300ms ease-out 0.1s; } ul.i-subIcon li a img { border-width: 0; } .i-subText { font-size: 14px; padding: 5px; color: #444; font-family: Arial; font-family: bold; } .i-username { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtAcpLXKQFmr2vg-OUs_xs70NX-moBCNCiwXewncv4fufJ1iwvdDqGQtwVtM301UgT2oeMma2BMdIpb0ePF4nJKDdX1ILruBk8bEYBSpxP_7-QrGErowrXOoLEhYDfInl_JiDAnWSSU2A/s320/name.png) no-repeat 7px 8px; border: 1px solid #ddd; font-family: Arial,sans-serif; font-size: 13px; font-weight: bold; color: hsla(0,0%,27%,0.69); width: 225px; height: 25px; padding: 5px 15px 5px 28px; margin-left: 10px; display: inline-block; transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; } .i-email { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTfA6sVu6pTfAWgZT2Wyx9tPln7fYmHDDe8R7dDQBsk3uyaGaL-LbVYIjvph_H8zzbt167czxOpyWkD0MQICzpHD2b_iwSck65VxSsKPbaRby0gPnQtJ6OJsrYIW_Hv8ts9-9u0Njq99w/s320/email.png) no-repeat 7px 10px; border: 1px solid #ddd; font-family: Arial,sans-serif; font-size: 13px; font-weight: bold; color: hsla(0,0%,27%,0.69); width: 225px; height: 25px; margin-top: 10px; padding: 5px 15px 5px 28px; margin-left: 10px; display: inline-block; transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; } .i-username:hover,.i-email:hover { border: 1px solid #bebebe; box-shadow: 0.5px 1.5px 2px rgba(5,95,255,.1); } .i-username:focus, .i-email:focus { border-color: hsl(198, 100%, 49%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%); outline: 0 none; } .i-submit { -moz-box-shadow: 3px 4px 0px 0px #1564ad; -webkit-box-shadow: 3px 4px 0px 0px #1564ad; box-shadow: 3px 4px 0px 0px #1564ad; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5)); background: -moz-linear-gradient(top, #79bbff 5%, #378de5 100%); background: -webkit-linear-gradient(top, #79bbff 5%, #378de5 100%); background: -o-linear-gradient(top, #79bbff 5%, #378de5 100%); background: -ms-linear-gradient(top, #79bbff 5%, #378de5 100%); background: linear-gradient(to bottom, #79bbff 5%, #378de5 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0); background-color: #79bbff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #337bc4; display: inline-block; color: #ffffff; font-family: arial; font-size: 17px; font-weight: bold; padding: 8px 70px; text-decoration: none; margin-top: 10px; margin-left: 35px; text-shadow: 0px 1px 0px #528ecc; } .i-submit:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff)); background: -moz-linear-gradient(top, #378de5 5%, #79bbff 100%); background: -webkit-linear-gradient(top, #378de5 5%, #79bbff 100%); background: -o-linear-gradient(top, #378de5 5%, #79bbff 100%); background: -ms-linear-gradient(top, #378de5 5%, #79bbff 100%); background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0); background-color: #378de5; } .i-submit:active { position: relative; top: 1px; }

5. Chèn code sau vào nơi bạn muốn nó hiển thị, phía sidebar chẳng hạn:

<div id='i-socialSub'> <div class='i-subTitle'> NHẬN TIN MỚI QUA EMAIL </div> <div id='i-subIcon'> <ul class="i-subIcon"> <li> <a href="http://www.facebook.com/#yourID"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_ZxwmaUEccHrquuzbbGkZdcxzdQb0wFcz5QvRRA9dlVb_Ww1sKgXcmtky1B4zcsR5JndVTcziLHxyo_JDWHzD_mezj2CKCfpeo-yrZ1Af-ofsjjOA80enAqFzvvGEEsKcicUA3qCrlw4/s1600/facebook.png" title="Add to Facebook" /> </a> </li> <li> <a href="https://plus.google.com/#yourID"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrZxN-G8xYn0Xb3wsfyVOsNY9sUqiB9vOkNBVHdeDXJhOS7qA70AQUeIA9gYjIB5R_tcM87ODYq_eiCggpnQQh5GgO1BC4-JwNjhyphenhyphenpodItsy_cZ8sSQWX5I4rN3oaf_inxNotO5QlQSUv/s1600/google.png" title="Google plus" /> </a> </li> <li> <a href="http://www.twitter.com/#yourID"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyphenhyphenOGpbhCswxP76xWFAFGrjqdHTnHMJ4cNUH_8lYP8QXkQ98LvIbgT3r9qUU9-3_KsKnmkBaieHTWwzi1r-p_qyX7T_peK79_RLQftzNnSxUSSRBhP0pI9w4YDPIaKf2Zip0yv9EzIHoYI/s1600/twitter.png" title="Add to Twitter" /> </a> </li> <li> <a href="http://feeds.feedburner.com/#yourID"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhingAPFyMX4YW6x3Q0Epf_hAl4UqlXXbC2yjQa0RFHH5FG3k7xo0Gav_BOYgXz3tWcJPNaLx2hjtQklJ5ayMkYMeCVpDrKLkUd2DcEoSSc0VQUh2h-L43ggqoZyCJW0mwkWMnp5PTMmsyK/s1600/rss.png" title="Add RSS Feed" /> </a> </li> </ul> </div> <div class='i-subText'> <p style='padding:10px;margin-bottom:15px;font-size: 15px;font-family:Arial'> Đăng ký nhận tin mới hoàn toàn miễn phí qua Email của bạn. Bạn yên tâm! Chúng tôi không spam! </p> <form action='http://feedburner.google.com/fb/a/mailverify?uri=ccniny' class='i-boxForm' method='post' target='_new'> <input class='i-username' name='name' placeholder='Your Name' type='text'/> <input class='i-email' name='email' placeholder='Your Email Address' type='text'/> <input class='i-submit' type='submit' value='Đăng Ký!'/> </form> </div> </div>

Các bạn nhớ thay ID của feedburner trong bài viết này thành ID của bạn.

Thay #YourID bằng ID của FB - G+ của bạn

Nguồn từ Codeseo.Net

[/tintuc]