Floating Social Bookmark

By Unknown Posted at 8:13 AM Thủ Thuật Blog 0 comments

Floating Social Bookmarking là gì?

Đơn giản nó là khung hiển thị các mạng xã hội nhằm chia sẻ các bài viết hay mà bạn thích chia sẻ cho người khác lên các mạng xã hội như Facebook, Google+...

Tác dụng Floating Social Bookmarking ảnh hưởng tích cực tới seo?

Thứ nhất: cách hiển thị trượt dọc theo blog nên nhìn rất đẹp và bắt mắt làm cho blog thêm sinh động.
Thứ hai: cơ hội bài viết của bạn được bạn đọc chia sẻ, quảng cáo và đánh giá khi bạn đọc ghé thăm blog.

Thứ ba: chưa nghĩ ra

Hướng dẫn thêm Floating Social Bookmarking vào blogspot

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Đặt mã CSS sau đây trên ]]></b:skin>
Cái này các bạn có thể điều chỉnh độ cao cách trên và cách dưới là bao nhiêu phù hợp với bạn
Dành cho những bạn biết chút css là có thể sửa được

social-buttons {position: fixed;top: 130px;width: 45px;z-index: 9999;}.button-left {left: 0;}.button-right {right: 0;}.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon {background-color: #33353B;background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);}.button-left #facebook-btn span {background-position: right 10px;}.button-left #twitter-btn span {background-position: right -35px;}.button-left #google-btn span {background-position: right -127px;}.button-left #rss-btn span {background-position: right -80px;}.button-left #pinterest-btn span {background-position: 11px -177px;}.button-left #youtube-btn span {background-position: 11px -223px;}.button-right #facebook-btn span {background-position: 12px 10px;}.button-right #twitter-btn span {background-position: 11px -35px;}.button-right #google-btn span {background-position: 10px -127px;}.button-right #rss-btn span {background-position: 11px -80px;}.button-right #pinterest-btn span {background-position: 11px -177px;}.button-right #youtube-btn span {background-position: 11px -223px;}.social-buttons #facebook-btn:hover .social-icon {background-color: #3B5998;}.social-buttons #twitter-btn:hover .social-icon {background-color: #62BDB2;}.social-buttons #google-btn:hover .social-icon {background-color: #DB4A39;}.social-buttons #rss-btn:hover .social-icon {background-color: #FF8B0F;}.social-buttons #pinterest-btn:hover .social-icon {background-color: #D43638;}.social-buttons #youtube-btn:hover .social-icon {background-color: #C4302B;}.social-buttons a:hover .social-text {display: block;}.button-left .social-icon {-moz-transition: background-color 0.4s ease-in 0s;-webkit-transition: background-color 0.4s ease-in 0s;background-repeat: no-repeat;display: block;float: left;height: 43px;margin-bottom: 2px;width: 43px;}.button-left .social-text {display: none;float: right;font-size: 1em;font-weight: bold;margin: 11px 40px 11px 0px;white-space: nowrap;}.button-right .social-icon {-moz-transition: background-color 0.4s ease-in 0s;-webkit-transition: background-color 0.4s ease-in 0s;background-repeat: no-repeat;display: block;float: right;height: 43px;margin-bottom: 2px;width: 43px;}.button-right .social-text {display: none;float: left;font-size: 80%;font-weight: bold;margin: 11px 0 11px 40px;white-space: nowrap;}.social-buttons .social-text {color: #FFFFFF;}

Bước 5:

Thêm javascript jquery để tạo hiệu ứng khi di chuột qua
đặt code sau vào trước </head>
Chú ý: nếu bạn đã có jquery.min.js rồi thì không phải thêm vào nữa

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

Bước 6 chèn code hiện thị ra ngoài blog

hãy đặt đoạn mã HTML dưới đây trước khi </ body> :

Nhớ thêm url tùy theo của bạn nhé

Thay vào chỗ href='https://www.facebook.com/your FB'



<div class='social-buttons button-right hidden-phone hidden-tablet'>




<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>



<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>


<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>


<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>


<span class='social-text'>Follow via Pinterest</span></span></a>


<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>


<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>


</div>