Thêm Jumbo Social Share Bar cho blogspot (blogger)

Bạn đang tìm kiếm để thêm một thanh chia sẻ xã hội Jumbo trong Blogger? Tại sao nó được gọi là Jumbo Social Bar? Đánh bắt là gì? Bạn có thể thấy những nút chia sẻ xã hội đẹp mắt hiển thị tổng số cổ phần trên mạng xã hội đã đếm được bài đăng hoặc trang cụ thể của bạn. Hôm nay trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm thanh chia sẻ xã hội jumbo với các quầy trong blogger.

- bởi MBL Networks

Jumbo Social Bar Chia sẻ là gì?

Thanh chia sẻ xã hội hoạt động như mashable . com thanh chia sẻ xã hội. Nó bao gồm một bộ đếm xây dựng Ajax lớn tính tổng số cổ phần cho bài đăng và trang của bạn. 

Bắt đầu thủ thuật :

Bước 1: 

Sao lưu mẫu Blogger của bạn, chỉ để an toàn nếu có bất cứ sai lầm. Gợi ý : (Vào Blogger >> Bản mẫu >> Sao lưu / Khôi phục >> Tải xuống Mẫu đầy đủ).

Bước 2:

Vào Blogger >> Bản mẫu >> Chỉnh sửa HTML bấm Ctrl F và tìm kiếm ]]> </ b: skin>. Sau khi tìm thấy thẻ ]]> </ b: skin>, ngay phía trên nó dán mã sau:

    Gợi ý tìm thẻ ]]> </ b: skin: Vào Blogger >> Bản mẫu >> Chỉnh sửa HTML và nhấn Tổ hợp phím Ctrl F và tìm đến <b:skin>.

Và nó sẽ xuất hiện:

Nhấn vào dấu > trước đoạn mã <b:skin>...</b:skin> và tìm kiếm ]]> </ b: skin bằng cách nhấn vào Ctrl F.

/* Jumbo Social Share Bar */

.don-share .don-share-total .don-count {
font-size: 40px;
text-align: center;
font-weight: 600;
color: #ff0036;
border-right: 1px solid #eee;
padding-right: 18px;
margin-right: 20px;
margin-bottom: 0;
}
.don-share .don-share-total .don-count:after {
line-height: 30px;
color: #a6a6a6;
font-weight: 300;
font-size: 12px;
text-transform: capitalize;
content: "Share";
}
.don-btn {
background-image: none;
box-shadow: none;
}
.don-share i {
border: 0!important;
text-align: center;
width: auto;
font-size: 16px; margin-bottom:10px;
}
.don-share .don-share-total:after {
display: none;
}
.don-share .don-share-total {
line-height: 45px;
margin: 0;
}
.don-share [class*=' don-share-'],
.don-share [class^=don-share-] {
margin: 0px 10px 0px 0;
}
.don-share {
margin: 15px 0px 15px 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}

Bước 3:

Bây giờ để cài đặt plugin xã hội donReach, trong trình soạn thảo Template của Blogger tìm kiếm </ head> và ngay phía trên nó dán mã JavaScript sau:

<script type='text/javascript'>

(function() {

var dr = document.createElement('script');

dr.type = 'text/javascript'; dr.async = true;

dr.src = '//share.donreach.com/buttons.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);

})();

</script>

Bước 4 :

Để hiển thị thanh Chia sẻ trên mạng xã hội, dán mã dưới đây bất kỳ nơi nào bạn muốn nó xuất hiện trong blog của bạn. Lý tưởng nhất là người dùng thích nó để hiển thị dưới hoặc trên nội dung bài đăng. Để hiển thị nó trên nội dung bài đăng và bên dưới tiêu đề bài đăng, trong trình soạn thảo khuôn mẫu tìm kiếm <data: post.body /> và ngay phía trên nó dán mã sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='don-share' data-limit='3'>

  <div class='don-share-total'/>

  <div class='don-share-facebook'/>

  <div class='don-share-twitter'/>

  <div class='don-share-pinterest'/>

</div>

</b:if>

Hiện tại, tiện ích này hiển thị 3 nút chia sẻ nhưng bạn có thể thêm các nút khác theo nhu cầu của bạn. Kiểm tra các ví dụ tại trang donReach .

Khi mọi thứ đã xong, nhấn nút Lưu mẫu và bạn đã thêm thành công thanh Jumbo Social Share trong Blogger.

Nguồn: blogger-templatees

/*----Full Width Post-----*/ [full_width] /*----Sidebar Left Post-----*/ [sidebar_left] /*----Sidebar Right Post-----*/ [sidebar_right]