Tiện ích chia sẻ blog/bài viết lên các trang xã hội

Trước đây mình có giới thiệu một tool tạo tiện chia sẻ blog/bài viết lên các trang xã hội chạy dọc theo blog. Tuy nhiên bạn doan hoang hai đã góp ý cho mình được biết nhược điểm khi sử dụng tool này nếu căn lề trái cho tiện ích khi Like (button của Facebook) sẽ xuất hiện khung comments gây ra tình trạng che một phần của blog mà không thể tắt khung comments này đi được do bị ẩn  . Vì thế mình sẽ giới thiệu tiện ích tương tự nhưng không xuất hiện khung comments khi sử dụng nút Like

Làm cách nào để thêm tiện ích này vào blog?

Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Dán code bên dưới sau thẻ <b:includable id='post' var='post'> trong template của bạn

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_gXoOJZ7jg7j7Qewic7rpboGx_PJZsR7mLQsEeGnxBcho9WTuoiB1A761RJ5IcvCrxkZ1Ll0MP23_Vmaq7BmY53Ls3wxT7PnzTvXfv_3IF6M51yaf6Z25fRgMRDkDbj2D9GmxL6JUykRL/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_gXoOJZ7jg7j7Qewic7rpboGx_PJZsR7mLQsEeGnxBcho9WTuoiB1A761RJ5IcvCrxkZ1Ll0MP23_Vmaq7BmY53Ls3wxT7PnzTvXfv_3IF6M51yaf6Z25fRgMRDkDbj2D9GmxL6JUykRL/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating  .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}
.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}
.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4tbMSzcmmNUGIrqrHipiIjcn0G_FmIJHrb_Ho4bqEmh1Jpy1XUn9RtNdr3nvu8S4puWLRRcUwxz_WE7-lhLN927mPQciqXd42NSilWAnj8pMA2US_L3vzf6DFwONTuWIVU0JmbfK-yKaJ/s400/bubble_arrow_pinterest.png') !important;
}
.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}
</style>
<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_twitter_vcount' displaytext='' st_via='trollvl'/>
<div style='margin:5px 0 0px 5px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:70px;'/>
</div>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;Troll VL&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
</div>
</b:if></b:if>

Tùy chọn: Bạn thay đổi các thông số được đánh dấu ở code trên cho phù hợp với blog của mình

• Vị trí: dòng code màu xanh
• Nền: code trắng được bôi màu đen
• Viền: code màu xám
• Nếu muốn blog xuất hiện ở tất cả các trang của blog thì xóa code trắng được bôi màu đỏ đi
• Mỗi dòng code được tô màu ở phía trên tương ứng với chia sẻ lên Twitter, Facebook, pinterest, Google+, Share nếu bạn không thích button nào chỉ việc xóa dòng đó đi

Bước 4: Lưu template lại và xem kết quả