3 Mẫu nút Share Chuyên Nghiệp trượt Dọc hai bên cho Blogsport

3 Mẫu  nút Share (Chia sẻ)  trượt Dọc hai bên cho Blogsport

Như các bạn cũng đã biết thì nút Share trên mỗi blog,website hay những bài viết là rất quan trọng .Nó vừa tạo nên sự chuyên nghiệp cho blog ,vừa tạo ra liên kết cho blog quan trọng nhất là để người đọc có thể chia sẻ bài viết một cách nhanh chóng khi họ muốn -Như thế bài viết của ta càng tiếp cận được nhiều độc giả hơn .Hầu hết các Blog ,website đều dùng tiện ích này và chỉ có 2 cách đặt vị trí cho nút Share  : 1.Đặt trực tiếp trong bài viết  2.Nút Share trượt dọc 2 bên blog .
Hôm nay mình sẽ hướng dẫn các bạn tạo nút share trượt dọc 2 bên blog

Xem Thêm :

 Code tạo khung cho các đoạn trích dẫn trong blogsport 

Hướng dẫn tạo khung Comment facebook cho blogsport

Chúng ta hãy bắt đầu thực hiện nhé :
Mình sẽ hướng dẫn các bạn cách đơn giản nhất là chỉ cần chèn đoạn code vào một widget/javascript là ok .

Blog => Bố cục => Thêm Tiện Ích => Html/Javascript  Và sau đó dán đoạn Code dưới đây vào là xong => Lưu Lại

Phong cách nút Share 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>

Phong cách nút share cho blog  2 :

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </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/AVvXsEjMzH4P6B1_ebl4bJwnxpxsVLuxfb03Ny3jawhRedGCabn6Kyve_Jp3J7NhDlad9aY7Ee9lmqKaw7vCbSdiAWBIf5Eg2otG-0K_-65KtKfy6LkU3Rj7YLskUWT2dS0rJJW4nklUjMX23TEK/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 -->

Phong cách nút share cho blog 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 : 

   Các bạn có thể tùy chỉnh cho nút Share bên trái hay bên phải Blog chỉ cần tìm và thay đổi chỉ số : right (phải ) left (trái ) là được .

Như thế Là Xong rồi đó .Các bạn hãy áp dụng cho blog của chính mình nhé.
Chúc các bạn thành công .
Nếu thấy hay thì hãy chia sẻ với mọi người nhé các bạn .