Nút like fan page facebook cho blogpsot đẹp và đơn giản
Rất đơn giản, bạn chỉ việc thêm đoạn code sau trên thẻ </body> là được.<style>Sau khi thêm vào bạn nhớ thay 2 link đỏ : https://www.facebook.com/kenhtemplate thành link fan page của các bạn nha. ok các bạn lưu lại là xong.
#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%);
}
}
</style>
<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/kenhtemplate' 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://www.facebook.com/kenhtemplate&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>
Mình vứa hướng dẫn các bạn cách tích hợp nút like fan page đẹp và đơn giản vào Template blogger. Bạn nào không làm được để lại comment bên phía dưới bài viết này mình hỗ trợ nha.
Chúc các bạn có nhưng blog đẹp và ưng ý!
Post a Comment
Post a Comment