Loading...
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/JavascriptsBướ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(http://1.bp.blogspot.com/-8CSaNzPhXNY/UCjB8Ubq9HI/AAAAAAAABoA/yQm1svSk2pk/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(http://1.bp.blogspot.com/-EdS5yBHk8OU/UCi9EKO8SFI/AAAAAAAABnY/avFC1s1asZU/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=" http://1.bp.blogspot.com/-7H0aiZ-89Uk/UCM_Wk-hkeI/AAAAAAAABh8/IXJ9NDN6NzQ/s1600/bloggertricksdotbizFB.png " /></a>
<a href="https://plus.google.com/+PhongVũSEO">
<img border="0" src=" http://2.bp.blogspot.com/-88F1IMlPog0/UCM_cDdjh5I/AAAAAAAABiE/vexbC6LvSe8/s1600/bloggertricksdotbizGP.png " /></a>
<a href="http://www.twitter.com/phongvu18nd">
<img border="0" src=" http://2.bp.blogspot.com/-yGQ699YjaIg/UCM_mbpqjiI/AAAAAAAABic/oXlWlYXmIoo/s1600/bloggertricksdotbizTW.png " /></a>
<a href="http://pinterest.com/itviet360">
<img border="0" src=" http://1.bp.blogspot.com/-9xEgooMeW3I/UCM_hw_I8uI/AAAAAAAABiM/Hc7FJplcwjY/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...
0 nhận xét:
Đăng một bình luận