Widget share bài viết lên MXH với Font Awesome cực đẹp cho blogspot
 |
| Share MXH với Awesome font |
Nếu bạn là một blogger ưa thẩm mỹ thì không ngần ngại gì để làm cho blog của mình thêm đẹp và tiện lợi. Khâu quảng bá blog cũng rất quan trọng, vì vậy để mọi người chú ý đến blog của bạn thì không chỉ nội dung cần đầu tư mà ngay cả cái tiện ích rất nhỏ đó là Share bài viết lên MXH cũng phải đẹp và đặc biệt, điều đó thể hiện đẳng cấp của chủ nhân blog.
Tạo một widget share bài viết cực đẹp.
Hôm nay mình sẽ hướng dẫn các bạn tạo một widget share bài viết lên MXH sao cho tiện lợi và đẹp. Vì widget mới ra cho nên nó sẽ đặc biệt hơn nhiều.
Cách thực hiện.
Bước 1: Đăng nhập vào Blogger
Bước 2: Chọn Mẫu và chọn Chỉnh sửa mẫu ở chế độ HTML
 |
| Chỉnh sửa mẫu ở chế độ HTML |
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css' rel='stylesheet'/>Bước 4: Tìm thẻ ]]></b:skin> rồi coppy đoạn code sau dán lên trước nó.
/* CSS share new with font Awesome*/ .bsshare{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;} .bsshare li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;box-shadow:0 0 0 -1px #e3e3e3;} .bsshare li:hover{box-shadow:4px 4px 0 -1px #e3e3e3;} .bsshare li a{padding:5px 0 6px 35px;color:#fff;display:block;border-radius:2px;} .bsshare li a:hover{background:#555555;color:#fff;} .bsshare li .twitter{background-color:#85c5f5;} .bsshare li .facebook{background-color:#6381c0;} .bsshare li .gplus{background-color:#ed6d5d;} .bsshare li .pinterest{background-color:#e44d52;} .bsshare li .linkedin{background-color:#2c9ad8;} .bsshare li .twitter:hover,.bsshare li .facebook:hover,.bsshare li .gplus:hover, .bsshare li .pinterest:hover,.bsshare li .linkedin:hover{color:#fff;} .bsshare li:last-child{margin-right:0} .bsshare li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:4px 15px;font-family:fontawesome;text-align:center;background:#444444;color:#FFFFFF;line-height:20px;} .bsshare li .fa {display:initial;}Bước 5: Tìm thẻ <data:post.body/> hoặc <div class='post-footer'> rồi coppy đoạn code sau dán lên trên (trước) thẻ vừa tìm
<b:if cond='data:blog.pageType == "item"'> <div class='bsshare'> <ul> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li> <li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul> </div>Bước 6: Lưu template lại và thưởng cmn thức!
Chúc các bạn thành công.
Nhận xét