Thanh công cụ chia sẻ chạy dọc giao diện cho blogspot

on
Đối với các bạn làm web nói chung và blogspot nói riêng thì chia sẻ trang, bài viết lên mạng xã hôi như: Facebook, twitter, google + là không thể thiếu. Hôm nay thủ thuật blog 360 sẽ hướng dẫn các bạn thêm thanh công cụ đó vào trang blog của bạn.


Bước 1: Vào Mẫu --> Chỉnh sửa HTML
Bước 2: Click chuột vào ô chỉnh sửa code, nhấn tổ hợp phím Ctrl+F
Bước 3: Gõ vào ô tìm kiếm đoạn mã sau: </body> sau đó nhấn enter
Bước 4: Copy đoạn code bên dưới và paste vào trước thẻ </body>

<style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box {
position: fixed;
top: 10%;
right: 0;
border: 3px dashed #F60;
padding: 5px 5px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #FEB;
width: 60px;
min-height: 345px;
z-index:8000;
}
.sharing_box .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:55px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box'>
<div style='text-align:center; margin-top:5px'>
<img alt='Share Emphasis' height='46px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb7XEGe6Zxn9HbmG2yuA8oMDtE-2GQpvzDDeoj6SWUPopzCnX9Du9uJtdEch8Wqmmta_35fQjhKfNfkg2P2WHK6_NEUAPNBp2jUdkY7-pooZIYoop1uEx-O6u8EfvVwjMiRsh9ovzXfM8/s56/share_mark.gif' 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 id='fb-root'/>
</div>
<!-- G+ -->
<div class='item' style='margin-left:5px'>
<!-- Place this tag where you want the +1 button to render -->
<g:Plusone size='tall'/>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:5px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</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 = &quot;//connect.facebook.net/en_GB/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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(&#39;script&#39;); li.type = &#39;text/javascript&#39;; li.async = true;
  li.src = &#39;https://platform.stumbleupon.com/1/widgets.js&#39;;
  var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s);
})();
</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-527f9aa5427486be' type='text/javascript'/>
<!-- AddThis Button END -->

Bước 5: Nhấn lưu mẫu để xem thành quả ^^

Comments

Post a Comment