Pasang Tombol Share Facebook Twitter Google Plus Di Blog

Cara Memasang Tombol Share Button Facebook Twitter Google Plus di Postingan Blog - Sosial media atau biasa disingkat sosmed ialah daerah berkumpul, berbagi, berkeluh kesah para netizen (orang-orang yang aktif di dunia maya).

Kita seringkali melihat pada beranda sosmed kita aneka macam link yang di-share oleh teman-teman kita. Nah, link-link tersebut biasanya menuju situs atau blog orang lain. Jika konten yang dimuat link tersebut unik, memberi manfaat, atau heboh, sanggup saja link tersebut menjadi viral (di-share berkali-kali oleh netizen).

Seiring viralnya sebuah artikel, tentu menciptakan jumlah pengunjung blog juga semakin meningkat, dan berdampak pula dengan makin dikenalnya situs atau blog tersebut.

Nah, kali ini blog akan membuatkan tutorial perihal bagaimana cara memasang tombol share sosmed terkenal menyerupai Facebook, Twitter, dan Google Plus di bawah postingan blog. Memfasilitasi pengunjung blog dengan memasang tombol share sosmed menyerupai ini akan membantu artikel blog kita menjadi viral.

Cara Memasang Share Button Sosmed di Blog

1. Pada Dashboard Blogger, pilih Template, lalu masuk ke Edit HTML Template.

2. Pasang CSS Share Button berikut untuk mengatur tampilan tombol share-nya.

Letakkan sebelum arahan ]]></b:skin> yang sanggup dicari dengan memakai shortcut Ctrl+F.

CSS

.share__button {
width: 100%;
overflow: hidden;
margin-top: 20px;
}
.share__button a {
display: block;
height: 32px;
line-height: 32px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
.share__button .facebook {
background-color: #436FC9;
}
.share__button .twitter {
background-color: #40BEF4;
}
.share__button .google {
background-color: #EC5F4A;
}
.share__button span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
background: url(https://lh6.googleusercontent.com/-_xmVrHoLpCo/VNBsLm2TQSI/AAAAAAAAAZg/5SbdJpV7gN4/s800/single-share.png) no-repeat;
}
.share__button .facebook span {
background-color: #3967C6;
}
.share__button .twitter span {
background-color: #26B5F2;
background-position: -72px 0;
}
.share__button .google span {
background-color: #E94D36;
background-position: -144px 0;
}

Agar lebih maksimal, letakkan CSS pada bab posting.

3. Kemudian pasang script pemanggil tombol share-nya.

Cari arahan <data:post.body/> di dalam template. Saya menemukan 2 buah arahan di template saya. Letakkan script di bawah arahan yang pertama.

Patokan lain ialah arahan <div class='post-footer'> yang kurang lebih mempunyai arti bab bawah postingan. Letakkan sebelum arahan tersebut untuk memasang tombol share di bawah postingan.

Script

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share__button'>
<a class="facebook" expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target="_blank" title="Facebook">
<span></span>
Facebook
</a>
<a class="twitter" expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' target="_blank" title="Twitter"><span></span>
Twitter
</a>
<a class="google" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl' onclick="j4vascript:window.open(this.href, &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;" rel="nofollow" title="Google+">
<span></span>
Google Plus
</a>
</div>
</b:if>

Teks berwarna merah merupakan tag kondisi biar tombol share hanya muncul pada halaman posting saja. Untuk lebih memahami perihal tag kondisi, silahkan baca Memahami Fungsi Tag Kondisional Blogger Lengkap.

4. Jika sudah klik Save Template.

Sekian tutorial Memasang Tombol Share Facebook Twitter Google Plus di Blog. Jika ada pertanyaan silahkan sampaikan pada kotak komentar di bawah.
Sumber http://duarupa.blogspot.com