Widget Subscribe & Socials đẹp cho Blogspot

Loading...

Một hộp khung liên kết đến các kênh mạng xã hội đẹp được hiển thị từ Blog của bạn, kèm theo đó là Subscribe giúp người theo dõi Blog của bạn nhận được thông báo qua Email khi Blog của bạn có bài viết mới. 
Bài viết này ITViet360 chia sẻ với bạn 1 thủ thuật thêm Widget Subscribe & Socials cho Blogger. Giúp bạn tích hợp được cả 2 yêu cầu chỉ trong 1 Widget. Khá tiện lợi.

Demo trực tiếp TẠI ĐÂY

Hướng dẫn Widget Subscribe & Socials đẹp cho Blogger

Bước 1: Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascripts
Bước 2: Dán code dưới đây vào tiện ích vừa thêm:
<style>
#BTsub{
width:280px;
padding:70px 10px 25px 10px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7TKBgZVEpq9QDmnXOekdmk66z8umS4-fy-8TyrXylRnp5M7LIiJ-scMfWVBr0P5H2NxOfh2bUyyvfACzencsByssJqOl9udHSNo8mkNT5RTTzDWYknrZsEBKhN_F2MNhoOoxcTQcrvw/s1600/bloggertricksdotbizemailbg.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
p#BT_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#BT_socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
BTform.emailout{
margin:20px;
display:block;
clear:both;
padding:20px;
float:right;
}
.BTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidJsYJ_-HdnzFf6vQuT4YZxo4H_aW-jDHU_4l501unOkjFpf034QT5XoZhcOz1L5ej_ZjXhcr0XSI-KcqN7Ly60HsJYXFv9phQlnOCGzyhikoA4xn2pFpEsTFHxb7AL_xsmLX1lsF1mws/s1600/BTMAIL.png) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:130px;
height:20px;
}
.BTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>

<br />
<div id="BTsub">
<center>
<div id="BT_socialicons">
<a href="http://www.facebook.com/itviet360">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgZD1wU9cYpvoeUS-1VCus8KrK7VBmiRjJAHE6bPAJpKqN4Vtt1_2zy9X6z9WygRjW9SG5s9WOhGQG1Av33xGCEM-_UrjDihJwCHkAoUFw9jdnVFSuyOMZGLyNfmTjqyfebPwHY2V34RI/s1600/bloggertricksdotbizFB.png " /></a>
<a href="https://plus.google.com/+PhongVũSEO">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglm1yFIyvZ6XZcCXapV0E7JcWNWvYJuG4jvQhuDbDukZkHYtp_edLH55uZ7t7EZjeB-2-RKlgRH6B00Cfs9UCZPpI5Zj16B667V5C_VudbH7HrNVN4wops77_M17F1HzrFw5Fr1dPrkiU/s1600/bloggertricksdotbizGP.png " /></a>
<a href="http://www.twitter.com/phongvu18nd">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JBV1W_6f99xQpcuQ0L4KXsYnawX0kg8o2pf4dH7N34aQQPL2IpFehHDlSQ1hDU33zNr_gePMlUiklPGIYUEvCgZzmg9GCzp-Xhv3-HUfibWbODg37sGX6cl4Zb66cdDaE1uFVtdW2JM/s1600/bloggertricksdotbizTW.png " /></a>
<a href="http://pinterest.com/itviet360">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE5zuzvD-0uxquSZ8kJvnY6axoWWmYXDLBfR7qWx7H3mzct4fNZYRJHJe30lvUJBAYhWZwDlQTnZd-O0kqea1EmkCgrNIWQ-8jWuudAjSbSlL0Q93b2p5slx-ez5r6fW2xG_UFE91W3jA/s1600/bloggertricksdotbizPT.png " /></a></div>
</center>
<div style="color: #666666; font-family: Georgia,Times New Roman,Trebuchet MS; font-weight: bold;">
Nhập Email của bạn để theo dõi những bài viết với từ ITViet360!!</div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailout" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=itviet360', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="itviet360" />
<input name="loc" type="hidden" value="en_US" />
<input class="BTtextbox" name="email" onblur="if (this.value == "") {this.value = "Enter your Email";}" onfocus="if (this.value == "Enter your Email") {this.value = ""}" type="text" value="Enter your Email" />
<input alt="" class="BTbutton" title="" type="submit" value="Submit" />
</form>
<div style="color: black; float: right; font-size: 10px;">
<a href="http://www.itviet360.com/2014/09/widget-subscribe-socials-dep-cho-blogspot.html" target="_blank">Subscribe</a></div>
</div>
- Trong đó:
+ Các giá trị bôi vàng được thay thế bằng kênh Socials Blog của bạn
+ Giá trị bôi xanh được thanh thế bằng Feedburner của blog bạn
Bước 3: Lưu Widget và xem kết quả.
Chúc các bạn vui vẻ!

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger