Từ coder đến developer - IT & Cloud Services 🌥️: Thêm nút Share trượt dọc hai bên Blogspot (Blogger)

Nút Share là một tiện ích vô cùng quan trọng (Quan trọng như thế nào chắc mình không phải nói nhỉ @!) mà hầu hết tất cả các Blog/Website đều dùng, thường thì có 2 trị trí để đặt tiện ích này: Có thể đặt nó trực tiếp ở trong bài viết hoặc đặt trượt dọc hai bên Blog/Website.

Nhưng đến bài bài viết hôm nay Windows2it sẽ hướng dẫn các bạn cách thêm tiện ích nút Share trượt dọc hai bên Blog/Website với 3 phong cách cho cách cho các bạn lựa chọn. Còn cách đặt tiện ích nút Share trực tiếp vào bài viết Windows2it sẽ hướng dẫn các bạn ở một bài viết khác.

Đọc thêm:

● Thêm Pop Out Facebook, Google+, Twittercho blogspot (Blogger)

● Nút mạng xã hội (Social Buttons) kết hợp với tiện ích theo dõi bài viết qua Email

☼ Cách tiến hành:

Chỉ cần chèn đoạn mã sau đây vào một Widget HTML/Javascript là Oke

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

Code theo phong cách 1:

<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='https://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>

Code theo phong cách 2:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box_namkna {
position: fixed;
top: 20%;
right: 0%;
border: 3px solid #00EE00;
padding: 5px 5px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #F0FFFF;
width: 60px;
min-height: 345px;
}
.sharing_box_namkna .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:55px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box_namkna'>
<div style='text-align:center; margin-top:5px'>
<img alt='Share Emphasis' height='46px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirGr5UjsJ4t7jbw9XhNbcR11smYSU510-l-ugVYDLsWepEgFpqYy6_X6d12HFge_w9DnZUMzfUK45dLCfnFG3sxt1LqrVI2DRofF3sDVQ34zurdXpx1uPnTjtMC7_7wwHVjjMXA2RPlTtp/s1600/obtenir-par-poste-icone-5533-48-+-namkna-blogspot-com.png' width='56px'/>
</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:3px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>

<!-- FACEBOOK -->
<div class='item' style='margin-left:3px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
<div id='fb-root'></div>
</div>
<!-- G+ -->
<div class='item' style='margin-left:5px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'></g:plusone>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:5px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
      li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- AddThis Button END -->

Code theo phong cách 3:

<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:30%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>

<div id='floatingbuttons' title="Share this post!"><script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>

<div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>

<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>

<div class="addbuttons"><a href="http://www.windows2it.com/2015/09/them-nut-share-truot-doc-hai-ben-blogspot-blogger.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>

☼ Tùy chỉnh

· Mình đã chỉnh sữa ngon lành hết cho các bạn rùi.

· Còn bạn muốn cho tiện ích đó nằm bên phải (right) hay bên trái (left) thì chú ý những đoạn màu vàng <Chỉ cần đổi từ left hoặc right là được>

☼ Kết luận

· Sử dụng 1 đoạn CSS và đoạn Scipts mở (chưa mã hóa - endcode) nên việc tùy biến rất dễ dàng. <Tiện tích này quá đơn giản nên mình không DEMO ngoài chỉ để DEMO trực tiếp ở bài viết>

· Đây là một Version đơn đơn giản, hứa hẹn trong thời gian tới mình sẽ hướng dẫn các bạn tạo một Version Pro đưa Blog/Website các bạn lên một phong cách mới.

Backlink: Quy trình kiểm toán tài sản cố định

Còn bạn muốn Support gì thì cứ để lại comment @!

Get buttons

Từ Coder Đến Dev

Thêm nút Share trượt dọc hai bên Blogspot (Blogger)

Bài viết liên quan

Thảo luận