Cara Pasang Tombol Share WordPress Dan Blogger

HTML<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

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

JS<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>

ShareThis Plugin WordPress

ShareThis Plugin WordPress

Fitur Share Buttom WordPress

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.