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

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:



☼ 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://1.bp.blogspot.com/-4oWoveJkZms/T4OIM0GAsrI/AAAAAAAABj8/Nr631D0WhbU/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.


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






Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

1 nhận xét:

  1. chào anh. cho em hỏi muốn chèn link page của mình vào thì như thế nào ạ

    ReplyDelete