| Vì sao bạn cần chèn nút Like fanpage vào website cũng như Blog của mình !
" Đơn giản vì Fanpage sẽ mang lại cho bạn nhiều thành viên trung thành với Website hay thương hiệu của bạn hơn bởi tính phổ cập của Facebook với mọi người. Giúp trang Blogger của bạn ngày càng được nhiều người yêu thích và có lẽ đó cũng là niềm vui và tự hào của mình về chính trang Blog của mình."Nào chúng ta bắt đầu thôi nào. Trước khi bắt đầu bạn lên sao lưu dữ liệu của theme cho an toàn nhé. phòng trường hợp các bạn làm sai :)☺.
Các bạn vào Mục
Template > Edit HTML và Past đoạn CSS và trước thẻ </style>
#open-fb{background-color: #FFFFFF; border: 4px
solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height:
auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width:
auto; z-index: 10;}
.close-fb{color: #333!important; position:
absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px;
text-align: center; font-size: 11px;}
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
|
Và bây giờ bạn tiếp tục past đoạn code này vào trước thẻ </body>
<div
class='slideUp' id='open-fb'>
<a
class='close-fb' href='#close-fb-like-box' onclick='hide('open-fb')'
title='Close'><i class='fa fa-times'/></a>
<div
class='fb-like-box ' data-header='false' data-height='62'
data-href='https://www.facebook.com/manhdien.rtml' data-show-faces='true'
data-stream='false' data-width='187'><span style='height: 62px; width:
187px; '><iframe allowTransparency='true' frameborder='0'
scrolling='no'
src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmanhdien.rtml&width=187&height=62&show_faces=false&colorscheme=light&stream=false&border_color&header=true'
style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div></div>
<script
type='text/javascript'>
function
show(target) {
document.getElementById(target).style.display =
'block';
}
function
hide(target) {
document.getElementById(target).style.display =
'none';
}
</script>
|
Note: các bạn thay /manhdien.rtml thành tên ứng dụng của bạn nhé
và bây giờ bạn Save template và xem thành quả của mình thôi nhé.
Mình hy vọng là các bạn thích bài hướng dẫn này, nếu bạn có trục trặc trong quá trình làm thì hãy comment ở phía dưới mình sẽ cố gắng giải đáp mọi thắc mắc của các bạn. Cảm ơn bạn .
" Nếu thấy bài viết hay và có ích thì hãy like trang hoặc gửi mail để nhận những bài viết mới nhất nhé."
Đăng nhận xét