Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 1

Nút Share Google+1, Facebook, Twitter Tweet, Pin It,... Chắc không quá xa lạ đối với các Blogger. Ở các bài trước Windows2it cũng đã hướng dẫn các bạn thêm nút Share trượt dọc hai bên Blog/Website.

Đến với bài viết hôm nay Windows2it sẽ hướng dẫn các bạn thêm nút Share trực tiếp vào bài viết Pro Version 1 đêm lại một diện mạo mới cho Blog của bạn.

Đọc thêm:

● Thêm nút share trượt dọc cho Blogspot Pro Version 1

● Tạo sitemap (sơ đồ) cho blogspot theo phong cách chuyên nghiệp

Demo bài này Windows2it đã thực hiện trực tiếp trên trên Blog này các bạn có thể xem trước thành quả của mình (-_-)

Demo nút Share trực tiếp vào bài viết cho Blogspot Pro Version 1 bằng hình ảnh

☼ Cách tiến hành:

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*----Social Share Buttons Bar Coded By Windows2it.com----*/
#twistBloggerSocialbar {
  float: left;
  width: 100%;
  padding-bottom: 7px;
  margin-top: 15px;
  padding: 5px 0px 5px 0px;
  border-bottom: 1px solid #F2F2F2;
  border-top: 1px solid #F2F2F2;
  margin-bottom: 15px;
  height: 28px;
  background: #FFF9F9;
  position: relative;
  z-index: 9999;
  overflow: hidden!Important;
}
.shareBox {
  float: left;
  padding: 0px;
  margin-right: 10px;
  height: 20px;
}
.titleBox {
  background: #5F5F5F;
  border: 1px solid #000000;
  height: 100%;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-right: 5px;
  font-size: 15px;
  font-family: sans-serif;
  line-height: 1.4em;
  font-weight: bold;
  color: #EFF9FD;
  border-radius: 0px 2px 2px 0px;
}
.titleBox:before, .titleBox:after {
  left: 74px;
  top: 50%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.titleBox:before {
  border-color: rgba(245,0,0,0);
  border-left-color: #000000;
  border-width: 6px;
  margin-top: -5px;
}
.titleBox:after {
  border-color: rgba(245,0,0,0);
  border-left-color: #5F5F5F;
  border-width: 5px;
  margin-top: -4px;
}
.twitterBox {
  width: 77px;
  background: #00A8E8;
  height: 100%;
  padding: 4px 10px;
  border: 0;
}
.googlePlusBox {
  width: 57px;
  background: #E06352;
  height: 100%;
  padding: 4px 10px;
  border: 0;
}
.stumblupon {
  width: 75px;
  background: #5F5F5F;
  height: 100%;
  padding: 5px 10px 3px 10px;
  border: 0;
}
@media only screen and (max-width: 979px) and (min-width: 768px) {  .shareBox {
    margin-right: 1px; }   /*---- Decreased the margin to 1px from 10px  ----*/
}
@media only screen and (max-width: 767px) and (min-width: 480px) { .titleBox {
display: none;  /*---- Disabled The Share Text From Displaying ----*/
  }
  .shareBox {
    margin-right: 8px; /*---- Decreased the margin to 8px from 10px   ----*/
  }
}
@media only screen and (max-width: 479px) {  .titleBox {
    display: none;   /*---- Disabled The Share Text From Displaying ----*/
  }
  .shareBox {
    margin-right: 1px; /*---- Decreased the margin to 1px from 10px  ----*/
  }
  .stumblupon {
    display: none;   /*---- Disabled Stumble Upon Button ----*/
  }
  .twitterBox {
    padding: 4px 8px;  /*---- Decreased the padding  ----*/
  }
  .googlePlusBox {
    padding: 4px 5px; /*---- Decreased the padding  ----*/
  }
}
</style>
<script type='text/javascript'>
//Stumble Upon Script
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();
// Twitter Script
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
</b:if>

Bước 2: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <div class='post-header-line-1'/>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <div class='post-header-line-1'/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='twistBloggerSocialbar'>
<div class='shareBox'><div class='titleBox'>SHARE</div></div>
  <div class='shareBox'> <div class='twitterBox'><a class='twitter-share-button' expr:data-text='data:post.title' data-via='quangmen93' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div></div>
<div class='shareBox'>
   <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' style='background: #4965B4; width:80px; height: 100%; padding: 4px 10px; border: 0;'/>
  </div>
<div class='shareBox'>
   <div class='googlePlusBox'><div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
  </div>
 <div class='shareBox'>
   <div class='stumblupon'>
<su:badge expr:location='data:post.url' layout='1'/>
  </div>
  </div>
 </div>
</b:if>

Chú ý: <div class='post-header-line-1'/> thường có 2 hoặc 3 đoạn như thế này và việc thêm nút Share trượt vào nằm cuối bài viết hay đầu bài viết => là do quá trình đặt Code của bạn mỗi template khác nhau vị trí đặt Code nằm trên bài viết hay cuối bài viết cũng khác nhau nên mình cũng không thể nói rõ, Vì đó là Pro Version nên việc đặt Code cũng khó khăn hơn một tí @!

Bước 3: Lưu mẫu.

☼ Tùy chỉnh:

· Thay quangmen93 thành ID Twitter của bạn

· Còn các tùy chỉnh khác đã oke các bạn không cần phải chỉnh sửa gì thêm.

☼ Kết luận:

· Thủ thuật này thực hiện thêm Code trực tiếp trong Template nên các bạn cẩn thận.

· Ở Pro Version 1 là phiên bản tuyệt vời và còn tuyệt vời hơn ở phiên bản Pro Version 2 các bạn theo dõi nhé !

· Sử dụng các đ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

Backlink: Thiết kế hệ thống xử lý nước thải

Còn bạn nào làm chưa được muốn Support gì thì cứ để lại comment @!