Thêm nút xã hội nằm ngang dưới chân tiêu đề

Sau nhiều bài viết hữu ích của tôi đã viết trước đó như Thêm thẻ Meta Description vào mỗi bài viết trong blog, Thêm hộp đăng ký email ngay trong tiêu đề Blog, Tạo Widget đăng ký nhận bản tin qua email trong blogger, Tăng truy cập Blog từ mạng xã hội bằng Socializer Widget. Và bây giờ tôi sẽ giới thiệu tiếp đến một ứng dụng tuyệt vời nữa đó là thêm các biểu tượng mạng xã hội dưới chân tiêu đề bài viết.

Nút share các mạng xã hội nằm ngang dưới chân tiêu đề bài viết được bổ sung vào widget, và thiết kế với mục đích giúp người đọc chia sẽ bài viết nhiều hơn trên các mạng xã hội. Hiển nhiên, bài viết sẽ nhận được lưu lượng truy cập đến từ nhiều phía khác nhau và làm tăng tối đa khả năng xếp hạng trên Google.

                        Đọc thêm:     7 cách tốt nhất để cải thiện nội dung blog của bạn

Nút chia sẽ mạng xã hội nằm ngang trên Sidebar là gì?

Đây chính là các nút chia sẽ bài viết lên các mạng xã hội như Facebook, Twitter, Google+, StumbleUpon, chúng được thiết kế theo chiều nằm ngang đặt dưới chân tiêu đề của mỗi bài viết. Nút này có giao diện thiết kế bắt mắt, hình thức đẹp và sắp xếp gọn gàng bởi 4 nút hình vuông, biểu tượng đại diện cho 4 mạng xã hội mạnh nhất và có số lượng người dùng lớn nhất. Bạn thử nghĩ xem, nếu như có một đọc giả là một người trung thành với một trong 4 mạng nói trên, hơn nữa họ cũng là một trong những người có lượng người hâm mộ theo họ trên trang mạng xã hội này rất lớn. Một khi bài viết của bạn đã làm thay đổi suy nghĩ của đọc giả, khiến họ cảm thấy thích thú và hào hứng hơn với bài viết này. Điều này sẽ thôi thúc họ chia sẽ bài viết này lên mạng xã hội của họ cao hơn. Như vậy, cơ hội nhận được số lượng lớn khách truy cập vào blog từ những người hâm mộ đọc giả này là rất cao.

Tương tự như vậy với các mạng xã hội khác. Tuy nhiên, mọi người vẫn có thể tùy chỉnh những nút mạng xã hội trên thanh icon này thay vì giữ nguyên các biểu tượng gốc. Chúng ta có thể thay đổi những biểu tượng mạng xã hội theo sở thích mà có cơ hội được chia sẽ cao hơn tùy thuộc vào từng quốc gia cụ thể, nơi mà có đối tượng sử dụng mạng xã hội này với số lượng lớn.

Thêm nút xã hội nằm ngang dưới chân tiêu đề bài viết bằng cách nào?

Rất đơn giản chỉ cần làm theo các bước hướng dẫn dưới đây. Đó không phải là một nhiệm vụ khó khăn, nhưng bạn có thể cần gợi ý thêm hay giúp đỡ nếu bạn là người mới bắt đầu viết blogger. Tôi sẽ hướng dẫn  từng bước cách làm này.

• Đăng nhập vào Blogger - Chọn Template (Mẫu) - Hãy nhớ sao lưu mẫu củ trước thi thực hành, đề phòng những lỗi có thể xãy ra, và chúng ta sẽ khôi phục nó một cách dễ dàng.
• Nhấn vào Edit HTML và Tìm đến thẻ </head>

• Phía  trên thẻ </head>  dán Code bên dưới vào

Code để dán vào:

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if 

(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.par

entNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
// Stumbleupon
(function 

(){vara=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://plat

form.stumbleupon.com/1/widgets.js";var 

b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();

</script>
<style type='text/css'>

/*Social Bar By Weblog247 ----------------------------------- */
#SocialBar {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 610px;
    margin-bottom: 20px;
    margin-left: -10px;
    margin-top: 10px;
}

.headingsharer h5 {
    float: left;
    padding-right: 20px;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 10px;
}

.tweeetero, .fbwolo, .g-plusones, .stumblo {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

</style>

</b:if>

Sau khi dán mã code trên vào trước thẻ </head> và nhớ ấn lưu mẫu để lưu lại.

Tiếp theo trong mẫu HTML này, tìm đến dòng mã <div class='post-body entry-content'>

Dán mã phía dưới vào trên dòng mã <div class='post-body entry-content'>

<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT →</h5>
 </div>
 <div class='tweeetero'>
  <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
 </div>
 <div class='fbwolo'>
  <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
 </div>
 <div class='g-plusones'>
  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </div>
  <div class='stumblo'>
   <su:badge expr:location='data:post.url' layout='1'/>
  </div>
 </div>
 </b:if>

Ấn lưu lại và như vậy chúng ta đã hoàn tất quá trình chèn nút mạng xã hội nằm ngang dưới chân tiêu đề bài viết. Chúc mọi người thành công và nhận được nhiều chia sẽ từ nút mạng xã hội nằm ngang này.

                       Đọc thêm:    Công cụ sửa lỗi ngữ pháp tốt nhất cho Blogger