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: '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/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 @!
0 nhận xét:
Đăng nhận xét