Thêm tiện ích kết nối với các mạng xã hội sử dụng J-Query

Có rất nhiều bài viết về chia sẻ bài viết lên các mạng xã hội trên sidebar, và làm thế nào để thêm nó cho blogger, và làm thế nào để cho tiện ích này thêm đẹp hơn? Vì vậy, ngày hôm nay chúng ta sẽ tìm hiểu làm thế nào để thêm một widget chia sẻ lên các mạng xã hội thật đẹp và gọn gàng.Bạn hãy xem demo, sau đó làm các bước để tìm hiểu làm thế nào để thêm nó vào blogger và bạn sẽ thấy rằng thật sự rất dễ.

Demo

Bước 1: Vào Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Trước thẻ ]]></b:skin> dán code bên dưới vào

  #social {
  width: 98%;
  height: 45px;
  margin: 0;
  padding: 10px 5px 5px 30px;
  list-style: none;
  border-right:solid 1px #853529;
  position: relative;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2vrk2GGQXkqH4Zj9yOq2GpuhyphenhypheneLPoi0e-iq3dTIcoFrGSme5IyjF5RHpds2yV33ScjfBJCwZG4-oheQg7fTs6DHlEQGnLSMAHJT4jFqJouLlNBGUaYp_M5wZFUN0aSyuSza2fwId2zBE/) no-repeat left top;
  }
#social p{
  font-size:1.5em;
  color:#FFFB98;
  font-weight:bold;
  float:left;
  margin: 10px 10px 0 0;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
  }
.abt{
  font-size:0.8em;
  color:#787878;
  float:right;
  margin: 0 -30px 0 0;
  text-shadow: 1px 1px 0px #ffffff;
  filter: dropshadow(color=#ffffff, offx=1, offy=1);
  }
#social li {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 3px;
  }
#social li a {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1000em;
  background-repeat: no-repeat;
  text-decoration: none;
  }
#social #rss {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdAxTk4I6yHt4_6XPf5x2n42ZB2ufBHJwzmkS-cOPZelcv08IkRbigDrCxrlVssgEDLNLOniQ355-RL9M9fIw-ANlL1CS2mBXQF_9_YRAV5fIOoCGqaOGzBVpLktNOBL7tzKaKKq6ScxY/s400/allblogtools_rss.png);
  }
#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXXiuvY6NQpNBO_em70qvLU7z05gaQsf-LOFR8cgU-fe9ywAyvvfbzOhLEE2kzhjreq699Novwsf95GAs4qWfKTXUxmgR1sKKoe3M3F3XqxIkEY5vcocORbvpdHEXiIqrU9i8p9sqJjk/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxWo36IyIMT894bI2wwzKvOF8z351j5iD8lGSzh7EQ8DWuw1modw15gehkhWLD6zqucoxCbD3QmdCajlNZGDqXhQT5rQ3QZ0DSW5sUh_2ZWs1ecIvE5zqGdMmTtgd7unJuYi8vk1xrJM/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LYo_Aydi2B1rKIQtGYms1Oy45m-CtzM4hadZGYcJ64gKgkICb26sQhPk3o9utFbvpw96Hkx11QY4NMTP3CLffZ3Z7AsEf6GrBC8RqYXGaruerVoOdWKoNK1hiP7lC4SftkU4quvFJbU/s400/allblogtools_email.png);
  }
span.tooltip {
  background: #575757;
  padding: 3px;
  display: block;
  width: 140px;
  border: 1px solid #000000;
  position: absolute;
  margin-top:-40px;
  color: #F0F0F0;
  font-size:10px;
  text-indent: 0;
  font: Arial, sans-serif;
  text-align: center;
  -webkit-box-shadow: inset 2px 2px 2px #616161;
  -moz-box-shadow: inset 2px 2px 2px #616161;
  box-shadow: inset 2px 2px 2px #616161;
  -moz-border-radius: 5px;
  border-radius: 5px;
  }

Bước 3: Dán tiếp code bên dưới trước thẻ </body>

<script type='text/javascript'>
  window.setTimeout(function() {
  document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
  }, 10);
  </script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
 $('#social li').each(function() {
  var $li = $(this);
  var title = $li.find('a').attr('title');
  $li.find('a').removeAttr('title');
  $('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();
  $li.find('a').mouseover(function() {
  var top = $(this).position().top;
  var left = $(this).position().left;
  $(this).find('span').fadeIn()({
  top: top,
  left: left
  }, 'slow');
  });
  $li.find('a').mouseout(function() {
  $(this).find('span').fadeOut('slow');
  });
  });
});
//]]>
  </script> 

Bước 4: Lưu lại template
Bước 5: Vào Bố cục > Thêm tiện ích HTML/Javascript vào vị trí thích hợp và dán vào form Nội Dung của tiện ích này code sau rồi lưu lại

<ul id="social">
  <p>Follow Us </p>
  <li><a href="http://trollvl.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>
<li><a href="mailto:huycovip.volam@gmail.com" id="mail" title="Subscribe To Our News Letter">Mail</a></li>
<li><a href="htto://facebook.com/hcvvn" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>
<li><a href="http://twitter.com/huycovip" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
  </ul>

Đừng quên thay đổi thành các thông tin của bạn nhé, mình đã đánh dấu đỏ rồi đó
Vậy là bạn đã hoàn thành việc thêm một widget chia sẻ lên các mạng xã hội với phong cách thật đẹp rồi đấy. Chúc blog của bạn ngày một pro hơn! 

Bài viết gốc tại ABT