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

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: 




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ờicò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



Còn bạn nào làm chưa được 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

2 nhận xét:

  1. Mình đã làm y như bạn hướng dẫn mà vẫn k tạo được nứt share vậy bạn? giúp mình với

    ReplyDelete
    Replies
    1. thủ thuật này quá đơn và đơn giản nhất trong các thủ mà bạn làm ko được mình ko biết giúp bạn như thế nào: Bạn liên hệ qua facebook để mình hướng dẫn chi từng milimet cho bạn thui: https://www.facebook.com/windows2it

      Delete