Thêm hộp đăng ký email ngay trong tiêu đề Blog

Chào tất cả mọi người, rất vui mừng vì gặp lại mọi người trong bài viết này. Trong các bài viết trước tôi đã giới thiệu các tiện ích như: Tăng truy cập Blog từ mạng xã hội bằng Socializer Widget , Tạo Widget đăng ký nhận bản tin qua email trong blogger. Trong mẫu mà tôi muốn giới thiệu dưới đây là hoàn toàn độc đáo, đây là widget đăng ký email với biểu tượng xã hội nằm ngay ở tiêu đề mà tôi muốn chia sẽ. Đây là tiện ích tốt nhất để tăng thuê bao đăng ký qua email ngay lập tức và rất tiện dụng với người dùng. Trong phần đầu tiên của tiện ích này, nó được hiển thị cho tất cả mọi người, và có rất nhiều cơ hội mà bất cứ đọc giả nào cũng có thể đăng ký thông qua tiện ích này. Bạn có thể dễ dàng nhận thấy rằng tiện ích này cũng đã thêm vào các widget thuê bao ngay trong tiêu đề bài đăng. Quá trình cài đặt tiện ích này không có gì là khó khăn cả, nó rất dễ dàng. Nhưng trước khi hướng dẫn cài đặt, tôi sẽ giới thiệu qua về widget này.

Thêm hộp đăng ký email ngay trong tiêu đề blog bằng nút xã hội là gì?

Đây là hộp dành cho đọc giả đăng ký nhận bản tin qua email được tích hợp trên tiêu đề bài viết giúp cho các đọc giả đăng ký dễ dàng hơn. Tiện ích này được thiết  kế bằng phong cách đẹp, trong đó các nút truyền thông xã hội hoặc các biểu tượng cũng có sẵn để tăng tín xã hội hóa bài viết. Widget này được chia thành hai phần. Một phần của tiện ích này là có mẫu đăng ký Họ và tên và Email được tích hợp cùng với các nút đăng ký. Không tồn tại tin nhắn rác trong khu vực này. Trong khi phần bên phải của tiện ích này có sẵn các nút mạng xã hội như Facebook, Twitter, Google+, Feed burner và Pinterest. Widget này rất rõ ràng và giúp blog tăng địa chỉ email đăng ký từ bạn bè và người hâm mộ blog. Bởi vì Widget này sẽ được tích hợp trực tiếp trong tiêu đề bài viết, và đây cũng là nơi tuyệt vời để thu hút đọc giả đăng ký ngay.

                         Đọc thêm:      Cách nén JavaScript và CSS stylesheet trong Blogger?

Nó trông như thế nào?

Hướng dẫn cài đặt

• Đăng nhập vào Blogger và Chọn Bố cục (Layout), ấn vào Thêm tiện ích ở Sidebar bên phải trang web.
• Chọn HTML / JavaScript và dán đoạn mã phía dưới vào hộp đó

Code để dán vào 

<style>
 #weblog-topsubsbox {background:#FFFFFF; width:940px!important; height:90px!important;margin-top:20px; 

padding:10px;box-shadow:5px 5px 5px #ccc; border:1px solid #ddd;overflow:hidden;}
  #subscriptionsection {float:left;border-right: 1px solid rgb(168, 168, 168);padding-right: 

56px;margin-top: -10px;padding-top:9px;}
  .subsbox-heading {font-size:20px; font-family:&#39;Source Sans Pro&#39;; 

text-align:center;text-shadow:1px 1px 1px #ADCA06;font-weight:bold;}
  .topsubsboxname {background:#FFFFFF 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBhFsilYBGw1gKdY0dBjsYx1oQZAYRdye6geVvcudiobCJaw7ZS38fUOEnsANH17eXQIrOjq_wovixafIJoIZEjSn59NBdzH8Fa1VEAfqffd45JRt8HYC_x-nRyD5R98kQT1KTsSGWmYT/s1600/name1.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:150px; margin-top:10px; height:24px; padding:5px 

15px 5px 28px; vertical-align:top; display:inline-block;margin-left:15px;}
  .topsubsboxemail {background:#FFFFFF 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiNXdoOSTfnrmCNJma67i4zLYvqjQmY8ghya1Sd3Qo7YNwbym2-dzkLkMkk8kUzLt7AHmRMPbehUl1qZasDqq5KdYD863qaZEXAS7VfqAmpNvS_719sK9bs_gR67ChCzH6qFOq7vK6mXTw/s1600/2.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:150px; height:24px; margin-left:5px; 

margin-top:10px; padding:5px 15px 5px 28px;vertical-align:top; display:inline-block;}
.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #C0C0C0; box-shadow:0.5px 1.5px 2px 

rgba(5,95,255,.1);}
.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #F8E5BD;-webkit-box-shadow:inset 0px 1px 

0px 0px #F8E5BD;box-shadow:inset 0px 1px 0px 0px #F8E5BD;background:-webkit-gradient( linear, left 

