blogagc.com - Tombol share FB/Facebook, Twitter dan WA/Whatsapp sangat berguna bagi pembaca blog anda yang ingin menshare artikel blog anda ke sosial media misalnya seperti Facebook, Twitter, Pinterest dan juga WA. Lalu bagaimana cara pasang tombol share FB, Twitter dan WA ?. Simak caranya berikut ini.
Tombol share ke sosial media cukup banyak modelnya. Dari sekian banyak tombol share ke sosial media kali ini saya akan memberikan model share ke sosial media yang cukup praktis dan enak dipandang mata.
Tombol share ke sosial media ini bisa dipasang dibawah postingan blog anda pada platform blogger atau blogspot. Jadi jika anda yang memiliki blog dengan platform WP atau Wordpress maka ini bukan caranya karena anda bisa gunakan caranya dengan memanfaatkan plugin yang ada di WP itu sendiri.
Baiklah berikut ini cara memasang tombol share Facebook, Twitter, Pinterest dan WA:
Cara Pasang Tombol Share FB, Twitter, WA dibawah Postingan Blog
1. Login ke blogger.com kemudian klik tema > Edit HTML
2. Kemudian copy kode berikut ini diatas kode </head>
<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>
3. Kemudian cari kode <data:post.body/> yang kedua atau ketiga, atau di atas kode <div class=’post-footer’>. Kemudian copy kode berikut ini diatas kode footer tadi.
<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'/></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'/></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'/></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'/></li>
</ul>
</div>
<div class='clear'/>
</div>
</b:if>
4. Kemudian klik Simpan/Save.
Demikianlah tips bagaimana cara pasang tombol share FB, Twitter dan WA yang bisa anda coba untuk blog yang anda miliki. Semoga tutorial diatas bermanfaat untuk anda.
