Tiện ích nodes Share trượt dọc cho Blogspot (sidebar dính)

For those người đang sở hữu web / blog thì công cụ chia sẻ lên mạng xã hội như thế, tweet ... could not, it possible giúp đọc giả chia sẻ bài viết hay làm tăng trafic cho web / blog. Có many cách to set tiện ích this, hôm nay namkna chia sẻ cùng các bạn cách bố trí its công cụ hữu ích this theo chiều dọc and as hiệu ứng trượt kế phần chính per when you cuộn (scrollbar) chuột xuống Phía below . It as the form of biểu ngữ quảng cáo trượt dọc 2 bên of blogspot mà ibiet giới thiệu.

Các bạn be xem Demo.

Demo cho bài viết

Hình ảnh minh họa:

Cách 1: Không sử dụng Javar Scip.

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

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Select chỉnh sửa Phần tử trang
4. Chọn Thêm tiện ích (Add Widget) and Thêm đoạn mã sau vào :

<Style>
/ * Cố định Vị trí AddThis Toolbox * /
.sharing_box_ibiet {
vị trí: cố định;
top: 10%;
phải: 0;
border: 3px rắn # 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_ibiet .item {
width: 50px;
margin: 5px 5px 0 0;
}
iframe .twitter_float
{
! width: 55px quan trọng;
}
</ Style>
<! - CHIA SẺ BOX cố định Vị trí Toolbox ->
<Div class = 'sharing_box_ibiet'>
<Div style = "text-align: center; margin-top: 5px ">
<Img alt = 'Share Emphasis "height =" 46px' width = "56px" />
</ Div>
<! - TWITTER ->
<Div class = 'mục 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 = 'mục' style = 'margin-left: 3px'>
<Div class = 'fb-like' dữ liệu font = 'Verdana' dữ liệu bố trí = 'box_count' dữ liệu gửi = 'false' data-show-khuôn mặt = 'true' data-width = '44 '> </ div >
<Div id = 'fb-root'> </ div>
</ Div>
<! - G + ->
<Div class = 'mục' style = 'margin-left: 5px ">
<! - Nơi tag này, nơi bạn muốn nút +1 để render ->
<G: plusone kích thước = 'cao'> </ g: plusone>
</ Div>
<! - KhácShare ->
<Div class = 'mục' style = 'margin-left: 5px ">
<! - AddThis nút BEGIN ->
<Div class = 'addthis_toolbox addthis_default_style'>
<a class='addthis_counter'> </a>
</ Div>
<! - AddThis nút END ->
</ Div>
</ Div>
<! - NHANH 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);
} (Tài liệu, 'kịch bản', 'facebook-jssdk')); </ script>
<! - G + SCRIPT ->
<! - Nơi này làm cho cuộc gọi ở nơi thích hợp ->
<Script type = 'text / javascript'> gapi.plusone.go (); </ script>
<! - StumbleUpon SCRIPT ->
<- Bất cứ nơi nào Đặt đoạn này thích hợp ->
<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 = "http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"> </ script>
<! - AddThis nút END ->

5. Chọn lưu mẫu.
6. Tiếp theo chọn Chỉnh sửa HTML and mã thêm đoạn below the vào trước thẻ </ head>

<Script src = 'http: //apis.google.com/js/plusone.js' type = 'text / javascript'> {lang: & # 39; en-US & # 39;} </ script>

8. Cuối cùng Lưu mẫu lại.

Cách 2: sử dụng JQuery.

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

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Mã Chèn below the vào sau thẻ <head>

<Script src = " http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.v1.4.1.js "type =" text / javascript "> </ script>
<Script src = " http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/stickysidebar.jquery.js "type =" text / javascript "> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
. $ ('# Cổ nút') stickySidebar ({tốc độ: 300, hạn chế: true})
});
</ Script>

<Style>
# Cổ nút {
background: #fff;
border: #ccc rắn 1px;
margin-left: -82px;
padding: 8px;
vị trí: tuyệt đối;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;
}
</ Style>

- Lưu ý: Các you should not be Tải 2 File Js trên về Tại Đây and upload lên host riêng to use lâu dài.

6. Bây giờ bạn tìm to lines mã below or tương tự (làm đặc điểm cấu tạo of each blog của should have chút khác nhau nhỏ).

<Div class = 'post-header-line-1' />

7. Tiếp theo bạn chèn mã below the vào sau mã vừa tìm been

<Div id = 'cổ nút'>
<Div class = ' twitter scount '>
<A
 class = 'twitter-cổ nút' data-count = 'thẳng đứng' dữ liệu text = 'Danh sách Chỉ
 Bài tựa đề On Blogger Nhãn trang ' 
dữ liệu-url = 'http: //www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html'
 dữ liệu qua = 'paulcrowepro' 
'http: //twitter.com/share' href => Tweet </a> <script 
src = 'http: //platform.twitter.com/widgets.js' type = 'text / javascript' />
</ Div>

<Div class = ' facebook scount '>
<Fb: như
 font = '' 
href = 'http: //www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html'
 bố trí = 'box_count' gửi = 'false' show_faces = 'false' width = '50 '/>
</ Div>

<Div class = ' scount vấp ngã '>
<Script src = 'http:? //www.stumbleupon.com/hostedbadge.php S = 5' />
</ Div>

<Div class = ' gplus scount '>
<Script src = 'https: //apis.google.com/js/plusone.js' type = 'text / javascript' /> <g: plusone kích thước = 'cao' />
</ Div>
</ Div>

Ở trên mình chỉ pass a số công cụ phổ biến, you can based on which to change bổ sung or deleted bớt cho phù hợp with the site of you.

8. Cuối cùng Lưu mẫu lại.

Chúc thành công!