Tạo Nút Readmore Và Nút Share Cho Bài Viết Blogger

Hôm nay mình sẽ hướng dẫn các bạn tạo nút read more và nút share ngay bên cạnh bài đăng cho blogger. Thông thường khi xem một bài viết nào đó người ta nhấn vào tiêu để hay hình ảnh đại điện để xem bài viết. Nhưng đôi khi do blog quá trống  trải bạn muốn làm gì đó cho nó đầy đặn hơn hay là bân muốn học hỏi hơn thì việc chèn hai nút này vào blog mình đó là việc nên làm.
  

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao
• Lời Kết

Mục Đích

• Tạo thêm chức năng đọc bài viết cho blog
• Blog Thêm đầy đặn hơn
• Nhìn bài viết cũng đẹp hơn nhiều
• .... 

Thực Hiện

1. Đầu tiên tất nhiên là đăng nhập vào Blogger. Sau đó tới phần Mẫu rồi vào Chỉnh sửa HTML.
2. Sau đó các bạn chép toàn bộ code bên dưới vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

CSS/* CSS Read More and Share Button */
a.read-more {position:absolute;display:inline-block;bottom:15px;background-color:#ef7e5f;color:#fff;padding:5px 10px 4px;font-size:11px;border-radius:2px;transition:all .3s ease-in-out;}
a.read-more:hover {opacity:0.9;color:#fff;}
a.read-more:active {background:#fff;color:#ef7e5f;}
.post-share{display:none;position:absolute;background:#333c3f;padding:10px;border-radius:2px;
top:60%;right:22%;transition:all 0.2s ease;}
.post-share:before{content:"";position:absolute;width:10px;height:10px;top:45%;left:-5px;z-index:0;background:#333c3f;-webkit-transform:rotate(224deg);-moz-transform:rotate(224deg);-ms-transform:rotate(224deg);-o-transform:rotate(224deg);transform:rotate(224deg)}
.post-share ul{list-style:none;padding:0!important;margin:0!important;}
.post-share ul li{margin:0;padding:0}
.post-share ul li a{color:#fff;padding:5px;display:block}
.post-share ul li a:last-child{border-bottom:0}
.post-share ul li a:hover{color:#fff;}
.post-sharebtn{display:inline-block;padding:5px 10px 4px;background:#333C3F;color:#999;border-radius:2px;margin:10px 90px;bottom:5px;position:absolute;cursor:pointer;transition:all .3s ease-in-out;}
.post-sharebtn:hover{background:#999;color:#fff;}
.post-share .twitter{background-color:#55acee}
.post-share .share{background-color:#3b5998}
.post-share .plus{background-color:#dd4b39}
.fa-chevron-right:before{content:"\f054"}
.fa-share-alt:before{content:"\f1e0"}
.fa-twitter:before{content:"\f099"}
.fa-facebook:before{content:"\f09a"}
.fa-google-plus:before{content:"\f0d5"}
.fa-long-arrow-right:before{content:"\f178"}

3. Sau đó các bạn tìm đến CSS dành cho giao diện điện thoại bằng cách tìm từ khóa "@media only screen and (max-width:640px){" rồi sau đó chép đoạn code sau vào bên dưới nó.

CSSa.read-more,.readm,.post-sharebtn {display:none;}

4. Sau đó tìm đoạn code post-body entry-content sau rồi chèn đoạn code bên dưới vào dưới nó

HTML<a class='read-more' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> Read More </a>
              <div class='share-container'>
               <div class='post-sharebtn'><i class='fa fa-share-alt'/> Share </div>
               <div class='post-share'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/> Twitter</a></li>
                <li><a class='share' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/> Facebook</a></li>
                <li><a class='plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/> Google+</a></li>
                </ul>
                </div>
              </div>

Chú ý: do mỗi blog khác nhau thì dòng bạn tìm sẽ có nhiều khác nhau vì vậy các bạn cứ chèn  từng cái cái nào dc thì thôi chứ cả thánh cũng ko biết cái nào  

5. Tiếp tục tìm thẻ đóng </body> rồi chép code sau vào trước nó

JS<script type='text/javascript'>
//<![CDATA[
$(".share-container").each(function(){var e=$(this);e.find(".post-sharebtn").click(function(){e.find(".post-share").fadeToggle("slow")});$(document).bind("click",function(e){if($(e.target).parents(".share-container").length===0){$(".post-share").fadeOut(300)}})});
//]]>
</script>

6. Lưu Mẫu lại và thưởng thức

Nâng Cao

Thay đổi màu nút

- Tìm chữ số #ef7e5f , nó nằm ngay dòng đầu trừ cái dòng ghi chú /*----*/ này ra. Các bạn thay đổi cái đó là thay đổi dc màu cái nút readmore
- Tìm tiếp màu đó sẽ ra cái avtive, tức là khi nhấn vào nó hiện ra màu đó (để xem thì bạn nhấn đè chử readmore là ra). Cuối cùng là thay đổi màu đó
- Tìm chữ .post-sharebtn ở đây nó sẽ tìm ra hai dòng, các bạn men theo cái dòng mà ko cớ chữ hover là được. Men theo dòng ko có chữ hover sẽ tìm ra cái dòng background:#333C3F và tất nhiên là bạn sẽ thay cái mã màu của nó #333C3F thành màu của bạn rồi.

Thay đổi chữ Readmore và share

- Các bạn tìm hai chữ đó trong đoạn Code HTML và thay đổi nó nha.

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Nút Readmore Và Nút Share Cho Bài Viết Blogger, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.