Cara Memasang Tombol Share Media Sosial Di Blogger

Cara Memasang Tombol Share Media Sosial Di Blog - Memasang share button atau tombol share di blog akan berperan penting untuk mendapatkan lebih banyak pengunjung dari sosial media. Apalagi jika konten anda sangat menarik, besar kemungkinan artikel anda akan dibagikan ke temannya atau mungkin ke group lain.

Dengan adanya tombol share di blog itu akan membuat pengunjung lebih mudah membagikan artikel tanpa harus menyalin url dari blog anda. Anda bisa mencari button share yang benar-benar responsive, terutama yang kami bagikan di artikel kali ini.

Tombol ini mempunyai tampilan yang sangat menarik dan tentunya responsive akan membuat blog anda lebih atraktif. Banyak sekali tombol share yang banyak di temui seperti Adthis, Simple share button, Share this, Addtoany etc share button, dan masih banyak lagi situs penyedia tombol share untuk blog.

Tombol share yang saya bagikan kali ini sepenuhnya di sesuaikan dengan CSS. Ada berbagai tombol bagikan media sosial yaitu Facebook, Twitter, Whatsapp, Linkedin, dan Pinterest semuanya bisa anda kombinasikan sesuai selera anda.

Cara Memasang Tombol Share Media Sosial Di Blog

Jika anda ingin melihat DEMO dari tombol share ini, anda bisa melihatnya di bawah artikel ini. Kami sudah memasangnya di blog ini.

Cara Memasang Tombol Share Sosial Media Di Blog


  • Pertama masuk dulu ke menu template atau tema di blogger
  • Masuk ke Edit HTML
  • Berikutnya salin kode dibawah ini kemudian pasang kode ini tepat di atas kode </style> atau bisa juga sebelum kode ]]></b:skin>

 /* Social media icons.*/

.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;margin-top:30px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin:5px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:14px;color:#22a1c4;}
.share-post li a{display:block;text-align:center;}
.share-post span{display:none;}
.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:16px;border-radius:40px;font-weight:normal;transition:all .3s;}
.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}
.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}
.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}
.share-post li a i.fa.fa-whatsapp{background:#43d854;border:1px solid transparent;}
.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}
.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}
.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}
.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}
.share-post li a i.fa.fa-whatsapp:hover{background:#fff;color:#43d854;border:1px solid #43d854;}
.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}
.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;}  

  • Sekarang selanjutnya salin kode berikut ini kemudian letakan tepat di atas kode <data:post.body/> atau anda juga bisa memasangnya sesuai selera kalian.

 <div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share</li>
<li class='facebook_share'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='whatsapp_share'>
<a expr:href='"https://api.whatsapp.com/send?phone=&text=" + data:post.title + "%20%2D%20" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/></a>
</li>
<li class='linkedin_share'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li>
</ul>
</div>  

Penting: Didalam template biasanya terdapat beberapa kode <data:post.body/> pastikan anda meletakan tepat di atas kode tersebut agar bisa tampil sempurna di dalam postingan.

  •  Pastikan blog anda sudah terinstal Font-Awesome, jika belum terpasang maka anda harus memasangnya terlebih dahalu.
  • Pasang kode Font-Awesome di bawah ini tepat diatas kode </head>

 <script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>  

  • Terakhir Save Template dan lihat hasilnya.

Nah seperti itulah cara memasang tombol share di blog. Jika anda merasa kesulitan untuk memasangnya, anda bisa hubungi kami lewat komentar ataupun bisa juga lewat Kontak yang sudah kami sediakan.

Oke cukup sekian artikel kali ini, semoga bermanfaat.

Posting Komentar