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 (-_-)
☼ 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 == "item"'> <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: " "; 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 == "item"'> <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 @!
0 nhận xét:
Đăng nhận xét