Skip to content Skip to sidebar Skip to footer

Cara Pasang Tombol Share Wordpress Dan Blogger

Cara Pasang Tombol Share Wordpress Dan Blogger Adalah untuk share sebuah flatform lain agar sebuah postingan bisa di lihat orang lain caranya 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.
Cara Pasang Tombol Share Wordpress Dan Blogger


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'/>
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="&quot;https://www.facebook.com/sharer.php?u=&quot; + 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="&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + 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="&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + 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="&quot;https://www.linkedin.com/shareArticle?url=&quot; + 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="&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + 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="&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + 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.

ShareThis Plugin Wordpress


ShareThis Plugin Wordpress
ShareThis Plugin Wordpress


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.

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.
Mboton
Mboton Spesialis pembuat Blogger sejak tahun 2013.