top, left bottom, color-stop(0.05, #811F8E), color-stop(1, #CDC035) 

);background:-moz-linear-gradient( center top, #811F8E 5%, #CDC035 100% ); 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#811F8E&#39;, 

endColorstr=&#39;#CDC035&#39;);background-color:#811F8E;  margin-top:12px;  

margin-left:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px 

solid 

#84bbf3;display:inline-block;color:#FFFFFF;font-family:arial;font-size:15px;font-weight:bold;paddi

ng:6px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover 

{background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #CDC035), 

color-stop(1, #811F8E) );background:-moz-linear-gradient( center top, #CDC035 5%, #811F8E 100% 

);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#CDC035&#39;, 

endColorstr=&#39;#811F8E&#39;);background-color:#CDC035;}.topsubsboxbutton:active 

{position:relative;top:1px;}
  #socialsection {float:left;margin-top:20px;}
  .socialheading{font-size:20px; font-family:&#39;Source Sans Pro&#39;; 

text-align:right;margin-right:20px;text-shadow:1px 1px 1px #ADCA06;font-weight:bold;}
  .socialicons ul {list-style:none; display:inline;float:right;margin-top:10px;margin-right:10px;}
.socialicons li {opacity: 1;float:left;padding: 0px 10px 0px 0px;}
.socialicons li:nth-child(6) {padding: 0;}
.socialicons li a img{height:49px;width:49px}
</style>

<!-- Top Subsbox By Www.YOURWEBSITE.Com Start -->
<div id='weblog-topsubsbox'>
<div id='subscriptionsection'>
<div class='subsbox-heading'>Subscribe For Free Updates!</div>
 <form action='http://feedburner.google.com/fb/a/mailverify?uri=
'YOURWEBSITE' class='weblog-subsbox-form' method='post' target='_new'>  <input 

class='topsubsboxname' name='name' onblur='if (this.value == &apos;&apos;) {this.value = 

&apos;Your Name&apos;;}' onfocus='if (this.value == &apos;Your Name&apos;) {this.value = 

&apos;&apos;;}' value='Ten'/>
  <input class='topsubsboxemail' name='email' onblur='if (this.value == &apos;&apos;) {this.value 

= &apos;Dia chi email&apos;;}' onfocus='if (this.value == &apos;Dia chi email&apos;) 

{this.value = &apos;&apos;;}' value='Dia chi email'/>
  <input class='topsubsboxbutton' type='submit' value='Đăng ký!'/>
 </form>
  <p style='margin-top: 8px;font-size: 13px;text-align: center;font-family: Source Sans 

Pro;font-style: italic;font-weight: 600;'>Tôi&#39;sẽ không bao giờ gửi thư rác</p>

  </div>
<div class='socialicons'>
  <div class='socialheading'>Trở Thành Fan Của Trang!</div>

<ul>
<li><a href='https://www.facebook.com/ID CUA BẠN'><img 

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiimZzn2tX1Ky36CrBB6Ks0gRRHUuVR5vyPpJ3ny2eB9aEmseX_ilnO3K__77nf12Ch2876pKG0hLu7j5aSN2kpIWPBwyNaGJEr5pkMU9Y457-ff1uE9G1rRifunfZMlKQOoR5UuUGMFq0h/s1600/facebook.JPG' 

title='Facebook'/></a></li>
<li><a href='https://twitter.com/ID CUA BẠN'><img 

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoga2DlH-GhXhMeU1-9vwBAfbQVFOWwGlpcE6D0Oi3Hu2FdwV4bS4wfqlM_uLac7j8gu0LGd-g3ETQ4kDcYQJaUf3g4RtGfB8XNWGKGcHK3rJ-sSqcQqNslJWPcwV8R7_TiWlmhVLSFAOk/s1600/twitter.JPG' 

title='Twitter'/></a></li>
<li><a href='https://plus.google.com/ID CUA BẠN/'><img 

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrGgyM6v20jDnJngCPfegfeg6_JIzEh96eDQDU4htQORrTWpzh0mujhRFQqs1-XngF1xCiiikqZNnfvPl9ypVpYR1jx3_dQ3JmeA5wqdoeUcPc-AEm-y3o4bKbEyRNrvb8Hc4wJOGuMRwr/s1600/g%252B.JPG' 

title='Google +'/></a></li>
<li><a href='http://feeds.feedburner.com/ID CUA BẠN'><img 

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXY7KArB990hgXGKCLgkiOdPK7QnxebyEBkpjywvFDwil2Q_OWGO-K6IDYwn9KjexPZHSJejLPAeXzcpuKKZEZ91OsTB0B-9tRaaRqvIaG1fW3gACNwZ3Z27aIUKFu7P2DGOhuceT15P7/s1600/rss.JPG' 

title='Rss'/></a></li>
<li><a href='http://pinterest.com/ID CUA BẠN/'><img 

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8w0n8ChrgtRdo6ifs2Ro8rFuYlt7iUjjA1R1k4QCXoajS2AEgqYMR8Ws8ZCdPs2BzaqkKHhf781sBaHBSgFspFKE6M4Lpontf9qSQL2MPCmdBmp720pdTfnL-gltgm_P2TGP4OTAYnkme/s1600/pintet.JPG' 

title='Pinterest'/></a></li>
</ul>  </div>
    </div>
<!-- Top Subsbox By Weblog 247 End -->

• Thay thế các dòng Màu xanh thành địa chỉ URL ID của bạn.

• Sau đó nhấn "Lưu" để lưu lại. 

Chúc các bạn sáng tác Blog của mình được tốt hơn. Nhớ lưu https://webblog247.blogspot.com để theo dõi bài viết mới và sử dụng khi cần thiết.

                        Đọc thêm:     Công cụ sửa lỗi ngữ pháp tốt nhất cho Blogger