Showing posts with label tao-bo-nut-floating-social-network-cho-blogspot. Show all posts
Showing posts with label tao-bo-nut-floating-social-network-cho-blogspot. Show all posts

Monday, August 1, 2016

Hướng dẫn tạo bộ nút Social Network cho Blogspot

Hôm nay Sơn Nguyễn sẽ chia sẽ với các bạn cách tạo bộ nút Social Network cho Blogspot

Bộ Social Network này gồm 3 nút: Facebook, G+ và Twitter là 3 Mạng xã hội khá phổ biến hiện nay



Bộ Socila Network này được thiết kế theo dạng Floating gồm 1 hàng dọc nằm 1 bên của trang Blogspot/website của bạn, đã được Fix đứng im và trượt theo trang web khi bạn kéo xuống ko gây nhức mắt cho đọc giả của bạn

Socila Network Floating


Video hướng dẫn tạo bộ nút Social Network cho Blogspot

Video đã bị xóa theo kênh cũ. Vào kênh mới trong phần contact

Cách tạo bộ nút chia sẽ liên kết các mạng xã hội Social Network cho Blogspot như sau:

Truy cập vào Blogger --> Đăng nhập bằng tài khoản Gmail của bạn

Trong phần quản trị Blogspot --> Bố cục --> Chọn bất kỳ mục nào và +Thêm tiện ích --> Chọn HTML/JavaScript

Phần tiêu đề: các bạn để trống

Phần nội dung: các bạn dán đoạn code này vào

<style type="text/css">
#Share {position:fixed; top:35%; left:0%; background-color:#2AA4CF;padding:2px;z-index:10;border-bottom-right-radius:5px;border-top-right-radius:5px;}
#Share .Sharebutton {float:left;clear:both;}
</style>
<div id='Share'>
<div style="margin:4px;">
<div class='Sharebutton' id='facebook'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<fb:like layout='box_count' show_faces='false'></fb:like>
</div>
<br />
<div class='Sharebutton' id='google'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='Sharebutton' id='twitter'>
<a class="twitter-share-button" href="https://twitter.com/share" data-count="vertical"> Tweet </a>
<script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script>
</div>
</div>
</div>

Bấm Lưu để hoàn tất

Các bạn tự chiêm ngưỡng thành quả của mình nhé ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!
P/s: đoạn code được sưu tầm trên mạng,