Hướng dẫn cách tạo Floating Social Bar cho blogspot

Social SEO (hay còn gọi là SEO Mạng xã hội) là một trong những bước quan trọng để làm cho trang web của bạn trở nên nổi tiếng. Nó không những thu hút được nhiều lượt truy cập từ phía người dùng mà còn giúp cho nội dung trang web của bạn được tiếp cận bởi nhiều người hơn khi có ai đó chia sẻ chúng.

Dịch vụ blogger/blogspot cho phép người dùng tùy chỉnh được giao diện và bổ sung các mã HTML. Nhờ đó, việc tạo ra các widget hoặc thêm bớt các chi tiết trong mẫu càng trở nên dễ dàng hơn. Vì vậy, để tạo một Social Bar widget để người dùng có thể chia sẻ bài viết hoàn toàn dễ dàng. Trong bài viết này,Tinhoc24h.Net sẽ tóm tắt một chút về nội dung và hướng dẫn các bạn chèn Floating Social Bar cho blogspot đơn giản nhất nhé.

Floating Social Bar cho blogspot

Floating Social Bar là một thanh trượt nằm phía bên trái hoặc bên phải của trang web. Tại đây các nút hiển thị cho phép người dùng nhấp chuột vào để like và chia sẻ bài viết một cách nhanh chóng. Nếu như bạn là một người rành về HTML/CSS thì có thể tự mình tạo ra một thanh chia sẻ phù hợp với template của mình. Hoặc nếu bạn không biết về HTML/CSS thì có thể sử dụng ngay mẫu Floating Social Bar mà mình sắp chia sẻ dưới đây.

Demo Floating Social Bar For Blogspot

Bước 1: Đăng nhập vào Blogspot > Template > Edit HTML.

Bước 2: Tìm đến trước thẻ đóng </body> và chèn vào đoạn code bên dưới đây.

<!--Float social-->
<div class='addthis_toolbox addthis_floating_style addthis_counter_style' style='border: 1px solid #ddd;border-radius: 0px;left:90px;top: 150px;'>
<a class='addthis_button_facebook_like' fb:like:layout='box_count'/>
<a class='addthis_button_google_plusone' g:plusone:size='tall'/>
<a class='addthis_button_tweet' tw:count='vertical'/>
<a class='addthis_counter'/>
Chia sẻ
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-516ff8e04b04378b' type='text/javascript'/>
<!--End - Float social-->
Trong đó các bạn lưu ý cho mình 2 thuộc tính CSS sau:
– left:90px; là khoảng cách từ lề bên trái đến thanh social bar.
– top:150px; là khoảng cách từ lên trên đến thanh social bar.
Các bạn có thể thay đổi giá trị của 2 thuộc tính này sao cho chúng xuất hiện phù hợp với trang web của bạn

Bước 3: Nhấp chọn Save Template và kiểm thử ngay xem chúng đã xuất hiện ưng ý chưa nhé.

Đối với những bạn đang sử dụng responsive cho blogger template sẽ cần bổ sung thêm vài dòng CSS3 để ẩn thanh social bar này đi mỗi khi thu nhỏ màn hình. Các bạn có thể thêm vào trước thẻ ]]></b:skin>dòng CSS3 sau:@media screen and (max-width:1024px){.addthis_toolbox{display:none!important}}
Dòng CSS3 này sẽ tự động ẩn floating social bar khi kích thước màn hình nhỏ hơn hoặc bằng 1024px.

Như vậy là mình đã hướng dẫn xong cho các bạn cách chèn thanh chia sẻ mạng xã hội vào blogspot. Nếu như bạn có ý tưởng khác hay hơn thì đừng quên chia sẻ cùng mọi người nhé. Hi vọng rằng bài viết này sẽ hữu ích đối với các bạn. Chúc các bạn thành công!
Thương Lee

Nguồn tinhoc24h.net

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..