Help Nút Share bài viết XF lên FB + Hình đầu tiên hiển thị

2,053 6 1
Cu tí siêu nhân

Cu tí siêu nhân

Corporal
Tham gia
14/01/2016
Bài viết
155
Được Like
54
E muốn làm cái nút share bài viết lên fb
Lướt nát cái google mà ko có cách nào giải quyết được.
Bác nào biết cách hiển thị Hình ảnh đầu tiên của bài viết khi chia sẽ nó lên fb ko chỉ e vs. giống vnxf nhưng vnxf củng bị lỗi, ko hiển thị ảnh.
Cám ơn các bác!
 
Bài viết liên quan
Có addons nào để hiện tập hợp profile post ra trang chủ không ạ? bởi fancyyy193,
Tự động chọn bình luận đầu tiên làm phương án đúng bởi dhv49,
làm sao để ads 5 cmt hiển thị 1 ads bởi sanhpv,
bản xen thấp thì có Start date với view cao hơn lại k có tại sao bởi sanhpv,
Giúp mình tìm phần nội dung muốn chỉnh sửa bởi hieuhien8,
Làm sao để chỉnh DragonByte Credits phải có khi đăng bài bởi singhle,
Bài viết mới
Có addons nào để hiện tập hợp profile post ra trang chủ không ạ? bởi fancyyy193,
Xin addon giống Content disallow specific words 2.0.2 bởi redbull,
làm thế nào để get link embed có nhiều / bởi sanhpv,
Nhờ ae tải giúp addon [OzzModz] Article Cover Image bởi taiphienban,
Hỏi về plugin QA captcha post bởi lanhhuyettu,
Có addon nào chặn nhau ko các bác? bởi quang9292,
tpoclub

tpoclub

Corporal
Tham gia
07/03/2015
Bài viết
115
Được Like
100
Vào addthis.com tạo TK rồi copy 2 đoạn code về dán vào site nha bạn! Có 2 mã, 1 mã vào Style->Templates-> ở cuối template Page_container và 1 vào vị trí bạn muốn đầu hay cuối bài viết, như site mình ở cuối thì mình chọn template ad_message_below nhé!

- Vấn đề hiện bài viết đầu khi share lên facebook bạn search lại trên vnxf, nhưng ở hiện tại mình thấy ko được nữa, nên chịu khó dùng thủ công thôi!

Thân!
 
Cu tí siêu nhân

Cu tí siêu nhân

Corporal
Tham gia
14/01/2016
Bài viết
155
Được Like
54
tpoclub nói:
Vào addthis.com tạo TK rồi copy 2 đoạn code về dán vào site nha bạn! Có 2 mã, 1 mã vào Style->Templates-> ở cuối template Page_container và 1 vào vị trí bạn muốn đầu hay cuối bài viết, như site mình ở cuối thì mình chọn template ad_message_below nhé!

- Vấn đề hiện bài viết đầu khi share lên facebook bạn search lại trên vnxf, nhưng ở hiện tại mình thấy ko được nữa, nên chịu khó dùng thủ công thôi!

Thân!
Nhấn để mở rộng...
bạn cho m xem site b thử, ko biết share ra nó có hình lớn ko bạn. m thì gét mấy cái addthis này do site ngoài chèn vào, lỡ nó die cái mình củng die theo mất công tìm code xóa mệt
 
newbean

newbean

Gefreiter
Tham gia
10/05/2017
Bài viết
50
Được Like
34
addthis còn khối mới die bạn nhé. cứ yên tâm mà xài đi. khi share lên fb nó hình nhỏ giống các page fb thôi
 
virutmt

virutmt

MasterCorporal
Tham gia
03/10/2017
Bài viết
213
Được Like
40
Chào ACE. Mình muốn làm cái nút share lên facebook và google giống hệt vnxf thì phải làm thế nào. Giống từ vị trí tới kích thước :D
1 vấn đề nữa là. Facebook hiện nay tạo nút đăng nhập không được. nó cứ báo lỗi https . nhưng site đã có rồi cũng vẫn báo lỗi vậy
 
H

hacobi1102

