Khusus untuk blog non amp
Copy kode css dibawah ini dan letakkan di bawah diatas kode ]]></b:skin>
.resp-sharing { font-size:0 } .resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block; transition: all .2s ease-in-out; } .resp-sharing-more-content { display: block; } .clear{ clear: both; display: block; } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 0 5px 5px 0; } .resp-sharing-button { border-radius: 16px; transition: 25ms ease-out; padding: 0.65em 1em 0.65em 0.75em; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; font-size:12px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box } .resp-sharing-button__link:hover { transform: translateY(-2px); } .resp-sharing-button__icon svg { width: 1.2em; height: 1.2em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button svg path{ fill: #fff; } .resp-sharing-button--twitter,.resp-sharing-button--messenger,.resp-sharing-button--linkbtn { background-color: #1da1f2 } .resp-sharing-button--twitter:hover,.resp-sharing-button--messenger:hover,.resp-sharing-button--linkbtn:hover { background-color: #0288D1 } .resp-sharing-button--pinterest { background-color: #bd081c } .resp-sharing-button--pinterest:hover { background-color: #8c0615 } .resp-sharing-button--facebook { background-color: #3b5998 } .resp-sharing-button--facebook:hover { background-color: #2d4373 } .resp-sharing-button--tumblr { background-color: #35465C } .resp-sharing-button--tumblr:hover { background-color: #222d3c } .resp-sharing-button--mix,.resp-sharing-button--okru { background-color: #ff8226 } .resp-sharing-button--mix:hover,.resp-sharing-button--okru:hover { background-color: #FF6F00 } .resp-sharing-button--reddit { background-color: #ff4500 } .resp-sharing-button--reddit:hover { background-color: #BF360C } .resp-sharing-button--linkedin { background-color: #0077b5 } .resp-sharing-button--linkedin:hover { background-color: #046293 } .resp-sharing-button--email { background-color: #777 } .resp-sharing-button--email:hover { background-color: #5e5e5e } .resp-sharing-button--gmail { background-color: #d93025 } .resp-sharing-button--gmail:hover { background-color: #D50000 } .resp-sharing-button--xing { background-color: #1a7576 } .resp-sharing-button--xing:hover { background-color: #114c4c } .resp-sharing-button--whatsapp,.resp-sharing-button--line { background-color: #25D366 } .resp-sharing-button--whatsapp:hover,.resp-sharing-button--line:hover { background-color: #1da851 } .resp-sharing-button--hackernews,.resp-sharing-button--more { background-color: #FF6600 } .resp-sharing-button--hackernews:hover,.resp-sharing-button--more:hover { background-color: #FB6200 } .resp-sharing-button--vk { background-color: #507299 } .resp-sharing-button--vk:hover { background-color: #43648c } .resp-sharing-button--telegram { background-color: #54A9EB; } .resp-sharing-button--telegram:hover { background-color: #4B97D1;} .resp-sharing-button--more{cursor:pointer;} @media screen and (max-width:375px){ .resp-sharing-button__link span{ display: none; } .resp-sharing-button { width: 40px; height: 40px; border-radius: 50%; padding: 0.85em; text-align:center } .resp-sharing-button__icon svg { width: 1.4em; height: 1.4em; margin-right:0; vertical-align:-7px } }Lalu copy kode dibawah ini dan letakkan dimana kamu ingin meletakkan.
<b:if cond='data:blog.pageType == "item"'>
<div class="resp-sharing">
<!-- Sharingbutton Pinterest -->
<a class="resp-sharing-button__link" expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target="_blank" rel="noopener" aria-label="Pinterest" title='Share on Pinterest'> <div class="resp-sharing-button resp-sharing-button--pinterest"><div aria-hidden="true" class="resp-sharing-button__icon"> <svg viewBox="0 0 24 24"><path d="M12.14.5C5.86.5 2.7 5 2.7 8.75c0 2.27.86 4.3 2.7 5.05.3.12.57 0 .66-.33l.27-1.06c.1-.32.06-.44-.2-.73-.52-.62-.86-1.44-.86-2.6 0-3.33 2.5-6.32 6.5-6.32 3.55 0 5.5 2.17 5.5 5.07 0 3.8-1.7 7.02-4.2 7.02-1.37 0-2.4-1.14-2.07-2.54.4-1.68 1.16-3.48 1.16-4.7 0-1.07-.58-1.98-1.78-1.98-1.4 0-2.55 1.47-2.55 3.42 0 1.25.43 2.1.43 2.1l-1.7 7.2c-.5 2.13-.08 4.75-.04 5 .02.17.22.2.3.1.14-.18 1.82-2.26 2.4-4.33.16-.58.93-3.63.93-3.63.45.88 1.8 1.65 3.22 1.65 4.25 0 7.13-3.87 7.13-9.05C20.5 4.15 17.18.5 12.14.5z"/></svg></div><span>Pinterest</span></div> </a>
</div>
</b:if>
Untuk kode lengkapnya bisa dilihat blog berikut ini: https://www.penainfo.com/2019/04/cara-membuat-social-media-sharing.html
SAVE. SELESAI
SAVE. SELESAI
0 Response to "Share Button Pinterst di Blog"
Posting Komentar