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 yaitu 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 menyebarkan tutorial perihal bagaimana cara memasang tombol share sosmed terkenal ibarat Facebook, Twitter, dan Google Plus di bawah postingan blog. Memfasilitasi pengunjung blog dengan memasang tombol share sosmed ibarat 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 instruksi ]]></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 instruksi <data:post.body/> di dalam template. Saya menemukan 2 buah instruksi di template saya. Letakkan script di bawah instruksi yang pertama.

Patokan lain yaitu instruksi <div class='post-footer'> yang kurang lebih mempunyai arti bab bawah postingan. Letakkan sebelum instruksi 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="javascript: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 semoga 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 https://duarupa.blogspot.com/

Related Posts