MasterCorporal
Tham gia
10/03/2016
Bài viết
356
Được Like
166
virutmt nói:
Chào ACE. Mình muốn làm cái nút share lên facebook và google giống hệt vnxf thì phải làm thế nào. Giống từ vị trí tới kích thước :D
1 vấn đề nữa là. Facebook hiện nay tạo nút đăng nhập không được. nó cứ báo lỗi https . nhưng site đã có rồi cũng vẫn báo lỗi vậy
Nhấn để mở rộng...
HTML: 
<div class="share-container clearfix">
<ul class="rrssb-buttons clearfix">

<!-- START facebook button -->
<li class="rrssb-facebook">
<a href="[URL]https://www.facebook.com/sharer/sharer.php?u=https://vnxf.vn/nut-share-bai-viet-xf-len-fb-hinh-dau-tien-hien-thi.t14038.html[/URL]" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="29" height="29" viewBox="0 0 29 29">
<path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"
class="cls-2" fill-rule="evenodd" />
</svg>
</span>
<span class="rrssb-text">Facebook</span>
</a>
</li>
<!-- END facebook button -->

<!-- START twitter button -->
<!-- END twitter button -->

<!-- START linkedin button -->
<!-- END linkedin button -->

<!-- START googleplus button -->
<li class="rrssb-googleplus">
<a href="[URL]https://plus.google.com/share?url=https://vnxf.vn/nut-share-bai-viet-xf-len-fb-hinh-dau-tien-hien-thi.t14038.html[/URL]" class="popup">
<span class="rrssb-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<g>
<g>
<path d="M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663
c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027
C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068
c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562
c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41
c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511
c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478
c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492
c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479
c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z"/>
<polygon points="23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004
23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 "/>
</g>
</g>
</svg>
</span>
<span class="rrssb-text">Google+</span>
</a>
</li>
<!-- END googleplus button -->

<!-- START pocket button -->
<!-- END pocket button -->

<!-- START buffer button -->
<!-- END buffer button -->

<!-- START tumblr button -->
<!-- END tumblr button -->

<!-- START reddit button -->
<!-- END reddit button -->

<!-- START pinterest button -->
<!-- END pinterest button -->

<!-- START delicious button -->
<!-- END delicious button -->

<!-- START stumbleupon button -->
<!-- END stumbleupon button -->

<!-- START hackernews button -->
<!-- END hackernews button -->

<!-- START vk.com button -->
<!-- END vk.com button -->

<!-- START email button -->
<!-- END email button -->

</ul>
</div>

Mã: 
/* --- SV_rrssbDefault.css --- */

