Cara memasang tombol share media sosial keren di blogger

Share Button Adalah tombol berbagi yang akan membuat blog sobat lebih atraktif. Jika mencari tombol share button di internet, sobat akan menemukan banyak hasil seperti Adthis, Share This, Simple Share Button, Addtoany Etc Shate Button untuk blogger.

Mereka kebanyakan sangat membantu dan mudah diterapkan. Kali ini saya membagikan Tombol Berbagi / Share Button yang keren untuk blogger dan juga sangat mudah untuk di terapkan.

Tombol share ini sepenuhnya disesuaikan dengan CSS. Menambahkan tombol share Facebook, Twitter, Google+, Linkedin dan Pinterest di blog sobat.

Tombol share media sosial tidak perlu dijelaskan lagi tentang pentingnya. Namun banyak yang mengatakan, tombol berbagi sosial media bisa meningkatkan pengunjung untuk blog sobat.

Cara memasang tombol share media sosial di blog
Cara memasang tombol share media sosial di blog

Jika sobat penasaran dengan tombol share buttonnya, sobat bisa lihat hasilnya seperti di bawah ini.

Cara memasang share button di blog

Sekarang mari kita mulai tutorialnya. Sebelum memulai tutorial ini simpan Backup Template sobat dulu.

Buka > Dashboard > Template > Edit HTML > dan cari kode </ style>
Salin kode CSS berikut dan paste sebelum kode </ style>


/*Share Button*/
.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:16px;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:18px;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-google-plus{background:#d64136;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-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}
.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 letakkan share button ini dimana pada area yang sobat inginkan. Pada dasarnya sobat harus meletakkan tombol share setelah <data: post.body />


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

Sekarang simpan template dan lihat hasilnya.

Perhatikan bahwa, Font-awesome harus ditambahkan dalam template. Jika tidak, ikon sosial mungkin tidak akan bisa di tampilkan di blog sobat. Jika template sobat belum ditambahkan, maka copy script di bawah ini dan paste sebelum </ 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>

Sekarang simpan template lagi dan lihat hasilnya. Terimakasih sudah meluangkan waktu untuk membaca artikel kami. Semoga tutorial di atas bermanfaat untuk sobat semua.

Tidak ada komentar:

Posting Komentar