Share social button atau tombol berbagi ke sosial media memang harus ada di suatu web/blog ,guna untuk mempromosikan web/blog anda kepada pengguna sosial media.
Agar web/blog anda di kenal dan kalau udah di kenal ,walaupun web/blog anda ada di peringkat bawah google ,tapi tetap akan mendapatkan trafick yang bagus asal kan kita nya pintar dalam mempromosikan nya.
Kata para master ini di sebut SEO off page atau apalah ...lupa lagi.
Saya salah satu orang yang menganggap SEO itu mitos :D
Kalau gitu kita langsung saja ke tutorial cara membuat social share button atau cara membuat tombol sosial share.
Model sosial share dengan (G+ ,FB ,Twet)
1. Klik template → edit HTML
2. Salin kode di bawah ini di atas </style>
#share-this{overflow:hidden;margin:10px 18px;line-height:1.4em}#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;width:44px;padding:0;text-align:center;height:41px;overflow:hidden;}#share-this a.this-gp i{margin:5px 0 0;text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ItBCCXC015tHVEqKFzXt3M2q9z8JluSUNJEfLTduwKJgJKzuNkLSnw3AmTqqM5fYoBXBkTUHUPVw80E3aRdYNvTc8gSt_SfhW-3UdassH5hK5Gqv2zjTuQODv8dfRQnmPMQCgUDFqSg/s1600/sosmed22.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}.gp-del{display:none}
.this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}
@media screen and (max-width:414px){#share-this{margin:10px 15px}.gp-del{display:block}#share-this a{min-width:100%;padding:0;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-this a.this-gp i, #share-this i{display:none}#share-this a.this-gp{height:auto;margin:0 auto;padding:0}}
3.Cari kode <data:post.body/> lalu letakkan kode di bawah ini tepat di bawah nya ,kalau ingin tampil di bawah postingan ,kalau ingin tampil di atas postingan maka letakan nya di atas <data:post.body/>
<div id='share-this'>
<a class='this-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/> Facebook</a><a class='this-tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/> Twitter</a><a class='this-gp' expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'> Google+</span></a></div>
Save/Simpan Template.Coba sekarang lihat hasil nya.
Sebelum memposting udah saya tes dan hasil nya seperti ini.
Ini kalau di lihat di mobile ,kalau di lihat di dekstop akan horizontal dan saya lupa screenshoot untuk hasil di dekstop nya.
Selamat mencoba.
Tags:
Tutorial