Tạo Nút Chia Sẻ Trên Thumbnail Cho Bài Viết Blogger - Blogspot

Nút chia sẽ bài viết thì dường như không blog nào là không có nó. Bởi nó giúp bài viết của chúng ta tiệp cận được nhiều hơn khách tham quan. Trên mạng có rất nhiều bài viết nói về vấn đề này nhưng đa số đều là tạo nút chia sẽ sau bài viết để tiện chia sẻ. Hôm nay phá cách. Anh Nhím Blog sẽ hướng dẫn các bạn tạo một cái nút chia sẻ nằm ngay trên ảnh  Thumbnail của bài viết ngoài trang chủ. Đặc biệt là khi rê chuột vào mới hiện ra.

Mục lục:

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

Mục Đích

• Tạo cho blogspot đẹp hơn, tính khoa học hơn
• Nút chia sẻ nhỏ gọn nằm ngay ờ mỗi bài viết ngoài trang chủ giúp cho mọi người chia sẻ nhanh hơn nếu như họ đã đọc qua rồi mà quên chia sẻ
• Và còn nhiều hơn nữa....... 

Thực Hiện

1. Đầu tiên các bạn đăng nhập Blogger >> Mẫu >> Chỉnh Sửa HTML
2. Sau đó chép toàn bộ đoạn CSS sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style> nếu có

CSS/* CSS Homepage Share */
ul.twitfbshare{clear:both;float:left;list-style:none outside none;position:absolute;z-index:10;margin:0;padding:0;top:0px;left:0px;line-height:normal;overflow:hidden;}
ul.twitfbshare li{text-align:left;float:left;margin-bottom:0;margin-top:-30px;opacity:0;padding:0;transition:all 0.3s;}
.post:hover .twitfbshare li{opacity:1;margin-top:0;}
ul.twitfbshare li a{background-clip:padding-box;background-repeat:no-repeat;display:block;overflow:hidden;text-align:center;text-transform:uppercase;white-space:nowrap;width:30px;height:30px;line-height:30px;position:relative;margin:0;padding:0;font-size:14px;font-weight:normal;background-color:#fff;color:#999;transition:all 0.3s;}
ul.twitfbshare li a:hover{color:#fff;}
ul.twitfbshare li a.f-like:hover {background-color:#3c5b9b;}
ul.twitfbshare li a.t-share:hover {background-color:#19bfe5;}
ul.twitfbshare li a.gplus-share:hover {background-color:#d44132;}

3. Sau đó các bạn tìm đoạn code " <article class='post hentry'>" sau đó nhìn xuống thêm mấy dòng nữa là thấy dòng "<b:if cond='data:post.thumbnailUrl'>".lúc này chép toàn bộ code bên dưới vào sau cái dòng trên.

HTML<ul class='twitfbshare'>
        <li>
            <a class='f-like' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'/></a> 
        </li>
        <li>
            <a class='t-share' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet On Twitter'><i class='fa fa-twitter'/></a> 
        </li>
        <li>
            <a class='gplus-share' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Google Plus'><i class='fa fa-google-plus'/></a> 
        </li>
    </ul>

sau khi chép xong nó sẻ có như trong hình dưới,

4. Lưu mẫu và xem thánh quả
5. Demo tại blog mình luôn. Các bạn rê chuột vào hình ảnh bài viết trên trang chủ là thấy

Demo
click to view

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Nút Chia Sẻ Trên Thumbnail Cho Bài Viết Blogger - Blogspot, 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.