Thêm tiện ích chia sẻ sau bài viết CSS Responsive

30 tháng 12, 2013

Hầu hết bây giờ khi Design Website hay Widget thì Responsive luôn được ưu tiên áp dụng và tiện ích chia sẻ này cũng được sử dụng CSS Responsive không có Javascripts nên tốc độ load cực nhanh và khá mượt mà.

Thêm tiện ích chia sẻ sau bài viết Responsive

1. Vào Blogger> Bảng điều khiển> Template> Nhấp vào chỉnh sửa HTML
2. Tìm kiếm ]]></ b:skin> và dán đoạn mã CSS sau ngay phía trên nó.

/*-- Social Links --*/
.entry-social{
overflow: hidden;
margin-bottom: 20px;
}
.entry-social a{
display: block;
padding-left: 20px;
color: #FFFFFF !important;
font-weight: 300;
font-size:12px;
}
.entry-social div{
float: left;
margin-right: 5px;
width: 95px;
}
.entry-social div a{
background-color: #FF7F1A;
}
.entry-social .delicious{
width: 98px;
margin-right: 0;
}
.entry-social .fb a{
padding: 7px 10px 7px 26px;
background-image: url('http://picoolio.net/images/2013/11/29/fb14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .fb a:hover{
background-color: #324b81;
}
.entry-social .twitter a{
padding: 7px 10px 7px 32px;
background-image: url('http://picoolio.net/images/2013/11/29/twitter14.png');
background-repeat: no-repeat;
background-position: 8px center;
}
.entry-social .twitter a:hover{
background-color: #01A7dE;
}
.entry-social .gplus a{
padding: 7px 10px 7px 32px;
background-image: url('http://picoolio.net/images/2013/11/29/gplus14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .gplus a:hover{
background-color: #BA3227;
}
.entry-social .linkedin a{
padding: 7px 10px 7px 35px;
background-image: url('http://picoolio.net/images/2013/11/29/linkedin14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .linkedin a:hover{
background-color: #136F9B;
}
.entry-social .pinterest a{
padding: 7px 10px 7px 30px;
background-image: url('http://picoolio.net/images/2013/11/29/pinterest14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .pinterest a:hover{
background-color: #B01C23;
}
.entry-social .delicious a{
padding: 7px 10px 7px 32px;
background-image: url('http://picoolio.net/images/2013/11/29/delicious14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .delicious a:hover{
background-color: #2963B8;
}

3. Tìm <data:post.body/> và thêm đoạn code bên dưới vào dưới mã vừa tìm được

<div class="entry-social">
<div class="fb">
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'>Facebook</a>
</div>
<div class="twitter">
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'>Twitter</a>
</div>
<div class="gplus">
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&imageurl="' rel='nofollow' target='_blank'>Google+</a>
</div>
<div class="linkedin">
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'>Linkedin</a>
</div>
<div class="pinterest">
<a expr:href="http://pinterest.com/pin/create/button/?url=" + data:post.url + "&imageurl="' rel='nofollow' target='_blank'>Pinterest</a>
</div>
<div class="delicious">
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>Delicious</a>
</div>
</div>

4. Lưu mẫu để xem thành quả

Hy vọng tiện ích này sẻ giúp ích cho các bạn!