Duit Blog Cara Memasang Share Button Di Blogger

Share Button Adalah tombol share yang menciptakan blog anda lebih atraktif. Jika Anda mencari tombol share button di internet, maka Anda menemukan banyak hasil ibarat Adthis, Share This, Simple Share Button, Addtoany Etc Shate Button untuk blogger. Mereka kebanyakan sangat membantu dan gampang diterapkan.
Kali ini aku membagikan Tombol Berbagi / Share Button yang keren untuk blogger. Tombol share ini sepenuhnya diubahsuaikan dengan CSS. Untuk memakai tombol share ini, teman harus menambahkan tombol share Facebook, Twitter, Google+, Linkedin dan Pinterest di blog blogger sobat.
Tombol Share Sosial Tidak perlu dijelaskan perihal pentingnya tombol share sosial. Namun mengatakan, tombol mengembangkan sosial dapat menumbuhkan pengunjung untuk blog sobat.

Jika teman ingin tau dengan tombol share buttonnya, teman dapat lihat dibawah artikel ini.
Sekarang mari kita mulai tutorialnya. Sebelum memulai tutorial ini simpan Backup Template teman dulu.

Buka > Dashboard > Template > Edit HTML > dan cari kode </ style>
Salin aba-aba CSS berikut dan paste sebelum aba-aba </ 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 aba-aba di bawah ini di mana Anda ingin menyampaikan tombol mengembangkan Anda. Pada dasarnya teman harus meletakkan tombol share sesudah <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 Anda. Jika tidak, ikon sosial mungkin tidak ditampilkan. Jika template teman 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 teman semua.