Cara Memasang Share Media Sosial Di Blog - Tombol berbagi di blog sangatlah penting bagi terciptanya pengunjung yang banyak dan membuat blog semakin lebih dikenal. Dengan memasang tombol share media sosial di postingan maka akan artikel yang dirasa bermanfaat akan dengan mudah dibagikan pengunjung blog ke jaringan media sosial lain, seperti Facebook, Twitter, Line dan lain sebagainya.
Nah, sebelumnya saya pernah membuat tutorial tentang Cara Memasang Tombol Share Media Sosial Whatsapp Di Blog.
Pada kesempatan kali ini saya akan mencoba kembali berbagi tentang bagaimana cara memasang tombol share media sosial di blog selain whatsapp, kepada anda. simak caranya dibawah ini.
Tombol share media sosial yang saya tuliskan kali ini terdiri dari sosial media facebook, google plus, dan twitter. Dengan adanya ketiga media sosial tersebut dapat memudahkan pengunjung blog dalam membagikan artikel dari blog anda yang dirasa membawa manfaat dan berguna. Langsung saja!
1. Login ke akun Blogger > Template > Edit HTML.
2. Kemudian tempelkan kode css dibawah ini tepat diatas kode "</style>". untuk mengatur posisi serta ukuran dan tampilan yang sesuai dengan blog anda.
3. Setelah itu cari kode "<div class='post-footer'>" kemudian tambahkan dibawahnya.
4. Simpan template.
Hasilnya dapat anda lihat seperti pada setiap postingan blog ini (jika belum diganti)
Demikian Cara Memasang Share Media Sosial Di Blog Selain Whatsapp, semoga berguna dan bermanfaat bagi anda.
Nah, sebelumnya saya pernah membuat tutorial tentang Cara Memasang Tombol Share Media Sosial Whatsapp Di Blog.
Pada kesempatan kali ini saya akan mencoba kembali berbagi tentang bagaimana cara memasang tombol share media sosial di blog selain whatsapp, kepada anda. simak caranya dibawah ini.
Cara Memasang Share Media Sosial Di Blog Selain Whatsapp
Tombol share media sosial yang saya tuliskan kali ini terdiri dari sosial media facebook, google plus, dan twitter. Dengan adanya ketiga media sosial tersebut dapat memudahkan pengunjung blog dalam membagikan artikel dari blog anda yang dirasa membawa manfaat dan berguna. Langsung saja!
1. Login ke akun Blogger > Template > Edit HTML.
2. Kemudian tempelkan kode css dibawah ini tepat diatas kode "</style>". untuk mengatur posisi serta ukuran dan tampilan yang sesuai dengan blog anda.
.bottomshare{display:block;padding:0 20px;margin:auto;text-align:center}
/* Share Button */
.sharede,.sharesimp{position:relative;}
.sharesimp{margin:20px auto 0 auto;}
.sharesimp a.fb,.sharesimp a.gp,.sharesimp a.tw{position:relative;display:inline-block;margin:0 0 5px 0;color:#fff;text-shadow:none;padding:12px 0;width:32.9%;font-size:16px;font-weight:700;overflow:hidden;transition:all .3s}
.sharesimp a.gp {background:#f20000;}
.sharesimp a.fb {background:#516ca4;}
.sharesimp a.tw {background:#00baff;}
.fbtea,.gotea,.plustea,.twtea{font-size:2.5rem;vertical-align:middle;position:absolute;left:5px;top:5px;color:rgba(255,255,255,.5);transition:all .3s}
.sharesimp a:hover .fbtea,.sharesimp a:hover .gotea,.sharesimp a:hover .plustea,.sharesimp a:hover .twtea{color:rgba(255,255,255,.3);transform:scale(1.3) rotate(-20deg)}
.sharesimp a.fb:hover,.sharesimp a.gp:hover,.sharesimp a.tw:hover{color:#fff;background:#34495e;}
.sharesimp a.fb:active,.sharesimp a.gp:active,.sharesimp a.tw:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
3. Setelah itu cari kode "<div class='post-footer'>" kemudian tambahkan dibawahnya.
<span class='bottomshare'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharesimp"><div class="sharede"> \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<i class="fa fa-google-plus gotea"></i> Google</a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<i class="fa fa-facebook fbtea"></i> Facebook</a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
<i class="fa fa-twitter twtea"></i> Twitter</a> \
</div><div class="clear"></div></div> \
');
//]]>
</script>
<div class='clear'/>
</span>
4. Simpan template.
Hasilnya dapat anda lihat seperti pada setiap postingan blog ini (jika belum diganti)
Demikian Cara Memasang Share Media Sosial Di Blog Selain Whatsapp, semoga berguna dan bermanfaat bagi anda.
