Tạo hộp đăng ký (Subscription) trên sidebar cho blogger

Hôm nay namkna sẽ giới thiệu cho các bạn một số mẫu tạo hộp đăng ký cho blogger. Tiện ích sẽ hiển thị tổng số người đăng ký, chứa liên kết RSS, Facebook và Twitter. Nó cũng chứa một mẫu đăng ký xinh đẹp, nơi độc giả có thể gửi email để nhận được cập nhật miễn phí từ trang web của bạn. Widget này được thực hiện tương thích để làm việc với tất cả các trình duyệt đặc biệt là với IE8.

☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Bố cục (Layout)
3- Chọn Thêm tiện ích (Add a Gadget) => Chọn HTML/Javarscip:
4- Đến đây bạn hãy chọn các mẫu bên dưới và dán vào widget HTML/Javarscip của bạn nha.

Style 1: Wordpress Subscription Form

View Demo

Ảnh minh họa:

<style>
    .namknabar{width: 100%; float: left;}
    .namknabar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
    .namknabar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
    .namknabar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
    .namknabar .subicons a{text-decoration: none; color:#333333;}
    .namknabar .subicons a:hover{text-decoration: underline; color:#333333;}
    .namknabar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpb1j-8q0i7NSzTI9IajCNFnm1vW2QzhBSiJOIqRnwPC-FCYFAwAZ_G6WyAFD0TxbK4_wlMB6iVJkFl53aPGfk4S-FyqxNltSq5mUlDJC6KeIQrFTZ38YTQ5wQadE6DXZoR1YAyYa3uk/s1600/rss-namkna-blogspot-com.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
    .namknabar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPkI2BXK9EyUayGPqHqTXOiUms2GvOIO0jFDVdKMREi__XLpZYp4uNpR24C7chvDr1hKAGwgtH10lj1QULOgP881Pp7GegkIkLRBMRGqQhn7MZsPeCVYqBAYRXny9KzD0jDYZHFIP1H6g/s1600/facebook-namkna-blogspot-com.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
    .namknabar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8rl_EITnTH5fN00tWmx-VruE-mpYD0SZejxT-Fy2u-IUiHZVio_T6yUzHwpt8xVyk_VwRNb3m-vfOPDrHFXZXBhADdhsztECCarM30N-hAAhZ67ELzSC9EPBvkvpJqLUwwAmeg4aM8Q/s1600/twitter-namkna-blogspot-com.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
    .namknabar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
    .namknabar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYUeiV360D5hIp6dXjrl3t8JmSF-RHR_zUIRKgUPIe6u2vuHfu1XEeF4n8WMIuxTwsk5KuopzZ-SXewkqKKS099cTHLefgsNgzVXe6_wptlQD49zf2eb1i_soiGS-WC7TeTJrFYt8EMEc/s1600/email-namkna-blogspot-com.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
    .namknabar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
    .namknabar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
    .namknabar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
    </style>
    <!--[if IE 7]>
    <style>
    .namknabar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
    .namknabar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
    </style>
    <![endif]-->

    <div class="namknabar"><div class="count">Đã có<span class="bigcount">1000+</span> người đăng ký Namkna</div><div class="subicons"><div class="rssicon"><a href="http://namkna.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/namkna" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/namkna" target="_blank" rel="nofollow">Twitter</a></div></div>
    <div class="emailsub">
    <div class="emailicon">Mọi cập nhật sẽ được gửi tới Email</div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=--namkna--', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Điền Email của bạn..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Điền Email của bạn...&#39;;}" onfocus="if (this.value == &#39;Điền Email của bạn...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="--namkna--" name="uri" type="hidden" /><input value="OK" class="joinemailupdates" type="submit" /></form></div></div></div>

Trong đó:

- Thay http://namkna.blogspot.com/ thành URL blog của bạn.

#57ABFE và #0080ff là mã màu của nút đăng ký

- Thay 1000+ thành số người đăng ký blog của bạn. Hãy cập nhạt thường xuyên bằng tay. Để đổi mã màu của chữ này hãy thay đổi mã #F17C18.Nếu không muốn cạp nhật bằng tay hãy chèn scip thống kê của feedbuner vào nha.hãy chèn code đếm tự động của feed vào bằng cách đăng nhập vào feedbunner chọn tab Publicize => Feed count => chỉnh sửa xong sau đó copy đoạn mã như hình thay vào chữ 1000+.

- http://www.facebook.com/namkna thay thành URL trang face book của bạn.

- http://twitter.com/namkna Thay thành URL trang cá nhân trên twiter của bạn.

- Thay --namkna-- thành ID feed của bạn.Nếu blog của bạn chưa có feed hãy xem cách đăng ký tại đây. Đăng ký xong bạn bấm vào Edit Feed Detail để lấy ID như bên dưới..

Thay dòng title Điền Email của bạn... theo ý muốn của bạn như: Enter your email, Enter Email,...

Style2: Subscription and share

View Demo

Ảnh minh họa:

<style type="text/css">
#subscribe-namkna {
      overflow: hidden;
      margin: 10px 0 0 0;
      }

#subscribe-namkna a.subscribe-sec {
      display: inline-block;
      display: -moz-inline-stack;
      width: 40px;
      padding-top: 38px;
      zoom: 1;
      }

