Cara Pasang Tombol Share WordPress Dan Blogger Adalah untuk share sebuah flatform lain agar sebuah postingan bisa di lihat orang lain caranya.
Table Of Contents
Cara Pasang Tombol Share
Sangat mudah sekali untuk pasangnya kita menggunkan font awesome soalnya media sosial pakai font itu oleh karena itu agar kelihatan rapi kita samakan saja yuk silakan disimak bostquee.
Font Awesone silakan Klik Tema Edit HTML tempelkan kode ini di atas jangan sampai salah untuk pasangnya dengan di atas.
HTML
1. kode ini juga di atas kode </head> oke
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>Cara Pasang Tombol Share Code CSS Kalau sudah di tempelkan yang di atas silkan tempelkan kode ini juga di atas kode ini code css agar tampilkan kita rapi tidak acak-acakan yabost silakan tempelkan lagi code ini di atas juga.
2. kode ini juga di atas kode Code </head>
CSS
<b:if cond='data:view.isPost'>
<style>
.share{display:block;padding:0;margin:10px 0;}
.post-share,ul.share-links{position:relative;margin:0;padding:0}
.post-share{overflow:hidden;line-height:0;margin:0}.share-links li a,.share-links li a:before{float:left;text-align:center;line-height:32px}.share-links li{width:32px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:20%}.share-links li a{display:inline-block;cursor:pointer;width:100%;height:32px;color:#fff;font-weight:400;font-size:13px;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .17s ease}.is-mobile li.whatsapp-desktop,.share-links li.whatsapp-mobile{display:none}.is-mobile li.whatsapp-mobile{display:inline-block}.share-links li a:before{display:block;width:32px;background-color:rgba(255,255,255,.07);font-size:15px}.share-links li a:hover{opacity:.8}.social a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400}.social .facebook a:before{content:"f09a"}.social .twitter a:before{content:"f099"}.social .gplus a:before{content:"f0d5"}.social .linkedin a:before{content:"f0e1"}.social .pinterest a:before{content:"f0d2"}.social .whatsapp a:before{content:"f232"}.social .external-link a:before{content:"f35d"}.social-color .facebook a{background-color:#3b5999}.social-color .twitter a{background-color:#00acee}.social-color .gplus a{background-color:#db4a39}.social-color .pinterest a{background-color:#ca2127}.social-color .linkedin a{background-color:#0077b5}.social-color .whatsapp a{background-color:#3fbb50}.social-color .external-link a{background-color:#111}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google Plus"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text .pinterest a:after{content:"Pinterest"}.social-text .whatsapp a:after{content:"Whatsapp"}.social-text .external-link a:after{content:"WebSite"}@media screen and (max-width:540px){.share-links li a span{display:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:30px}
}
</style>
</b:if>Java Script
3. silakan tempelkan code ini bawah kode <data:post.body/>
silakan tempelkan code ini atas kode <div class=’post-footer’>
<b:if cond="data:view.isPost">
<div class="share">
<div class="post-share">
<ul class="share-links social social-color">
<b:class cond="data:blog.isMobileRequest" name="is-mobile">
<li class="facebook"><a class="facebook" expr:href=""https://www.facebook.com/sharer.php?u=" + data:post.url" onclick="window.open(this.href, 'windowName', 'width=550, height=650, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow"><span>Facebook</span></a></li>
<li class="twitter"><a class="twitter" expr:href=""https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title" onclick="window.open(this.href, 'windowName', 'width=550, height=450, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow"><span>Twitter</span></a></li>
<li class="pinterest"><a class="pinterest" expr:href=""https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title" onclick="window.open(this.href, 'windowName', 'width=735, height=750, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow"></a></li>
<li class="linkedin"><a class="linkedin" expr:href=""https://www.linkedin.com/shareArticle?url=" + data:post.url" onclick="window.open(this.href, 'windowName', 'width=950, height=650, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow"></a></li>
<li class="whatsapp whatsapp-desktop"><a class="whatsapp" expr:href=""https://web.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url" onclick="window.open(this.href, 'windowName', 'width=900, height=550, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow"></a></li>
<li class="whatsapp whatsapp-mobile"><a class="whatsapp" expr:href=""https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url" rel="nofollow" target="_blank"></a></li>
</b:class></ul>
</div>
<div class="clear">
</div>
</div></b:if>Tahap ke empat kita Save Template
silakan di lihat untuk yang terakhir ini sudah berhasil atau belum jika kawan-kawan sudah berhasil kita tinggal lakukan share ke media sosial terima kasih ini untuk para akun blogger.
Bagi pengguna akun wordpress jangan khawatir saya juga akan melakukan caranya di bawah ini agar bisa melakukan share juga ke media sosial silakan di simak untuk yang punya akun wordpress Cara Pasang Tombol Share.
ShareThis Plugin WordPress
 |
| ShareThis Plugin WordPress |
Cara Pasang Tombol Share Adalah code PHP yang open Source atau bisa anda sebut Free ini sangat lengkap juga untuk fitur-fiturnya ini kita bisa check di demonya ya kawan-kawan.
Fitur Share Buttom WordPress
- Responsive untuk semua template
- WordPress. Di lengkapi piksel.
- Kode PHP.
- Bisa Kontrol editor posting.
- Tombol Berbagi yang sangat lengkap.
- Stiker emoji.
- Pengikut share buttons.
- Gambar share.
- Video share.
Cara Pasang Tombol Share Bagi yang pengguna akun wordpress banyak jugakan fiturnya silakan lihat dulu di akun demo kami kawan sebelum melakukan peninstalan di bawah ini.
sekian dari kami Mboton Dev yang telah memberi pasang tutorial Share ke akun blogger atau wordpress semoga kawan-kawan bermanfaat bagi yang mencari tutorial ini Terima Kasih atas kunjungan anda semua.
Thank you