Tạo Khung Theo Dõi Bài Viết Qua Email Đẹp Cho Blogger

Tạo Khung Theo Dõi Bài Viết Qua Email Đẹp Cho Blogger

07:07
Khung đăng ký nhận bài viết mới qua email được rất nhiều blogger nổi sử dụng, đây là cầu nối giữa độc giả và những người quan tâm đến bài viết được đăng tải trên blog của bạn. Đây là hình thức nhận bài đăng qua mail phổ biến đồng thời thông dụng nhất cho tới thời điểm hiện nay. Nếu bạn cũng có một blog thì đừng ngần ngại hãy bắt đầu ngay hôm nay cài đặt nó vào blog của bạn.


Hình Minh Họa:



nhan-tin-moi-qua-email


VIEW DEMO

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/AVvXsEhpgXG79UzFcEMDnVBEjW_6rP_YWGIc4oiy6eGoFNpAniCZFZCoByvc4MD4XW-Yj1hbXQ3wzYuut39nFV7zVSSCbu3Ma7WXHpY0HrfXNDLWOXqH5CtPQXS4STgMdQOTgxyzecJS3N0nq74/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/AVvXsEjOFhrOL5aiQo574C6QrFwpZRFS0qxZwMY78joPwFHpCbyAKSEQwIiBlc8DBrKiXkFUHIzh1L6s8TbIWBZ7jyYsRl1kZclDfEre7T2S7FxSlIDGC9IrCo-giqUaZEz7p2QDTnYDFlG83vE/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/AVvXsEh_c3jyzH7Aj2H1WEbcGZPpd6BP9-KR4L6DwfTDPmke-7Ssj8b-pvcW8tWUMIJfi_fYnAkkvCb8u3oU8xkTZYytWy_C3RRp8E0UE7f6XG5-jjAK5vYJAVHRLSf1Us6v6ZiGPgvUObeOKiMX/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/AVvXsEh30w2FepIxKPBfXARaA6fl5mA5WostOWQT4L_DEsSMww__5FYv1vxK4p6SRQ_RNc-YD0y0qe6qNA6H8ArSWxV6HWn_2UYWVIUpAkkfeStM4RSV0jxO8mCNpGVuuWhs5egHj0ibgTjFHuzv/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/AVvXsEjmxf2Y-KAwGHMQ8MK_56GJL2Wn-U5b5Pnl05GZ66O9Mk7XQoJRBS4fkRI8cypCYBiX5rrfenWZqA6G9ZWeP3KWAGiXkvY8nYyR5DqPwBPt8BB3bMQj-HzIzJs1ZubR0eZt6uJ2xQKCAAct/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/AVvXsEgD3vi4qu8BCWWfbiUaW8VNr_xpefrPHRKNCu7DUm81ndWxaLCqo0fikxRo0-KMrIgR2kzKAiUpuV-83omdHTVQk_2QcGvHBMashizv28oUELyeCpDRai1eKzfWUZaCkd3YMx4lMuT8hK7p/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=KjMagic' 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.
Vậy là xong. Chúc các bạn thành công!

Share this

Unknown

Bài Viết Cùng Chủ Đề

Next
« Prev Post
Previous
Next Post »
Đăng ký: Đăng Nhận xét (Atom)

Slideshow chạy ảnh đẹp

anh bia facebook tinh yeu dep buon anh bia facebook tinh yeu dep buon anh bia facebook tinh yeu dep buon anh bia facebook tinh yeu dep buon
1 2 3 4