#subscribe-namkna a.subscribe-sec:hover {
      color: #660000;
      }
</style>

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=--namkna--', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Cập nhật sẽ được gửi tới email bạn</p><p><input style="width:180px" name="email" type="text" value="Điền Email của bạn..." onclick="this.value=&#39;&#39;;" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>

<p><div id="subscribe-namkna">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsQ_GZpe_4gCu7Ox62ml6xRoRbEVagFXFX9xeKTQ1pWTWp_nDpdPZkj5R8oAhAjnZaaQdCyN5NiC_-POkLBgsol6bTWe0iX44jJei0CVFZN3PH0-Wandg4yROg_pk-o-ZGJE0yxUBxoY/s1600/delicious-namkna-blogpsot-com.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/namkna" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAg_RN4FuaNKY5w35auw82syDcMURLPyZfI0X0IvJLS7R3bhFIfv4VQhNaU6K8Fr5UZUD3NnWYD2CcMilbJzGv71StsJa9CMI0FGGjpHkhuo6iRPiArDO_vshv2EFxd0QvaozkO2Us-I/s1600/twitter-namkna-blogspot-com.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiskqL01PFJZ2207Qk30KhVs0AKshjelzsW-C-GC04xIdyAnJwlsnzTzKflebqeasWJH5SlMeHajDo0OIxNArbAilx0xI9ut3BptLq0S-8weG2UGyx48atGW_GC1ru0e4_nTKxXyw6t_UI/s1600/digg-namkna-blogspot-com.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/namkna" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqlKgI7HYV8VC6oivtsu08EmU3A3MqYMJ6T8R8sjyDKDjD7sl3PEAQl_EQ_h04w3awp6e6JP8IMgwTZCoRhtRr8ymJde2lF3Z1VK5UC5ZLC0eRGj5PTtbf4MjnOsj7qRsj4ZPe-0VgoJE/s1600/facebook-namkna-blogspot-com.png) center top no-repeat"></a>
<a title="Stumbleupon" href="https://plus.google.com/u/0/115432539722668400541/posts" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjchnwOjtjKeEMTl7iBTxHLYVlSY3bebeHTI51uEGima2w_BszSbPN2Dpa882xWpxbvcWIgommNhcUVoSLAXHE5tOA3bFc_tuQKepYEp4ZAmbzbEvifayNMAXz5xoj41pKD1I0-5OnHR4Y/s1600-d/Google-pluss-namkna-blogspot-com.jpg) center top no-repeat"></a> 
<a title="RSS Feed" href="http://feeds.feedburner.com/--namkna--" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHz1oc3ifB5G-wpDzxUuoOCIBIc_hVcBrb5ABzUVAsWSLsHtpCXf7goysxBJzVNmg9J1pjN4I4Ot9Os1brKqLX4gL7gheic_nii54p3dVKh1Fwr86a0g2aDgoxjDO12IGy1U5zpSrxf5E/s1600/rss-namkna-blogspot-com.png) center top no-repeat"></a>
</div></p>

</form>

Trong đó:

--namkna-- với ID Feedburner của bạn.
DELICIOUS-USERNAME với tên người dùng ngon của bạn.
http://twitter.com/namkna thành URL trang cá nhân twitter của bạn.
http://digg.com/users/DIGG-USERNAME là URL trang digg của bạn.
http://www.facebook.com/namkna là URL trang facebook của bạn.
https://plus.google.com/u/0/115432539722668400541/posts Là URL trang google + của bạn.
Chúc thành công!

Style3:Kết hợp nút like google+, twiter.

View Demo

Ảnh minh họa:

Tiện ích Subscription kết hợp share cho blogger

Xem cách thực hiện tại đây.

Style 4: Cute Subscription

View Demo

Ảnh minh họa:

Mẫu này đơn giản chỉ bao gồm nguyên ô đăng ký.

<style>
.namkna-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvK9FtSXW8FpUfyAhh1urclP8ksWgGvwGya6gX-eFnaYsvNGA1sjsz4NfeufIyHFfkdh1d_cv0NVZ9bMHXk8DO8gwBeneLiCVap3qkwDkoxSvZ8EZeHD_Cz6rlUtNhQ4cNlfsYNrzZK2Q/s1600/email-namkna.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.namkna-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.namkna-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;  
width:170px;
color:#666;}

</style>

<div class="namkna-email">
Đăng ký bằng Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=--namkna--', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Điền Email vào đây...&quot;;}" onfocus="if (this.value == &quot;Điền Email vào đây...&quot;) {this.value = &quot;&quot;;}" value="Điền Email vào đây..." type="text" />
<input type="hidden" value="--namkna--" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="namkna-emailsubmit" value="Submit" type="Đăng ký" />
</form>
</div>