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
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é!
Để 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,
Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"
<<< Bài trước
Bài 23: Hướng dẫn tạo Floating Social Bookmark trượt đẹp cho Blogspot
Bài 24: Hướng dẫn thiết kế Website bằng WordPress miễn phí - Theme Sydney
<<< Bài trước
Bài 23: Hướng dẫn tạo Floating Social Bookmark trượt đẹp cho Blogspot
Bài 24: Hướng dẫn thiết kế Website bằng WordPress miễn phí - Theme Sydney
Bài sau >>>