.clearfix:after {
    clear: both;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.rrssb-buttons {
    box-sizing:border-box;
    height: 36px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.rrssb-buttons li {
    box-sizing:border-box;
    float: left;
    height: 100%;
    line-height: 13px;
    list-style: none;
    margin: 0;
    padding: 0 2px;
}
.rrssb-buttons li.rrssb-facebook a {
    background-color: #3b5998;
}
.rrssb-buttons li.rrssb-facebook a:hover {
    background-color: #2C4A89;
}
.rrssb-buttons li.rrssb-twitter a {
    background-color: #00aced;
}
.rrssb-buttons li.rrssb-twitter a:hover {
    background-color: #009FE0;
}
.rrssb-buttons li.rrssb-linkedin a {
    background-color: #007bb6;
}
.rrssb-buttons li.rrssb-linkedin a:hover {
    background-color: #006EA9;
}
.rrssb-buttons li.rrssb-googleplus a {
    background-color: #dd4b39;
}
.rrssb-buttons li.rrssb-googleplus a:hover {
    background-color: #D03E2C;
}
.rrssb-buttons li.rrssb-pocket a {
    background-color: #d3505a;
}
.rrssb-buttons li.rrssb-pocket a:hover {
    background-color: #C6434D;
}
.rrssb-buttons li.rrssb-buffer a {
    background-color: #323b43;
}
.rrssb-buttons li.rrssb-buffer a:hover {
    background-color: #252E36;
}
.rrssb-buttons li.rrssb-tumblr a {
    background-color: #32506d;
}
.rrssb-buttons li.rrssb-tumblr a:hover {
    background-color: #254360;
}
.rrssb-buttons li.rrssb-reddit a {
    background-color: #5f99cf;
}
.rrssb-buttons li.rrssb-reddit a:hover {
    background-color: #528CC2;
}
.rrssb-buttons li.rrssb-pinterest a {
    background-color: #cc2127;
}
.rrssb-buttons li.rrssb-pinterest a:hover {
    background-color: #BF141A;
}
.rrssb-buttons li.rrssb-delicious a {
    background-color: #3271cb;
}
.rrssb-buttons li.rrssb-delicious a:hover {
    background-color: #2362BC;
}
.rrssb-buttons li.rrssb-stumbleupon a {
    background-color: #EB4823;
}
.rrssb-buttons li.rrssb-stumbleupon a:hover {
    background-color: #DC3914;
}
.rrssb-buttons li.rrssb-hackernews a {
    background-color: #f60;
}
.rrssb-buttons li.rrssb-hackernews a:hover {
    background-color: rgb(245, 92, 0)
}
.rrssb-buttons li.rrssb-vk a {
    background-color: #4d71a9;
}
.rrssb-buttons li.rrssb-vk a:hover {
    background-color: #43679F;
}
.rrssb-buttons li.rrssb-email a {
    background-color: #3498db;
}
.rrssb-buttons li.rrssb-email a:hover {
    background-color: #278BCE;
}
.rrssb-buttons li a {
    font-weight: bold;
font-size: 11px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
border-radius: 2px;
text-transform: uppercase;
text-decoration: none !important;

    box-sizing:border-box;
    display: block;
    height: 100%;
    padding: 11px 7px 12px 27px;
    position: relative;
    text-align: center;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}
.rrssb-buttons li a .rrssb-icon {
    display: block;
    left: 10px;
    padding-top: 9px;
    position: absolute;
    top: 0;
    width: 10%;
}
.rrssb-buttons li a .rrssb-icon svg {
    height: 17px;
    width: 17px;
}
.rrssb-buttons li a .rrssb-icon svg path,
.rrssb-buttons li a .rrssb-icon svg polygon {
    fill: #fff;
}
.rrssb-buttons li a .rrssb-text {
    color: #fff;
}
.rrssb-buttons li a:active {
    box-shadow: inset 1px 3px 15px 0 rgba(22, 0, 0, 0.25);
}
.rrssb-buttons li.small a {
    padding: 0;
}
.rrssb-buttons li.small a .rrssb-icon {
    left: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: auto;
    width: 100%;
}
.rrssb-buttons li.small a .rrssb-text {
    visibility: hidden;
}
.rrssb-buttons.large-format {
    height: auto;
}
.rrssb-buttons.large-format li {
    height: auto;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(1) a {
    font-size: 20px;
    font-size: 4vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(2) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(2) ~ li a {
    font-size: 16px;
    font-size: 2vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(3) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(3) ~ li a {
    font-size: 14px;
    font-size: 1.7vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(4) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(4) ~ li a {
    font-size: 13px;
    font-size: 1.4vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(5) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(5) ~ li a {
    font-size: 13px;
    font-size: 1.2vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(6) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(6) ~ li a {
    font-size: 12px;
    font-size: 1.05vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(7) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(7) ~ li a {
    font-size: 11px;
    font-size: .9vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(8) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(8) ~ li a {
    font-size: 11px;
    font-size: .8vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(9) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(9) ~ li a {
    font-size: 11px;
    font-size: .7vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(10) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(10) ~ li a {
    font-size: 11px;
    font-size: .6vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(11) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(11) ~ li a {
    font-size: 11px;
    font-size: .5vw;
}
.rrssb-buttons.large-format li a {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    border-radius: 0.2em;
    padding: 8.5% 0 8.5% 12%;
}
.rrssb-buttons.large-format li a .rrssb-icon {
    height: 100%;
    left: 7%;
    padding-top: 0;
    width: 12%;
}
.rrssb-buttons.large-format li a .rrssb-icon svg {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.rrssb-buttons.large-format li a .rrssb-text {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.rrssb-buttons.small-format {
    padding-top: 5px;
}
.rrssb-buttons.small-format li {
    height: 80%;
    padding: 0 1px;
}
.rrssb-buttons.small-format li a .rrssb-icon {
    height: 100%;
    padding-top: 0;
}
.rrssb-buttons.small-format li a .rrssb-icon svg {
    height: 48%;
    position: relative;
    top: 6px;
    width: 80%;
}
.rrssb-buttons.tiny-format {
    height: 22px;
    position: relative;
}
.rrssb-buttons.tiny-format li {
    padding-right: 7px;
}
.rrssb-buttons.tiny-format li a {
    background-color: transparent;
    padding: 0;
}
.rrssb-buttons.tiny-format li a .rrssb-icon svg {
    height: 70%;
    width: 100%;
}
.rrssb-buttons.tiny-format li a:hover,
.rrssb-buttons.tiny-format li a:active {
    background-color: transparent;
}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg polygon {
    fill: #3b5998;
}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #2C4A89;
}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg polygon {
    fill: #00aced;
}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #009FE0;
}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg polygon {
    fill: #007bb6;
}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #006EA9;
}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg polygon {
    fill: #dd4b39;
}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #D03E2C;
}
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg polygon {
    fill: #d3505a;
}
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #C6434D;
}
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon svg polygon {
    fill: #323b43;
}
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #252E36;
}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg polygon {
    fill: #32506d;
}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #254360;
}
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg polygon {
    fill: #5f99cf;
}
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #528CC2;
}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg polygon {
    fill: #cc2127;
}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #BF141A;
}
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg polygon {
    fill: #3271cb;
}
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #2362BC;
}
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon svg polygon {
    fill: #EB4823;
}
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #DC3914;
}
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg polygon {
    fill: #f60;
}
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: rgb(245, 92, 0);
}
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg polygon {
    fill: #4d71a9;
}
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #43679F;
}
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg polygon {
    fill: #3498db;
}
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #278BCE;
}
 
virutmt

virutmt

MasterCorporal
Tham gia
03/10/2017
Bài viết
213
Được Like
40
Gì thế này. view rồi copy ra đây à
hacobi1102 nói:
HTML: 
<div class="share-container clearfix">
<ul class="rrssb-buttons clearfix">

<!-- START facebook button -->
<li class="rrssb-facebook">
<a href="[URL]https://www.facebook.com/sharer/sharer.php?u=https://vnxf.vn/nut-share-bai-viet-xf-len-fb-hinh-dau-tien-hien-thi.t14038.html[/URL]" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="29" height="29" viewBox="0 0 29 29">
<path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"
class="cls-2" fill-rule="evenodd" />
</svg>
</span>
<span class="rrssb-text">Facebook</span>
</a>
</li>
<!-- END facebook button -->

<!-- START twitter button -->
<!-- END twitter button -->

<!-- START linkedin button -->
<!-- END linkedin button -->

<!-- START googleplus button -->
<li class="rrssb-googleplus">
<a href="[URL]https://plus.google.com/share?url=https://vnxf.vn/nut-share-bai-viet-xf-len-fb-hinh-dau-tien-hien-thi.t14038.html[/URL]" class="popup">
<span class="rrssb-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<g>
<g>
<path d="M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663
c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027
C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068
c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562
c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41
c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511
c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478
c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492
c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479
c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z"/>
<polygon points="23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004
23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 "/>
</g>
</g>
</svg>
</span>
<span class="rrssb-text">Google+</span>
</a>
</li>
<!-- END googleplus button -->

<!-- START pocket button -->
<!-- END pocket button -->

<!-- START buffer button -->
<!-- END buffer button -->

<!-- START tumblr button -->
<!-- END tumblr button -->

<!-- START reddit button -->
<!-- END reddit button -->

<!-- START pinterest button -->
<!-- END pinterest button -->

<!-- START delicious button -->
<!-- END delicious button -->

<!-- START stumbleupon button -->
<!-- END stumbleupon button -->

<!-- START hackernews button -->
<!-- END hackernews button -->

<!-- START vk.com button -->
<!-- END vk.com button -->

<!-- START email button -->
<!-- END email button -->

</ul>
</div>

Mã: 
/* --- SV_rrssbDefault.css --- */

.clearfix:after {
    clear: both;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.rrssb-buttons {
    box-sizing:border-box;
    height: 36px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.rrssb-buttons li {
    box-sizing:border-box;
    float: left;
    height: 100%;
    line-height: 13px;
    list-style: none;
    margin: 0;
    padding: 0 2px;
}
.rrssb-buttons li.rrssb-facebook a {
    background-color: #3b5998;
}
.rrssb-buttons li.rrssb-facebook a:hover {
    background-color: #2C4A89;
}
.rrssb-buttons li.rrssb-twitter a {
    background-color: #00aced;
}
.rrssb-buttons li.rrssb-twitter a:hover {
    background-color: #009FE0;
}
.rrssb-buttons li.rrssb-linkedin a {
    background-color: #007bb6;
}
.rrssb-buttons li.rrssb-linkedin a:hover {
    background-color: #006EA9;
}
.rrssb-buttons li.rrssb-googleplus a {
    background-color: #dd4b39;
}
.rrssb-buttons li.rrssb-googleplus a:hover {
    background-color: #D03E2C;
}
.rrssb-buttons li.rrssb-pocket a {
    background-color: #d3505a;
}
.rrssb-buttons li.rrssb-pocket a:hover {
    background-color: #C6434D;
}
.rrssb-buttons li.rrssb-buffer a {
    background-color: #323b43;
}
.rrssb-buttons li.rrssb-buffer a:hover {
    background-color: #252E36;
}
.rrssb-buttons li.rrssb-tumblr a {
    background-color: #32506d;
}
.rrssb-buttons li.rrssb-tumblr a:hover {
    background-color: #254360;
}
.rrssb-buttons li.rrssb-reddit a {
    background-color: #5f99cf;
}
.rrssb-buttons li.rrssb-reddit a:hover {
    background-color: #528CC2;
}
.rrssb-buttons li.rrssb-pinterest a {
    background-color: #cc2127;
}
.rrssb-buttons li.rrssb-pinterest a:hover {
    background-color: #BF141A;
}
.rrssb-buttons li.rrssb-delicious a {
    background-color: #3271cb;
}
.rrssb-buttons li.rrssb-delicious a:hover {
    background-color: #2362BC;
}
.rrssb-buttons li.rrssb-stumbleupon a {
    background-color: #EB4823;
}
.rrssb-buttons li.rrssb-stumbleupon a:hover {
    background-color: #DC3914;
}
.rrssb-buttons li.rrssb-hackernews a {
    background-color: #f60;
}
.rrssb-buttons li.rrssb-hackernews a:hover {
    background-color: rgb(245, 92, 0)
}
.rrssb-buttons li.rrssb-vk a {
    background-color: #4d71a9;
}
.rrssb-buttons li.rrssb-vk a:hover {
    background-color: #43679F;
}
.rrssb-buttons li.rrssb-email a {
    background-color: #3498db;
}
.rrssb-buttons li.rrssb-email a:hover {
    background-color: #278BCE;
}
.rrssb-buttons li a {
    font-weight: bold;
font-size: 11px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
border-radius: 2px;
text-transform: uppercase;
text-decoration: none !important;

    box-sizing:border-box;
    display: block;
    height: 100%;
    padding: 11px 7px 12px 27px;
    position: relative;
    text-align: center;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}
.rrssb-buttons li a .rrssb-icon {
    display: block;
    left: 10px;
    padding-top: 9px;
    position: absolute;
    top: 0;
    width: 10%;
}
.rrssb-buttons li a .rrssb-icon svg {
    height: 17px;
    width: 17px;
}
.rrssb-buttons li a .rrssb-icon svg path,
.rrssb-buttons li a .rrssb-icon svg polygon {
    fill: #fff;
}
.rrssb-buttons li a .rrssb-text {
    color: #fff;
}
.rrssb-buttons li a:active {
    box-shadow: inset 1px 3px 15px 0 rgba(22, 0, 0, 0.25);
}
.rrssb-buttons li.small a {
    padding: 0;
}
.rrssb-buttons li.small a .rrssb-icon {
    left: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: auto;
    width: 100%;
}
.rrssb-buttons li.small a .rrssb-text {
    visibility: hidden;
}
.rrssb-buttons.large-format {
    height: auto;
}
.rrssb-buttons.large-format li {
    height: auto;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(1) a {
    font-size: 20px;
    font-size: 4vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(2) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(2) ~ li a {
    font-size: 16px;
    font-size: 2vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(3) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(3) ~ li a {
    font-size: 14px;
    font-size: 1.7vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(4) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(4) ~ li a {
    font-size: 13px;
    font-size: 1.4vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(5) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(5) ~ li a {
    font-size: 13px;
    font-size: 1.2vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(6) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(6) ~ li a {
    font-size: 12px;
    font-size: 1.05vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(7) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(7) ~ li a {
    font-size: 11px;
    font-size: .9vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(8) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(8) ~ li a {
    font-size: 11px;
    font-size: .8vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(9) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(9) ~ li a {
    font-size: 11px;
    font-size: .7vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(10) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(10) ~ li a {
    font-size: 11px;
    font-size: .6vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(11) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(11) ~ li a {
    font-size: 11px;
    font-size: .5vw;
}
.rrssb-buttons.large-format li a {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    border-radius: 0.2em;
    padding: 8.5% 0 8.5% 12%;
}
.rrssb-buttons.large-format li a .rrssb-icon {
    height: 100%;
    left: 7%;
    padding-top: 0;
    width: 12%;
}
.rrssb-buttons.large-format li a .rrssb-icon svg {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.rrssb-buttons.large-format li a .rrssb-text {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.rrssb-buttons.small-format {
    padding-top: 5px;
}
.rrssb-buttons.small-format li {
    height: 80%;
    padding: 0 1px;
}
.rrssb-buttons.small-format li a .rrssb-icon {
    height: 100%;
    padding-top: 0;
}
.rrssb-buttons.small-format li a .rrssb-icon svg {
    height: 48%;
    position: relative;
    top: 6px;
    width: 80%;
}
.rrssb-buttons.tiny-format {
    height: 22px;
    position: relative;
}
.rrssb-buttons.tiny-format li {
    padding-right: 7px;
}
.rrssb-buttons.tiny-format li a {
    background-color: transparent;
    padding: 0;
}
.rrssb-buttons.tiny-format li a .rrssb-icon svg {
    height: 70%;
    width: 100%;
}
.rrssb-buttons.tiny-format li a:hover,
.rrssb-buttons.tiny-format li a:active {
    background-color: transparent;
}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg polygon {
    fill: #3b5998;
}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #2C4A89;
}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg polygon {
    fill: #00aced;
}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #009FE0;
}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg polygon {
    fill: #007bb6;
}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #006EA9;
}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg polygon {
    fill: #dd4b39;
}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #D03E2C;
}
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg polygon {
    fill: #d3505a;
}
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #C6434D;
}
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon svg polygon {
    fill: #323b43;
}
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #252E36;
}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg polygon {
    fill: #32506d;
}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #254360;
}
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg polygon {
    fill: #5f99cf;
}
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #528CC2;
}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg polygon {
    fill: #cc2127;
}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #BF141A;
}
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg polygon {
    fill: #3271cb;
}
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #2362BC;
}
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon svg polygon {
    fill: #EB4823;
}
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #DC3914;
}
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg polygon {
    fill: #f60;
}
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: rgb(245, 92, 0);
}
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg polygon {
    fill: #4d71a9;
}
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #43679F;
}
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg polygon {
    fill: #3498db;
}
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #278BCE;
}
Nhấn để mở rộng...
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
D Help Xin cách ẩn toolbar và nút attach Addon, Styling and Customization Questions 0
tunorri Help Cách để di chuyển nút cảm xúc? Addon, Styling and Customization Questions 0
T Help Thêm nút facebook share vào bài viết Addon, Styling and Customization Questions 1
Dong Help hỏi cách đổi vị trí của nút share Addon, Styling and Customization Questions 0
D Help cách sửa cái nút like thành share Addon, Styling and Customization Questions 0

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
Inbox PVS

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom