Seringkali kita bingung untuk membuat tombol Share Sosial Media pada blog kesayangan kita, dimanna tombol Share Sosial Media ini sangat penting sekali untuk memudahkan pembaca membagikan artikel yang sedang di bacanya, kali ini saya akan memberikan sedikit solusi untuk masalah ini yaitu berupa kode HTML tombol Share Sosial Media yang harus sobat copy paste ke blog kesayangan sobat, simak kodenya .
Catatan : bila pada blog sobat belum di sematkan plugin JQUERY maka tambahakan di atas kode di bawah ini plugin " <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> " agar semua kode HTML tersebut bisa bekerja, namun bila templete sobat telah tersemat plugin Jquery maka kodenya seperti di bawah ini :
<!--button share-->
<style>
.sharing-buttons{
list-style: none;
}
.sharing-buttons li{
display: inline;
}
</style>
<div id='fblike-share'/>
<ul class='sharing-buttons'>
<li id='facebook-share'/>
<li id='twitter-share'/>
<li id='google-share'/>
<li id='tumblr-share'/>
<li id='pinterest-share'/>
<li id='getpocket-share'/>
<li id='reddit-share'/>
<li id='linkedin-share'/>
<li id='wordpress-share'/>
<li id='pinboard-share'/>
<li id='mailto-share'/>
</ul>
<br/>
<script type='text/javascript'>
var DataPostUrl = "<data:post.url/>";
var DataPostTitle = "<data:post.title/>";
var DataBlogtUrl = "<data:blog.url/>";
var DataBlogTitle = "<data:blog.title/>";
var DataBlogDescription = "Get Your favorite music here !";
</script>
<script type='text/javascript'>
//<![CDATA[
$( document ).ready(function() {
$("#fblike-share").append(" <fb:like action='like' align='center' href='"+DataPostUrl+"' layout='button_count' share='false' show_faces='true'/><br/><br/> ");
$("#facebook-share").append(" <a href='https://www.facebook.com/sharer/sharer.php?u="+DataPostUrl+"&t="+DataPostTitle+" | "+DataBlogTitle+"' target='_blank' title='Share on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9VIjM6qp0A2VXfmMlE32Z5WfnkRVmTud-35lpcfzY-TZzkk9N1S6KTooxzoVk4GNPu_22Bgw1o65mgOgwXJ-S8-T5bFB9jPSxSDkj_6aR0k-34lOs6l8AcFclfF7nvXSTdKtshS4zC8M/h120/Facebook.png'/></a> ");
$("#twitter-share").append(" <a href='https://twitter.com/share?url="+encodeURIComponent(DataPostUrl)+"&text="+encodeURIComponent(DataPostTitle+" | "+DataBlogTitle+" | "+DataBlogDescription)+"' target='_blank' title='Tweet'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZswu41AeThsWrxaGF_cP2svVsjB22PIP7pwPngw4htBb30l1a3iJZR78bu817XoZNt4KiquzYITutUfF_fRuVyZC7gRJL_6Ce6_SxTgO3hB3FwhZS5HyFYc6vnwXWdZTG6uEjXrkLfdM/h120/Twitter.png'/></a> ");
$("#google-share").append(" <a href='https://plus.google.com/share?url="+DataPostUrl+"' target='_blank' title='Share on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaLbHNkArpCthz6n3PajhZZJLu2Im2cezwCSt7M3_lHRmHchlwzc0S3IQmGeFwYpYe__5QsxvELNi7W-uriw094-cRFTIpBfm8DnMa7O-g7__jb48gYuvSOy9Qz-KRT2ZKjnL36DU9SNg/h120/Google+.png'/></a> ");
$("#tumblr-share").append(" <a href='http://www.tumblr.com/share?v=3&u="+DataPostUrl+"&t="+DataPostTitle+" | "+DataBlogTitle+" | "+DataBlogDescription+"&s=' target='_blank' title='Post to Tumblr'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVeEcXuS_w2IVhVaI7XafRLfWUHOy6WuR0a1mn3LILRWsaEAsNFokNWWXR051CqhEjGi8eYIdbynv0PxNeeo2Gsprnb0im93yuUhSNIhMDviN5C44rbwohAZTv57ZMAe_uikADR-g-rM/h120/Tumblr.png'/></a> ");
$("#pinterest-share").append(" <a href='http://pinterest.com/pin/create/button/?url="+DataPostUrl+"&description="+DataPostTitle+" | "+DataBlogTitle+" | "+DataBlogDescription+"' target='_blank' title='Pin it'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj15vgd_oXxjW33yFtBfY-rAjWlCRyc-RmbtDXfOFmEpm_VQomhhj4WYnotatTHbz4KaogQNpQja7LdZTXD3YbNERCCMGpoPXShwbSb-P76jwDVfX2h6OJGEbQ875FWyM3ehp8dP7wvGA/h120/Pinterest.png'/></a> ");
$("#getpocket-share").append(" <a href='https://getpocket.com/save?url="+DataPostUrl+"&title="+DataPostTitle+" | "+DataBlogTitle+" | "+DataBlogDescription+"' target='_blank' title='Add to Pocket'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM3wPIWhUZtxwgsPJZ0eYtUWpEbb_Obc6PC0I3s41fTgvPG_vMTpkiUEJtslGEqxWaIzW05XNHOf6Pt7r2S0bQKWsqzS5xJgT4APxkl3WEFyCMibPXhxXl7gCUAmx-Ki4kGQYI1Lt28K8/h120/Pocket.png'/></a> ");
$("#reddit-share").append(" <a href='http://www.reddit.com/submit?url="+DataPostUrl+"&title="+DataPostTitle+" | "+DataBlogTitle+" | "+DataBlogDescription+"' target='_blank' title='Submit to Reddit'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmUdthlLd74EVuLTi5turQ5Sz3V7LOhJBGXIvnLCBaYPVLkoee2pty26R0TG7_vu-3MZn5lM7y5Z1-zS05vuKRFfhJ5YxuE-NgW5rJFxwgYjbpWX3GojISzoJcj_Pq3ZW0cl9dEU_FGuI/h120/Reddit.png'/></a> ");
$("#linkedin-share").append(" <a href='http://www.linkedin.com/shareArticle?mini=true&26url="+DataPostUrl+"&title="+DataPostTitle+" | "+DataBlogTitle+"&summary="+DataBlogDescription+"&source="+DataBlogtUrl+"' target='_blank' title='Share on LinkedIn'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp5PneVg5g39V-I5VkVF7SXEUICXlsPUWF8CK_4MewjrIq6zjB2Vv2Ig_6AnkYyFWwUzmNUmU0gsPMKe3pjG2NE0m1humN15xZscDsiLd-EOD4U-QRKYGafQwWMEd79a5TS-N7p-PEJ-M/h120/LinkedIn.png'/></a> ");
$("#wordpress-share").append(" <a href='http://wordpress.com/press-this.php?u="+DataPostUrl+"&t="+DataPostTitle+" | "+DataBlogTitle+"&s="+DataBlogDescription+"' target='_blank' title='Publish on WordPress'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiciFasrBZnvkhjcphsKCTdPGEECUmB1M1u6cofUVj1tUDPe-lrtPAncNVMpiMoM41-P85gEv6sC-d9C7SNF3JndcGIN3CcfE1IlPuYQt-eHsRow3CihE5noZGXUnXnlx3z0YQ_rIeMzqE/h120/Wordpress.png'/></a> ");
$("#pinboard-share").append(" <a href='https://pinboard.in/popup_login/?url="+DataPostUrl+"&title="+DataPostTitle+" | "+DataBlogTitle+"&description="+DataBlogDescription+"' target='_blank' title='Save to Pinboard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgczHH473scAfzWs7iOEtJgY8-5BiKpiJGon7l5poKjzlGfNye4mxJL8ET6ysZxx2QBFEO6nfb3DNQHle54G7HYPCjF6uv5BDFwgLkqZqC-xc1TlkwF-d2-um8o1dfs4-sAVWCUW2RGtTM/h120/Pinboard.png'/></a> ");
$("#mailto-share").append(" <a href='mailto:?subject="+DataPostTitle+" | "+DataBlogTitle+"&body="+DataPostTitle+" | "+DataBlogTitle+" | "+DataBlogDescription+" | "+DataPostUrl+"' target='_blank' title='Email'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpCursFZr1dW1QY0kSG2dPvKM_Sb1lsJUR_I94EVb1YsHEG5itc_AD3fnljcTr7fG9iLfNlp0jp2Cky-svVpdku3KFcbhPKCKJyRHrMuHwExEzToJUdRtm96hussU2PDcBcmL9UABuLgY/h120/Email.png'></a> ");
});
//]]>
</script>
<br/>
<!--button share-->
Silahkan Anda kopikan kode di atas di bawah kode " <data:post.body/> " yang ke-2 pada HTML templete blogspot Anda agar tombol itu tampil di bawah setiap postingan blog Anda.
Smoga bermanfaat....!!
ConversionConversion EmoticonEmoticon