Hướng Dẫn Chèn 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ướng Dẫn Chèn Nút Chia Sẻ Trên Thumbnail Cho Bài Viết Blogger - Blogspot

Hôm nay phá cách. Chu Bằng AiTi 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.
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ả.

Kết Luận:

Vậy là mình Hướng Dẫn Chèn 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!

Nguồn; KenhVietPro